:root{--blue:#0f6fe8;--blue2:#0a55bc;--navy:#0b1c35;--ink:#111827;--muted:#667085;--line:#e7ebf0;--bg:#f7f9fc;--white:#fff;--radius:20px;--shadow:0 18px 50px rgba(10,36,72,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 40px));margin:auto}.narrow{width:min(880px,calc(100% - 40px))}.site-header{position:absolute;z-index:20;left:0;right:0;top:0;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center}.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff}.brand-mark svg{width:100%;fill:currentColor}.brand strong,.brand span{display:block;line-height:1}.brand strong{font-size:20px}.brand span{font-size:15px;color:#68b3ff;margin-top:4px;font-weight:700}.desktop-nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:14px}.desktop-nav a{opacity:.92}.desktop-nav a:hover{opacity:1}.nav-cta{padding:12px 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px}.menu-btn{display:none;background:none;border:0;color:#fff;font-size:28px}.mobile-nav{background:#fff;color:var(--ink);padding:16px 20px;position:absolute;left:0;right:0}.mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.hero{min-height:820px;position:relative;background:url('assets/hero.png') center/cover no-repeat;display:flex;align-items:center;color:#fff}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,17,32,.80) 0%,rgba(5,23,45,.54) 48%,rgba(6,20,34,.18) 100%),linear-gradient(0deg,rgba(6,20,34,.28),transparent 45%)}.hero-content{position:relative;padding-top:90px;max-width:1180px}.hero-content>*{max-width:760px}.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin-bottom:16px}.eyebrow.blue{color:var(--blue)}h1{font-size:clamp(48px,6.5vw,84px);line-height:.98;letter-spacing:-.045em;margin:0 0 24px;max-width:850px!important}h1 span{color:#7dc0ff}.hero p{font-size:20px;line-height:1.6;max-width:680px;color:rgba(255,255,255,.88)}.hero-actions{display:flex;gap:14px;margin-top:32px}.btn{display:inline-flex;justify-content:center;align-items:center;padding:15px 22px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:.2s;cursor:pointer;font-family:inherit}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(15,111,232,.24)}.btn-primary:hover{background:var(--blue2)}.btn-secondary{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}.btn-light{border-color:#d8e0e8;background:#fff;color:var(--navy)}.full{width:100%}.hero-trust{display:flex;gap:26px!important;flex-wrap:wrap;margin-top:34px;font-size:14px;color:#fff}.hero-trust b{color:#7dc0ff;margin-right:5px}
.section{padding:96px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}h2{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.035em;line-height:1.05;margin:0}.lead-copy{font-size:18px;line-height:1.75;color:var(--muted)}.features{padding-top:10px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.feature-card .icon{width:44px;height:44px;border-radius:12px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:21px;margin-bottom:20px}.feature-card h3{margin:0 0 10px}.feature-card p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.portfolio-section{background:var(--bg)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:36px}.section-heading>p{max-width:390px;color:var(--muted);font-size:17px}.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.portfolio-card{grid-column:span 4;min-height:250px;border-radius:18px;overflow:hidden}.portfolio-card.large{grid-column:span 8}.ph{height:100%;min-height:250px;display:flex;align-items:end;padding:24px;color:#fff;font-weight:800;font-size:20px;background-size:cover;background-position:center;position:relative}.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,16,35,.66),transparent 70%)}.ph span{position:relative;z-index:1}.ph1{background-image:url('assets/hero.png')}.ph2{background:linear-gradient(145deg,#ee7786,#f2c94c 46%,#5f9c50)}.ph3{background:linear-gradient(145deg,#718096,#d2b48c)}.ph4{background:linear-gradient(145deg,#3f87a6,#ebf8e1,#f69d3c)}.ph5{background:linear-gradient(145deg,#223,#cc9)}.portfolio-note{color:var(--muted);font-size:13px;margin-top:16px}
.center-heading{text-align:center;max-width:760px;margin:0 auto 42px}.center-heading p{color:var(--muted);font-size:17px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.price-card{border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff;box-shadow:0 10px 30px rgba(9,30,66,.05);position:relative;display:flex;flex-direction:column}.price-card.featured{border:2px solid var(--blue);transform:translateY(-10px);box-shadow:var(--shadow)}.popular{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;padding:8px 15px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.price-top h3{font-size:26px;margin:0 0 8px}.price-top p{color:var(--muted);min-height:48px}.price{font-size:58px;font-weight:800;letter-spacing:-.05em;color:var(--navy);margin-top:18px}.price span{font-size:22px;vertical-align:top;margin-right:3px}.price-top small{color:var(--muted)}.price-card ul{list-style:none;padding:0;margin:28px 0;display:grid;gap:13px;flex:1}.price-card li{font-size:14px;line-height:1.5;padding-left:25px;position:relative}.price-card li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}.launch-banner{margin-top:28px;border-radius:18px;background:#eaf3ff;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#0d3568}.launch-banner div{display:flex;gap:18px;align-items:center}.launch-banner a{font-weight:800;color:var(--blue)}
.drone-section{background:#fff}.drone-card{border-radius:28px;background:linear-gradient(135deg,#0a2a52,#0e6ee8);color:#fff;display:grid;grid-template-columns:420px 1fr;gap:30px;align-items:center;padding:46px;overflow:hidden}.drone-visual{height:280px;border-radius:20px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.22),rgba(255,255,255,.03) 58%),rgba(255,255,255,.07);display:grid;place-items:center}.drone-shape{font-size:110px;transform:rotate(45deg);opacity:.9}.drone-card .eyebrow.blue{color:#89c5ff}.drone-card p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.7;max-width:650px}.mini-specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.mini-specs span{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);padding:10px 13px;border-radius:999px;font-size:13px}
.steps-section{background:var(--bg)}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}.step b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:var(--blue);margin-bottom:28px}.step h3{margin:0 0 10px}.step p{color:var(--muted);line-height:1.6;font-size:14px}
.sector-chips{display:flex;flex-wrap:wrap;gap:12px}.sector-chips span{padding:13px 18px;border-radius:999px;border:1px solid #dfe6ee;background:#fff;font-weight:600;color:#344054}.faq-section{background:#fff}.faq-list{display:grid;gap:12px}.faq-list details{border:1px solid var(--line);border-radius:16px;padding:0 20px;background:#fff}.faq-list summary{cursor:pointer;padding:20px 0;font-weight:700;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";float:right;color:var(--blue);font-size:22px}.faq-list details[open] summary:after{content:"–"}.faq-list p{color:var(--muted);line-height:1.65;margin:0 0 20px}
.contact-section{background:var(--bg)}.contact-card{border-radius:28px;background:var(--navy);color:#fff;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.contact-card p{color:rgba(255,255,255,.75);font-size:17px;line-height:1.7}.contact-points{display:grid;gap:10px;margin-top:26px;color:#cfe5ff}.contact-card form{background:#fff;border-radius:20px;padding:26px;color:var(--ink);display:grid;gap:14px}.contact-card label{display:grid;gap:7px;font-size:13px;font-weight:700}.contact-card input,.contact-card select,.contact-card textarea{font:inherit;border:1px solid #dce3eb;border-radius:10px;padding:13px 14px;outline:none;width:100%;background:#fff}.contact-card input:focus,.contact-card select:focus,.contact-card textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,111,232,.1)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-note{color:var(--muted);line-height:1.4}
footer{padding:40px 0;background:#071426;color:#fff}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:center}.footer-brand .brand-mark{color:#68b3ff}.footer-grid p{text-align:center;color:#91a0b4}.footer-links{display:flex;justify-content:flex-end;gap:18px;color:#cbd5e1;font-size:14px}
@media(max-width:900px){.desktop-nav{display:none}.menu-btn{display:block}.hero{min-height:760px}.split,.contact-card,.drone-card{grid-template-columns:1fr}.feature-grid,.steps-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.portfolio-card,.portfolio-card.large{grid-column:span 6}.drone-card{padding:30px}.drone-visual{height:220px}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}.footer-links{justify-content:center}.footer-grid p{text-align:center}}
@media(max-width:620px){.container,.narrow{width:min(100% - 28px,1180px)}.nav-wrap{height:72px}.hero{min-height:720px}.hero-content{padding-top:70px}.hero p{font-size:17px}.hero-actions{flex-direction:column;align-items:stretch}.hero-trust{gap:12px 18px!important}.section{padding:68px 0}.feature-grid,.steps-grid{grid-template-columns:1fr}.section-heading{display:block}.portfolio-card,.portfolio-card.large{grid-column:span 12}.launch-banner,.launch-banner div{display:block}.launch-banner a{display:block;margin-top:12px}.drone-card{padding:24px}.contact-card{padding:24px}.form-row{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}}
.site-logo {
  width: 230px;
  height: auto;
  display: block;
}.footer-logo {
  width: 220px;
  height: auto;
  display: block;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-contact a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}.drone-visual {
  overflow: hidden;
}

.drone-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}.subpage-header {
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(4,17,32,.78),
      rgba(5,23,45,.48)
    ),
    url('assets/hero.png') center 42% / cover no-repeat;
}.founder-section {
  padding: 70px 0;
  background: #f7f9fc;
}

.founder-section .container {
  max-width: 1180px;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.founder-image {
  width: 100%;
}

.founder-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 22px;
}

.founder-content {
  width: 100%;
  max-width: none;
  text-align: left;
  padding-top: 20px;
}

.founder-content .eyebrow {
  text-align: left;
  margin-bottom: 12px;
}

.founder-content h2 {
  margin: 0 0 22px;
  font-size: 46px;
  line-height: 1.05;
  color: #101827;
  text-transform: none !important;
  letter-spacing: -1.5px;
}

.founder-content p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: #5f6b7c;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.founder-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.founder-points span {
  background: #eaf2ff;
  color: #1167e8;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 800px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .founder-image img {
    height: auto;
  }

  .founder-content {
    padding-top: 0;
  }

  .founder-content h2 {
    font-size: 36px;
  }
}/* OVER ONS PAGINA - COMPACTER EN NETTER */

.about-page {
  padding-top: 45px !important;
  padding-bottom: 35px !important;
}

.about-page .container {
  max-width: 1180px;
}

.about-page .eyebrow {
  margin-bottom: 12px;
}

.about-page h1 {
  margin: 0 0 22px;
  line-height: 1.05;
}

.about-page p {
  max-width: 1000px;
  margin-bottom: 14px;
  line-height: 1.55;
}


/* JOP SECTIE DICHTER BIJ BOVENSTE TEKST */

.founder-section {
  padding-top: 35px !important;
  padding-bottom: 60px !important;
}

.founder-grid {
  max-width: 1120px;
  margin: 0 auto;
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
  align-items: center;
}

.founder-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center top;
  border-radius: 22px;
}

.founder-content {
  padding-top: 0 !important;
}

.founder-content .eyebrow {
  margin-bottom: 10px;
}

.founder-content h2 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1.05;
}

.founder-content p {
  margin-bottom: 14px;
  line-height: 1.6;
}


/* MOBIEL */

@media (max-width: 800px) {

  .about-page {
    padding-top: 30px !important;
    padding-bottom: 25px !important;
  }

  .founder-section {
    padding-top: 25px !important;
  }

  .founder-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .founder-image img {
    height: auto;
  }
}.about-page h1 {
  font-size: clamp(46px, 6vw, 70px);
}/* FOTO EN TEKST NETJES UITLIJNEN */

.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 50px;
  align-items: start !important;
}

.founder-image {
  margin-top: 4px;
}

.founder-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 22px;
}

.founder-content {
  padding-top: 0 !important;
}

/* Op mobiel weer gewoon onder elkaar */
@media (max-width: 800px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .founder-image {
    margin-top: 0;
  }

  .founder-image img {
    height: auto;
  }
}/* ALGEMENE VOORWAARDEN */

.terms-page {
  padding-top: 55px;
  padding-bottom: 90px;
}

.terms-container {
  max-width: 980px;
}

.terms-page h1 {
  margin: 8px 0 18px;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.terms-intro {
  max-width: 800px;
  font-size: 18px;
  line-height: 1.65;
  color: #596579;
}

.terms-update {
  margin-top: 14px;
  color: #8791a1;
  font-size: 14px;
}

.terms-content {
  margin-top: 55px;
}

.terms-content section {
  padding: 30px 0;
  border-top: 1px solid #e4e9f0;
}

.terms-content h2 {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
}

.terms-content p,
.terms-content li {
  font-size: 16px;
  line-height: 1.75;
  color: #566174;
}

.terms-content p {
  margin: 0 0 14px;
}

.terms-content ul {
  margin: 12px 0 18px;
  padding-left: 23px;
}

.terms-content a {
  color: #1672ed;
  font-weight: 600;
  text-decoration: none;
}

.terms-content a:hover {
  text-decoration: underline;
}

.terms-contact {
  margin-top: 15px;
  padding: 30px !important;
  border: 0 !important;
  border-radius: 20px;
  background: #f4f7fb;
}

@media (max-width: 800px) {
  .terms-page {
    padding-top: 35px;
  }

  .terms-page h1 {
    font-size: 42px;
  }

  .terms-content {
    margin-top: 35px;
  }

  .terms-content section {
    padding: 24px 0;
  }
}.footer-links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  margin-top: 32px;
  flex-wrap: wrap;
  text-align: center;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}/* FOOTER STRAKKER MAKEN */

footer {
  padding: 48px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.footer-brand {
  justify-self: start;
}

.footer-brand img {
  max-width: 200px;
}

.footer-grid > div:nth-child(2) {
  text-align: center;
}

.footer-grid > div:nth-child(2) p {
  margin: 0 0 10px;
  line-height: 1.4;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-links {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  .footer-brand {
    justify-self: center;
  }

  .footer-links {
    gap: 16px 22px;
  }
}/* ==========================================================
   DRONE VIDEO BOLLENSTREEK
   CINEMATIC DRONE V3
   ========================================================== */


/* Oude drone-versies uitschakelen */

.drone-flyby,
.drone-scene {
  display: none !important;
}


/* Hero voorbereiden */

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


/* Donkere overlay onder de drone */

.hero-overlay {
  z-index: 1;
}


/* Nieuwe drone-laag */

.hero-drone-stage-v3 {
  position: absolute;

  inset: 0;

  z-index: 2;

  overflow: hidden;

  pointer-events: none;

  perspective: 1500px;

  transform-style: preserve-3d;
}


/* Tekst blijft altijd vóór drone */

.hero-content,
.hero > .container {
  position: relative;
  z-index: 5;
}


/* ==========================================================
   DRONE
   ========================================================== */

.hero-drone-v3 {

  position: absolute;

  left: 0;
  top: 0;

  width: clamp(270px, 29vw, 540px);

  height: auto;

  opacity: 0;

  transform-origin: 50% 50%;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change:
    transform,
    opacity,
    filter;

  animation:
    drone-real-flight-v3
    10s
    linear
    0.8s
    1
    both;
}


/* ==========================================================
   DE VOLLEDIGE VLUCHT
   ========================================================== */

@keyframes drone-real-flight-v3 {


  /* --------------------------------------------------------
     VER WEG LINKS
     -------------------------------------------------------- */

  0% {

    opacity: 0;

    transform:
      translate3d(-45vw, 48vh, 0)
      scale(.28)
      rotateX(3deg)
      rotateY(-7deg)
      rotateZ(-8deg);

    filter:
      blur(2.5px)
      brightness(.92)
      drop-shadow(
        0 8px 14px rgba(0,0,0,.10)
      );

  }


  /* --------------------------------------------------------
     KOMT LANGZAAM IN BEELD
     -------------------------------------------------------- */

  5% {

    opacity: .25;

    transform:
      translate3d(-32vw, 47vh, 0)
      scale(.32)
      rotateX(3deg)
      rotateY(-7deg)
      rotateZ(-8deg);

  }


  12% {

    opacity: .75;

    transform:
      translate3d(-12vw, 45vh, 0)
      scale(.42)
      rotateX(2deg)
      rotateY(-6deg)
      rotateZ(-6deg);

    filter:
      blur(1.2px)
      brightness(.96)
      drop-shadow(
        0 10px 16px rgba(0,0,0,.13)
      );

  }


  /* --------------------------------------------------------
     VLIEGT DE HERO IN
     -------------------------------------------------------- */

  22% {

    opacity: 1;

    transform:
      translate3d(8vw, 42vh, 0)
      scale(.58)
      rotateX(1deg)
      rotateY(-4deg)
      rotateZ(-4deg);

    filter:
      blur(.3px)
      brightness(1)
      drop-shadow(
        0 15px 21px rgba(0,0,0,.17)
      );

  }


  32% {

    opacity: 1;

    transform:
      translate3d(27vw, 38vh, 0)
      scale(.72)
      rotateX(-1deg)
      rotateY(-2deg)
      rotateZ(-2deg);

  }


  /* --------------------------------------------------------
     MOOISTE PASSAGE ACHTER DE TEKST
     -------------------------------------------------------- */

  42% {

    opacity: 1;

    transform:
      translate3d(43vw, 34vh, 0)
      scale(.84)
      rotateX(-1.5deg)
      rotateY(0deg)
      rotateZ(.5deg);

    filter:
      blur(0)
      brightness(1.03)
      drop-shadow(
        0 19px 27px rgba(0,0,0,.20)
      );

  }


  /*
     Geen abrupte stilstand.

     De beweging wordt hier alleen heel even rustiger,
     alsof de drone de scène passeert.
  */

  50% {

    opacity: 1;

    transform:
      translate3d(53vw, 32vh, 0)
      scale(.88)
      rotateX(-1deg)
      rotateY(2deg)
      rotateZ(1.2deg);

  }


  57% {

    opacity: 1;

    transform:
      translate3d(61vw, 30vh, 0)
      scale(.86)
      rotateX(-1deg)
      rotateY(5deg)
      rotateZ(2deg);

  }


  /* --------------------------------------------------------
     DRONE BEGINT VAN ONS AF TE VLIEGEN
     -------------------------------------------------------- */

  65% {

    opacity: 1;

    transform:
      translate3d(70vw, 27vh, 0)
      scale(.74)
      rotateX(-2deg)
      rotateY(10deg)
      rotateZ(3.2deg);

    filter:
      blur(0)
      brightness(1)
      drop-shadow(
        0 15px 21px rgba(0,0,0,.16)
      );

  }


  73% {

    opacity: 1;

    transform:
      translate3d(79vw, 23vh, 0)
      scale(.60)
      rotateX(-3deg)
      rotateY(15deg)
      rotateZ(4.5deg);

  }


  /* --------------------------------------------------------
     VLIEGT DE VERTE IN
     -------------------------------------------------------- */

  82% {

    opacity: .95;

    transform:
      translate3d(90vw, 18vh, 0)
      scale(.43)
      rotateX(-4deg)
      rotateY(20deg)
      rotateZ(5.5deg);

    filter:
      blur(.5px)
      brightness(.96)
      drop-shadow(
        0 8px 15px rgba(0,0,0,.10)
      );

  }


  90% {

    opacity: .7;

    transform:
      translate3d(103vw, 13vh, 0)
      scale(.29)
      rotateX(-5deg)
      rotateY(24deg)
      rotateZ(7deg);

    filter:
      blur(1.2px)
      brightness(.92)
      drop-shadow(
        0 5px 10px rgba(0,0,0,.06)
      );

  }


  /* --------------------------------------------------------
     VOLLEDIG UIT BEELD
     -------------------------------------------------------- */

  100% {

    opacity: 0;

    transform:
      translate3d(128vw, 6vh, 0)
      scale(.15)
      rotateX(-6deg)
      rotateY(29deg)
      rotateZ(8deg);

    filter:
      blur(2.5px)
      brightness(.88);

  }

}


/* ==========================================================
   MOBIEL
   ========================================================== */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 330px;

    animation-duration: 8.5s;
  }

}


/* ==========================================================
   MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero-drone-stage-v3 {
    display: none;
  }

}/* ==========================================================
   ULTRA SHARP MOBILE DRONE
   Alleen voor telefoon
   ========================================================== */

@media (max-width: 800px) {

  .hero-drone-v3 {

    /*
      De afbeelding wordt bewust groot gerenderd.
      Daarna schalen we hem kleiner.
      Dit helpt vooral Safari om hem scherp te houden.
    */
    width: 720px;
    max-width: none;
    height: auto;

    /*
      Geen blur / brightness / drop-shadow tijdens animatie.
    */
    filter: none !important;

    /*
      Safari optimalisaties
    */
    image-rendering: auto;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    will-change: transform, opacity;

    /*
      We gebruiken op mobiel onze eigen animatie.
    */
    animation:
      drone-mobile-sharp
      8.2s
      linear
      0.7s
      1
      both !important;
  }


  /* ========================================================
     MOBILE FLIGHT
     ======================================================== */

  @keyframes drone-mobile-sharp {

  0% {
    opacity: 0;
    transform:
      translate3d(-70vw, 31vh, 0)
      scale(.18)
      rotateZ(-6deg);
  }

  6% {
    opacity: .35;
    transform:
      translate3d(-52vw, 30vh, 0)
      scale(.21)
      rotateZ(-5deg);
  }

  14% {
    opacity: .8;
    transform:
      translate3d(-32vw, 29vh, 0)
      scale(.26)
      rotateZ(-4deg);
  }

  23% {
    opacity: 1;
    transform:
      translate3d(-10vw, 27vh, 0)
      scale(.33)
      rotateZ(-3deg);
  }

  32% {
    opacity: 1;
    transform:
      translate3d(12vw, 25vh, 0)
      scale(.40)
      rotateZ(-1.5deg);
  }

  41% {
    opacity: 1;
    transform:
      translate3d(31vw, 23vh, 0)
      scale(.46)
      rotateZ(0deg);
  }

  49% {
    opacity: 1;
    transform:
      translate3d(47vw, 21vh, 0)
      scale(.49)
      rotateZ(.8deg);
  }

  57% {
    opacity: 1;
    transform:
      translate3d(60vw, 19vh, 0)
      scale(.45)
      rotateZ(1.8deg);
  }

  65% {
    opacity: 1;
    transform:
      translate3d(72vw, 17vh, 0)
      scale(.38)
      rotateZ(3deg);
  }

  73% {
    opacity: .95;
    transform:
      translate3d(84vw, 15vh, 0)
      scale(.31)
      rotateZ(4deg);
  }

  80% {
    opacity: .75;
    transform:
      translate3d(96vw, 13vh, 0)
      scale(.25)
      rotateZ(5deg);
  }

  87% {
    opacity: .4;
    transform:
      translate3d(108vw, 11vh, 0)
      scale(.20)
      rotateZ(6deg);
  }

  93% {
    opacity: .12;
    transform:
      translate3d(118vw, 9vh, 0)
      scale(.16)
      rotateZ(6.5deg);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(130vw, 7vh, 0)
      scale(.12)
      rotateZ(7deg);
  }

}


    5% {
      opacity: .25;

      transform:
        translate3d(-57vw, 42vh, 0)
        scale(.20)
        rotateZ(-5.5deg);
    }


    /* -------------------------
       Komt rustig in beeld
       ------------------------- */

    12% {
      opacity: .75;

      transform:
        translate3d(-40vw, 41vh, 0)
        scale(.24)
        rotateZ(-4.5deg);
    }


    20% {
      opacity: 1;

      transform:
        translate3d(-20vw, 39vh, 0)
        scale(.30)
        rotateZ(-3.5deg);
    }


    28% {
      opacity: 1;

      transform:
        translate3d(0vw, 36vh, 0)
        scale(.37)
        rotateZ(-2.5deg);
    }


    /* -------------------------
       Achter de tekst
       ------------------------- */

    37% {
      opacity: 1;

      transform:
        translate3d(18vw, 33vh, 0)
        scale(.43)
        rotateZ(-1deg);
    }


    45% {
      opacity: 1;

      transform:
        translate3d(34vw, 30vh, 0)
        scale(.47)
        rotateZ(.3deg);
    }


    /*
      Mooiste punt.
      Drone blijft hier volledig scherp.
    */

    52% {
      opacity: 1;

      transform:
        translate3d(45vw, 28vh, 0)
        scale(.49)
        rotateZ(.8deg);
    }


    59% {
      opacity: 1;

      transform:
        translate3d(54vw, 26vh, 0)
        scale(.47)
        rotateZ(1.5deg);
    }


    /* -------------------------
       Draait / vliegt weg
       ------------------------- */

    67% {
      opacity: 1;

      transform:
        translate3d(64vw, 23vh, 0)
        scale(.41)
        rotateZ(2.5deg);
    }


    74% {
      opacity: 1;

      transform:
        translate3d(73vw, 20vh, 0)
        scale(.34)
        rotateZ(3.5deg);
    }


    /* -------------------------
       De verte in
       ------------------------- */

    82% {
      opacity: 1;

      transform:
        translate3d(84vw, 16vh, 0)
        scale(.27)
        rotateZ(4.5deg);
    }


    89% {
      opacity: .9;

      transform:
        translate3d(96vw, 12vh, 0)
        scale(.21)
        rotateZ(5.5deg);
    }


    95% {
      opacity: .5;

      transform:
        translate3d(109vw, 9vh, 0)
        scale(.17)
        rotateZ(6deg);
    }


    /* -------------------------
       Volledig uit beeld
       ------------------------- */

    100% {
      opacity: 0;

      transform:
        translate3d(125vw, 6vh, 0)
        scale(.13)
        rotateZ(7deg);
    }

  }

}/* =========================================
   MOBILE DRONE V4 - HOGER + EERDER WEG
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 720px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v4
      7.5s
      linear
      0.7s
      1
      both !important;
  }


  @keyframes drone-mobile-v4 {

    0% {
      opacity: 0;
      transform:
        translate3d(-70vw, 25vh, 0)
        scale(.18)
        rotateZ(-6deg);
    }

    10% {
      opacity: .7;
      transform:
        translate3d(-42vw, 24vh, 0)
        scale(.24)
        rotateZ(-4.5deg);
    }

    20% {
      opacity: 1;
      transform:
        translate3d(-15vw, 23vh, 0)
        scale(.31)
        rotateZ(-3deg);
    }

    30% {
      opacity: 1;
      transform:
        translate3d(10vw, 21vh, 0)
        scale(.39)
        rotateZ(-1.5deg);
    }

    40% {
      opacity: 1;
      transform:
        translate3d(32vw, 19vh, 0)
        scale(.46)
        rotateZ(0deg);
    }

    50% {
      opacity: 1;
      transform:
        translate3d(50vw, 17vh, 0)
        scale(.49)
        rotateZ(1deg);
    }

    60% {
      opacity: 1;
      transform:
        translate3d(67vw, 15vh, 0)
        scale(.43)
        rotateZ(2.5deg);
    }

    70% {
      opacity: .95;
      transform:
        translate3d(82vw, 13vh, 0)
        scale(.34)
        rotateZ(4deg);
    }

    78% {
      opacity: .7;
      transform:
        translate3d(96vw, 11vh, 0)
        scale(.26)
        rotateZ(5deg);
    }

    85% {
      opacity: .35;
      transform:
        translate3d(110vw, 9vh, 0)
        scale(.19)
        rotateZ(6deg);
    }

    92% {
      opacity: 0;
      transform:
        translate3d(125vw, 7vh, 0)
        scale(.14)
        rotateZ(7deg);
    }

    100% {
      opacity: 0;
      transform:
        translate3d(140vw, 5vh, 0)
        scale(.10)
        rotateZ(8deg);
    }

  }

}/* =========================================
   MOBILE DRONE V5
   HOGER IN BEELD + EERDER UIT BEELD
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 720px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v5
      7.2s
      linear
      0.6s
      1
      both !important;
  }


  @keyframes drone-mobile-v5 {

    0% {
      opacity: 0;
      transform:
        translate3d(-70vw, 14vh, 0)
        scale(.18)
        rotateZ(-6deg);
    }

    10% {
      opacity: .7;
      transform:
        translate3d(-42vw, 13vh, 0)
        scale(.24)
        rotateZ(-4.5deg);
    }

    20% {
      opacity: 1;
      transform:
        translate3d(-15vw, 12vh, 0)
        scale(.31)
        rotateZ(-3deg);
    }

    30% {
      opacity: 1;
      transform:
        translate3d(10vw, 11vh, 0)
        scale(.39)
        rotateZ(-1.5deg);
    }

    40% {
      opacity: 1;
      transform:
        translate3d(32vw, 10vh, 0)
        scale(.46)
        rotateZ(0deg);
    }

    50% {
      opacity: 1;
      transform:
        translate3d(50vw, 9vh, 0)
        scale(.49)
        rotateZ(1deg);
    }

    60% {
      opacity: 1;
      transform:
        translate3d(67vw, 8vh, 0)
        scale(.43)
        rotateZ(2.5deg);
    }

    70% {
      opacity: .95;
      transform:
        translate3d(82vw, 7vh, 0)
        scale(.34)
        rotateZ(4deg);
    }

    78% {
      opacity: .7;
      transform:
        translate3d(96vw, 6vh, 0)
        scale(.26)
        rotateZ(5deg);
    }

    85% {
      opacity: .35;
      transform:
        translate3d(110vw, 5vh, 0)
        scale(.19)
        rotateZ(6deg);
    }

    92% {
      opacity: 0;
      transform:
        translate3d(125vw, 4vh, 0)
        scale(.14)
        rotateZ(7deg);
    }

    100% {
      opacity: 0;
      transform:
        translate3d(140vw, 3vh, 0)
        scale(.10)
        rotateZ(8deg);
    }

  }

}/* =========================================
   MOBILE DRONE V6
   HALF ZO LANG + DESKTOP-ACHTIGE EXIT
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 720px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v6
      3.6s
      linear
      0.6s
      1
      both !important;
  }


  @keyframes drone-mobile-v6 {

    /* Start links buiten beeld */

    0% {
      opacity: 0;

      transform:
        translate3d(-70vw, 14vh, 0)
        scale(.18)
        rotateZ(-6deg);
    }


    /* Komt in beeld */

    10% {
      opacity: .65;

      transform:
        translate3d(-42vw, 13vh, 0)
        scale(.24)
        rotateZ(-4deg);
    }


    20% {
      opacity: 1;

      transform:
        translate3d(-15vw, 12vh, 0)
        scale(.31)
        rotateZ(-3deg);
    }


    30% {
      opacity: 1;

      transform:
        translate3d(8vw, 11vh, 0)
        scale(.38)
        rotateZ(-1.5deg);
    }


    /* Mooiste passage achter tekst */

    40% {
      opacity: 1;

      transform:
        translate3d(28vw, 10vh, 0)
        scale(.45)
        rotateZ(0deg);
    }


    48% {
      opacity: 1;

      transform:
        translate3d(43vw, 9vh, 0)
        scale(.48)
        rotateZ(1deg);
    }


    /* Vanaf hier meteen wegvliegen */

    56% {
      opacity: 1;

      transform:
        translate3d(58vw, 8vh, 0)
        scale(.43)
        rotateZ(2.5deg);
    }


    64% {
      opacity: 1;

      transform:
        translate3d(72vw, 6vh, 0)
        scale(.35)
        rotateZ(4deg);
    }


    /* Duidelijk de verte in */

    72% {
      opacity: .95;

      transform:
        translate3d(86vw, 3vh, 0)
        scale(.27)
        rotateZ(5deg);
    }


    80% {
      opacity: .75;

      transform:
        translate3d(100vw, 0vh, 0)
        scale(.20)
        rotateZ(6deg);
    }


    88% {
      opacity: .4;

      transform:
        translate3d(115vw, -4vh, 0)
        scale(.14)
        rotateZ(7deg);
    }


    95% {
      opacity: .12;

      transform:
        translate3d(128vw, -7vh, 0)
        scale(.10)
        rotateZ(8deg);
    }


    /* Volledig uit beeld */

    100% {
      opacity: 0;

      transform:
        translate3d(145vw, -10vh, 0)
        scale(.07)
        rotateZ(9deg);
    }

  }

}/* =========================================
   MOBILE DRONE V7
   AANVLIEGEN → STILHANGEN → WEGVLIEGEN
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 720px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v7
      6.8s
      linear
      0.6s
      1
      both !important;
  }


  @keyframes drone-mobile-v7 {

    /* =====================================
       1. KOMT RUSTIG VAN LINKS AANVLIEGEN
       ===================================== */

    0% {
      opacity: 0;

      transform:
        translate3d(-70vw, 14vh, 0)
        scale(.18)
        rotateZ(-6deg);

      animation-timing-function:
        cubic-bezier(.20, .70, .25, 1);
    }


    8% {
      opacity: .55;

      transform:
        translate3d(-48vw, 13vh, 0)
        scale(.23)
        rotateZ(-4.5deg);
    }


    17% {
      opacity: 1;

      transform:
        translate3d(-23vw, 12vh, 0)
        scale(.30)
        rotateZ(-3deg);
    }


    25% {
      opacity: 1;

      transform:
        translate3d(2vw, 11vh, 0)
        scale(.38)
        rotateZ(-1.5deg);
    }


    /* =====================================
       2. REMT AF
       ===================================== */

    31% {
      opacity: 1;

      transform:
        translate3d(22vw, 10vh, 0)
        scale(.44)
        rotateZ(-.5deg);

      animation-timing-function:
        cubic-bezier(.10, .70, .15, 1);
    }


    /* =====================================
       3. STOPT HIER
       ===================================== */

    35% {
      opacity: 1;

      transform:
        translate3d(30vw, 10vh, 0)
        scale(.46)
        rotateZ(0deg);
    }


    /* =====================================
       4. BLIJFT STIL HANGEN
       
       Exact dezelfde positie.
       Daardoor beweegt hij hier NIET verder.
       ===================================== */

    45% {
      opacity: 1;

      transform:
        translate3d(30vw, 10vh, 0)
        scale(.46)
        rotateZ(0deg);
    }


    55% {
      opacity: 1;

      transform:
        translate3d(30vw, 10vh, 0)
        scale(.46)
        rotateZ(0deg);
    }


    63% {
      opacity: 1;

      transform:
        translate3d(30vw, 10vh, 0)
        scale(.46)
        rotateZ(0deg);

      animation-timing-function:
        cubic-bezier(.45, 0, .75, .35);
    }


    /* =====================================
       5. VLIEGT WEER WEG
       ===================================== */

    70% {
      opacity: 1;

      transform:
        translate3d(45vw, 9vh, 0)
        scale(.43)
        rotateZ(2deg);
    }


    77% {
      opacity: 1;

      transform:
        translate3d(62vw, 7vh, 0)
        scale(.36)
        rotateZ(3.5deg);
    }


    84% {
      opacity: .95;

      transform:
        translate3d(80vw, 4vh, 0)
        scale(.28)
        rotateZ(5deg);
    }


    /* =====================================
       6. DE VERTE IN
       ===================================== */

    90% {
      opacity: .75;

      transform:
        translate3d(98vw, 0vh, 0)
        scale(.20)
        rotateZ(6deg);
    }


    95% {
      opacity: .35;

      transform:
        translate3d(117vw, -5vh, 0)
        scale(.13)
        rotateZ(7deg);
    }


    100% {
      opacity: 0;

      transform:
        translate3d(140vw, -10vh, 0)
        scale(.07)
        rotateZ(8deg);
    }

  }

}/* =========================================
   MOBILE DRONE V8
   SLOW APPROACH → HOVER → FLY BACK
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 640px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v8
      8.5s
      linear
      0.7s
      1
      both !important;
  }


  @keyframes drone-mobile-v8 {

    /* =====================================
       1. VER WEG LINKS
       ===================================== */

    0% {
      opacity: 0;

      transform:
        translate3d(-65vw, 15vh, 0)
        scale(.18)
        rotateZ(-5deg);

      animation-timing-function:
        cubic-bezier(.20, .65, .25, 1);
    }


    /* =====================================
       2. RUSTIG AANVLIEGEN
       ===================================== */

    10% {
      opacity: .65;

      transform:
        translate3d(-45vw, 14vh, 0)
        scale(.23)
        rotateZ(-4deg);
    }


    20% {
      opacity: 1;

      transform:
        translate3d(-25vw, 13vh, 0)
        scale(.29)
        rotateZ(-3deg);
    }


    28% {
      opacity: 1;

      transform:
        translate3d(-8vw, 12vh, 0)
        scale(.35)
        rotateZ(-1.8deg);
    }


    /* =====================================
       3. AFREMMEN
       ===================================== */

    34% {
      opacity: 1;

      transform:
        translate3d(7vw, 11vh, 0)
        scale(.40)
        rotateZ(-.7deg);

      animation-timing-function:
        cubic-bezier(.10, .80, .20, 1);
    }


    39% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);
    }


    /* =====================================
       4. VOLLEDIG STILHANGEN
       ===================================== */

    45% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);
    }


    52% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);
    }


    59% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);

      animation-timing-function:
        cubic-bezier(.35, 0, .55, 1);
    }


    /* =====================================
       5. BEGINT RECHT VAN ONS WEG TE VLIEGEN
       ===================================== */

    66% {
      opacity: 1;

      transform:
        translate3d(15vw, 9vh, 0)
        scale(.38)
        rotateZ(.5deg);
    }


    73% {
      opacity: 1;

      transform:
        translate3d(16vw, 7.5vh, 0)
        scale(.31)
        rotateZ(1deg);
    }


    80% {
      opacity: 1;

      transform:
        translate3d(18vw, 5.5vh, 0)
        scale(.24)
        rotateZ(1.5deg);
    }


    /* =====================================
       6. DIEPTE IN
       Bijna geen horizontale beweging meer.
       Vooral kleiner = verder weg.
       ===================================== */

    86% {
      opacity: .95;

      transform:
        translate3d(20vw, 3.5vh, 0)
        scale(.18)
        rotateZ(2deg);
    }


    91% {
      opacity: .8;

      transform:
        translate3d(22vw, 2vh, 0)
        scale(.13)
        rotateZ(2.5deg);
    }


    96% {
      opacity: .4;

      transform:
        translate3d(24vw, 0vh, 0)
        scale(.09)
        rotateZ(3deg);
    }


    100% {
      opacity: 0;

      transform:
        translate3d(25vw, -2vh, 0)
        scale(.06)
        rotateZ(3deg);
    }

  }

}/* =========================================
   MOBILE DRONE V9
   ULTRA SMOOTH APPROACH → HOVER → FLY BACK
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 640px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v9
      8.5s
      linear
      0.7s
      1
      both !important;
  }


  @keyframes drone-mobile-v9 {

    /* =====================================
       START
       Buiten beeld links
       ===================================== */

    0% {
      opacity: 0;

      transform:
        translate3d(-65vw, 15vh, 0)
        scale(.18)
        rotateZ(-5deg);

      /*
        Van hier tot 38%:
        één lange vloeiende beweging.
      */
      animation-timing-function:
        cubic-bezier(.16, .72, .20, 1);
    }


    /* =====================================
       EIND AANVLUCHT
       Hij remt hier exact één keer af.
       ===================================== */

    38% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);

      /*
        Vanaf hier staat hij volledig stil.
      */
      animation-timing-function:
        linear;
    }


    /* =====================================
       HOVER
       Exact dezelfde positie.
       ===================================== */

    58% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);

      /*
        Vanaf hier één vloeiende vlucht
        rechtstreeks de diepte in.
      */
      animation-timing-function:
        linear;
    }


    /* =====================================
       VLIEGT NAAR ACHTER
       Geen extra tussenstops.
       ===================================== */

    92% {
      opacity: 1;

      transform:
        translate3d(20vw, 0vh, 0)
        scale(.10)
        rotateZ(2deg);
    }


    /* =====================================
       VERDWIJNT IN DE VERTE
       ===================================== */

    100% {
      opacity: 0;

      transform:
        translate3d(22vw, -3vh, 0)
        scale(.045)
        rotateZ(2.5deg);
    }

  }

}/* =========================================
   MOBILE DRONE V10
   LANGZAMER AANVLIEGEN + EERDER STOPPEN
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 640px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v10
      8.5s
      linear
      0.7s
      1
      both !important;
  }


  @keyframes drone-mobile-v10 {

    /* =====================================
       RUSTIG AANVLIEGEN
       ===================================== */

    0% {
      opacity: 0;

      transform:
        translate3d(-38vw, 15vh, 0)
        scale(.24)
        rotateZ(-4deg);

      animation-timing-function:
        cubic-bezier(.12, .55, .18, 1);
    }


    /*
      Hij bereikt zijn hoverpositie nu rond
      27% van de animatie.

      Bij 8.5 seconden = ongeveer 2.3 seconden.
      Dat is ±1 seconde eerder dan V9.
    */

    27% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);

      animation-timing-function: linear;
    }


    /* =====================================
       STILHANGEN
       ===================================== */

    58% {
      opacity: 1;

      transform:
        translate3d(14vw, 10vh, 0)
        scale(.43)
        rotateZ(0deg);

      animation-timing-function: linear;
    }


    /* =====================================
       WEGVLIEGEN
       Zelfde als de goede versie
       ===================================== */

    92% {
      opacity: 1;

      transform:
        translate3d(20vw, 0vh, 0)
        scale(.10)
        rotateZ(2deg);
    }


    100% {
      opacity: 0;

      transform:
        translate3d(22vw, -3vh, 0)
        scale(.045)
        rotateZ(2.5deg);
    }

  }

}/* =========================================
   MOBILE DRONE V11
   LINKS BINNENVLIEGEN → 1 SEC HOVER → ACHTERUIT
   ========================================= */

@media (max-width: 800px) {

  .hero-drone-v3 {
    width: 640px !important;
    max-width: none !important;
    height: auto;

    filter: none !important;

    animation:
      drone-mobile-v11
      7.5s
      linear
      0.7s
      1
      both !important;
  }


  @keyframes drone-mobile-v11 {

    /* =====================================
       START
       VOLLEDIG BUITEN BEELD LINKS
       ===================================== */

    0% {
      opacity: 1;

      transform:
        translate3d(-115vw, 22vh, 0)
        translate(-50%, -50%)
        scale(.30)
        rotateZ(-4deg);

      /*
        Één lange, smooth beweging
        richting het midden.
      */
      animation-timing-function:
        cubic-bezier(.18, .65, .22, 1);
    }


    /* =====================================
       MIDDEN VAN HET SCHERM
       Hier komt hij tot stilstand.
       ===================================== */

    45% {
      opacity: 1;

      transform:
        translate3d(50vw, 18vh, 0)
        translate(-50%, -50%)
        scale(.46)
        rotateZ(0deg);

      /*
        Vanaf hier exact stil.
      */
      animation-timing-function: linear;
    }


    /* =====================================
       1 SECONDE STILHANGEN
       
       45% → 58% van 7.5 sec
       is ongeveer 1 seconde.
       ===================================== */

    58% {
      opacity: 1;

      transform:
        translate3d(50vw, 18vh, 0)
        translate(-50%, -50%)
        scale(.46)
        rotateZ(0deg);

      /*
        Vanaf hier gaat hij smooth
        van ons vandaan vliegen.
      */
      animation-timing-function:
        cubic-bezier(.35, 0, .60, 1);
    }


    /* =====================================
       RECHT DE DIEPTE IN
       
       Hij beweegt nauwelijks zijwaarts.
       Vooral kleiner = verder weg.
       ===================================== */

    100% {
      opacity: 0;

      transform:
        translate3d(55vw, 2vh, 0)
        translate(-50%, -50%)
        scale(.045)
        rotateZ(2deg);
    }

  }

}/* =========================================
   MOBILE HERO VOL SCHERM
   ========================================= */

@media (max-width: 800px) {

  .hero {
    min-height: 110svh !important;
    padding-bottom: 70px !important;
    box-sizing: border-box;
  }

}/* =========================================
   PORTFOLIO VIDEO
   ========================================= */

.portfolio-video-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 250px;
}

.portfolio-video-card video {
  width: 100%;
  height: 100%;
  min-height: 250px;

  object-fit: cover;
  display: block;

  border-radius: 22px;
}

.portfolio-video-label {
  position: absolute;
  left: 20px;
  bottom: 18px;

  z-index: 2;

  color: #fff;
  font-size: 18px;
  font-weight: 700;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55);
}

/* iets donkerder onderaan zodat tekst goed leesbaar blijft */
.portfolio-video-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.08) 35%,
      transparent 65%
    );

  pointer-events: none;
  border-radius: 22px;
}.launch-offer {
  display: inline-block;
  margin: 0 0 12px;
  padding: 7px 12px;
  border-radius: 999px;

  background: #eaf3ff;
  color: #1672ed;

  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.old-price {
  font-size: 20px !important;
  font-weight: 600;
  color: #9099a8;
  text-decoration: line-through;
  margin-right: 10px;
}/* =========================================================
   CINEMATIC PORTFOLIO
   ========================================================= */

.portfolio-project {
  position: relative;

  overflow: hidden;

  cursor: pointer;

  isolation: isolate;

  background: #07111f;

  transform: translateZ(0);

  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .55s cubic-bezier(.16, 1, .3, 1);
}


/* VIDEO */

.portfolio-project video {
  width: 100%;
  height: 100%;
  min-height: 250px;

  object-fit: cover;

  display: block;

  transform: scale(1.01);

  transition:
    transform 1.2s cubic-bezier(.16, 1, .3, 1),
    filter .7s ease;
}


/* CINEMATIC GRADIENT */

.portfolio-project-shade {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .15) 0%,
      rgba(0, 0, 0, 0) 35%,
      rgba(0, 0, 0, .08) 55%,
      rgba(0, 0, 0, .72) 100%
    );

  transition:
    background .6s ease;
}


/* TOP LABEL */

.portfolio-project-top {
  position: absolute;

  top: 22px;
  left: 24px;
  right: 24px;

  z-index: 3;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(255, 255, 255, .9);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .13em;
}


/* ONDERSTE INFO */

.portfolio-project-info {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 22px;

  z-index: 3;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1);
}


.portfolio-project-info h3 {
  margin: 0;

  color: #fff;

  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.05;

  letter-spacing: -.5px;
}


/* BEKIJK PROJECT PILL */

.portfolio-project-action {
  display: flex;
  align-items: center;
  gap: 9px;

  flex-shrink: 0;

  padding: 10px 14px;

  border: 1px solid rgba(255, 255, 255, .42);

  border-radius: 999px;

  background: rgba(255, 255, 255, .10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #fff;

  font-size: 12px;
  font-weight: 700;

  opacity: 0;

  transform:
    translateY(10px)
    scale(.96);

  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.16, 1, .3, 1),
    background .35s ease;
}


.portfolio-project-action span {
  font-size: 15px;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover: hover) {

  .portfolio-project:hover {
    transform:
      translateY(-5px)
      scale(1.006);

    box-shadow:
      0 28px 60px rgba(10, 25, 50, .16);
  }


  .portfolio-project:hover video {
    transform: scale(1.055);
  }


  .portfolio-project:hover .portfolio-project-info {
    transform: translateY(-3px);
  }


  .portfolio-project:hover .portfolio-project-action {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }


  .portfolio-project:hover .portfolio-project-shade {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, .18) 0%,
        rgba(0, 0, 0, 0) 34%,
        rgba(0, 0, 0, .10) 52%,
        rgba(0, 0, 0, .78) 100%
      );
  }

}


/* =========================================================
   FULLSCREEN MODAL
   ========================================================= */

.portfolio-modal {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 40px;

  visibility: hidden;
  pointer-events: none;

  opacity: 0;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}


/* DONKERE ACHTERGROND */

.portfolio-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(3, 10, 20, .88);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* MODAL */

.portfolio-modal-inner {
  position: relative;

  z-index: 2;

  width: min(1200px, 94vw);

  transform:
    translateY(24px)
    scale(.94);

  opacity: 0;

  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    opacity .45s ease;
}


/* OPEN */

.portfolio-modal.is-open {
  visibility: visible;
  pointer-events: auto;

  opacity: 1;
}


.portfolio-modal.is-open .portfolio-modal-inner {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* HEADER */

.portfolio-modal-header {
  display: flex;
  align-items: baseline;

  gap: 16px;

  margin-bottom: 18px;

  color: #fff;
}


.portfolio-modal-number {
  color: #55a4ff;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .12em;
}


.portfolio-modal-header h2 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(24px, 3vw, 42px);

  letter-spacing: -1px;
}


/* VIDEO */

.portfolio-modal-video {
  overflow: hidden;

  border-radius: 22px;

  background: #000;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .45);
}


.portfolio-modal-video video {
  display: block;

  width: 100%;

  max-height: 75vh;

  aspect-ratio: 16 / 9;

  object-fit: contain;

  background: #000;
}


/* CLOSE BUTTON */

.portfolio-modal-close {
  position: absolute;

  top: -18px;
  right: -18px;

  z-index: 10;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.20);

  border-radius: 50%;

  background:
    rgba(255,255,255,.12);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #fff;

  font-size: 28px;
  font-weight: 300;

  cursor: pointer;

  transition:
    transform .3s ease,
    background .3s ease;
}


.portfolio-modal-close:hover {
  transform: rotate(5deg) scale(1.05);

  background:
    rgba(255,255,255,.20);
}


/* NIET SCROLLEN WANNEER VIDEO OPEN IS */

body.portfolio-open {
  overflow: hidden;
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 800px) {

  .portfolio-project-top {
    top: 17px;
    left: 18px;
    right: 18px;
  }


  .portfolio-project-info {
    left: 18px;
    right: 18px;
    bottom: 17px;
  }


  .portfolio-project-action {
    opacity: 1;

    transform: none;

    padding: 8px 11px;

    font-size: 11px;
  }


  .portfolio-modal {
    padding: 18px;
  }


  .portfolio-modal-inner {
    width: 100%;
  }


  .portfolio-modal-close {
    position: fixed;

    top: 20px;
    right: 20px;

    width: 44px;
    height: 44px;
  }


  .portfolio-modal-header {
    padding-right: 55px;
  }


  .portfolio-modal-video {
    border-radius: 16px;
  }

}/* Infrastructuur titel altijd wit */
.portfolio-project .portfolio-project-info h3 {
  color: #ffffff !important;
}/* INFRASTRUCTUUR TITEL FIX */

[data-title="Infrastructuur"] .portfolio-project-info h3,
[data-title="Infrastructuur"] .portfolio-video-label,
[data-title="Infrastructuur"] h3 {
  color: #ffffff !important;
  opacity: 1 !important;
}/* ==========================================================
   PREMIUM SCROLL REVEALS
   ========================================================== */

.premium-reveal {
  opacity: 0;

  transform:
    translate3d(0, 28px, 0)
    scale(.985);

  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1);

  transition-delay:
    var(--reveal-delay, 0ms);

  will-change:
    transform,
    opacity;
}


/* Wanneer element zichtbaar wordt */

.premium-reveal.is-revealed {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* =========================================
   HEADLINES
   ========================================= */

.premium-reveal.reveal-heading {
  transform:
    translate3d(0, 34px, 0);

  transition-duration:
    1.05s;
}


.premium-reveal.reveal-heading.is-revealed {
  transform:
    translate3d(0, 0, 0);
}


/* =========================================
   CARDS
   ========================================= */

.premium-reveal.reveal-card {
  transform:
    translate3d(0, 36px, 0)
    scale(.975);
}


.premium-reveal.reveal-card.is-revealed {
  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* =========================================
   PORTFOLIO
   ========================================= */

.portfolio-card.premium-reveal {
  transform:
    translate3d(0, 42px, 0)
    scale(.965);
}


.portfolio-card.premium-reveal.is-revealed {
  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* =========================================
   VISUALS
   ========================================= */

.premium-reveal.reveal-visual {
  transform:
    translate3d(0, 30px, 0)
    scale(.96);
}


.premium-reveal.reveal-visual.is-revealed {
  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* =========================================
   MOBIEL
   ========================================= */

@media (max-width: 800px) {

  .premium-reveal {
    transform:
      translate3d(0, 20px, 0)
      scale(.99);

    transition-duration: .8s;
  }


  .premium-reveal.reveal-card,
  .portfolio-card.premium-reveal,
  .premium-reveal.reveal-visual {
    transform:
      translate3d(0, 24px, 0)
      scale(.985);
  }


  .premium-reveal.is-revealed,
  .premium-reveal.reveal-card.is-revealed,
  .portfolio-card.premium-reveal.is-revealed,
  .premium-reveal.reveal-visual.is-revealed {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

}


/* =========================================
   TOEGANKELIJKHEID
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .premium-reveal,
  .premium-reveal.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}/* ==========================================================
   PREMIUM MAGNETIC BUTTONS
   DESKTOP ONLY
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .magnetic-button {
    position: relative;

    transform:
      translate3d(
        var(--magnetic-x, 0px),
        var(--magnetic-y, 0px),
        0
      );

    transition:
      transform .18s cubic-bezier(.22, 1, .36, 1),
      box-shadow .3s ease;

    will-change: transform;
  }


  .magnetic-button.magnetic-active {
    transition:
      transform .08s linear,
      box-shadow .3s ease;
  }


  .magnetic-button:hover {
    box-shadow:
      0 12px 30px
      rgba(20, 105, 230, .18);
  }

}


/* Mobiel volledig normaal */

@media (max-width: 800px) {

  .magnetic-button {
    transform: none !important;
  }

}/* ==========================================================
   CUSTOM PORTFOLIO CURSOR
   DESKTOP ONLY
   ========================================================== */

.portfolio-cursor {
  position: fixed;

  top: 0;
  left: 0;

  width: 82px;
  height: 82px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;

  z-index: 99999;

  opacity: 0;

  transform:
    translate3d(-50%, -50%, 0)
    scale(.72);

  background:
    rgba(7, 17, 31, .78);

  border:
    1px solid rgba(255, 255, 255, .20);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, .20);

  color: #fff;

  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1);

  will-change:
    transform,
    opacity;
}


.portfolio-cursor span {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: .14em;

  transform:
    translateX(1px);
}


/* Cursor zichtbaar */

.portfolio-cursor.is-visible {
  opacity: 1;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);
}


/* Normale cursor verbergen boven portfolio */

@media (hover: hover) and (pointer: fine) {

  .portfolio-project {
    cursor: none;
  }

}


/* Mobiel / tablet uitschakelen */

@media (hover: none), (pointer: coarse) {

  .portfolio-cursor {
    display: none !important;
  }

  .portfolio-project {
    cursor: pointer;
  }

}/* ==========================================================
   PREMIUM BUSINESS PACKAGE
   ========================================================== */

.business-featured {
  position: relative;

  border:
    1px solid rgba(40, 126, 255, .30);

  background:
    linear-gradient(
      180deg,
      rgba(245, 250, 255, .98),
      rgba(255, 255, 255, 1)
    );

  box-shadow:
    0 18px 50px rgba(33, 116, 232, .10);

  transform:
    translateY(-4px);

  overflow: visible;

  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    box-shadow .5s cubic-bezier(.16, 1, .3, 1),
    border-color .4s ease;
}


/* subtiele glow */

.business-featured::before {
  content: "";

  position: absolute;
  inset: -18px;

  z-index: -1;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(35, 124, 255, .15),
      transparent 70%
    );

  filter: blur(20px);

  opacity: .75;

  pointer-events: none;
}


/* "Meest gekozen" netter */

.business-featured .popular {
  position: absolute;

  top: -14px;
  left: 50%;

  transform: translateX(-50%);

  padding: 8px 14px;

  border-radius: 999px;

  background:
    #1672ed;

  color: #fff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .08em;
  text-transform: uppercase;

  box-shadow:
    0 8px 20px rgba(22, 114, 237, .22);

  white-space: nowrap;
}


/* prijs sterker */

.business-featured .price {
  margin-top: 12px;
}


.business-featured .price {
  font-weight: 800;
}


.business-featured .old-price {
  opacity: .65;
}


/* CTA iets meer presence */

.business-featured .btn-primary {
  box-shadow:
    0 10px 25px rgba(22, 114, 237, .18);
}


/* desktop hover */

@media (hover: hover) {

  .business-featured:hover {
    transform:
      translateY(-8px)
      scale(1.01);

    border-color:
      rgba(40, 126, 255, .50);

    box-shadow:
      0 28px 70px rgba(33, 116, 232, .16);
  }

}


/* mobiel minder nadruk */

@media (max-width: 800px) {

  .business-featured {
    transform: none;
  }

}/* ==========================================================
   PREMIUM CONTACT SECTION
   ========================================================== */

.contact-premium {
  position: relative;
  overflow: hidden;

  padding: 110px 0;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(31, 125, 255, .17),
      transparent 34%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(31, 125, 255, .08),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #07101d 0%,
      #0b1728 52%,
      #07111f 100%
    );

  color: #fff;
}


/* subtiele achtergrondgloed */

.contact-premium::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  top: -280px;
  right: -180px;

  border-radius: 50%;

  background:
    rgba(35, 126, 255, .12);

  filter: blur(80px);

  pointer-events: none;
}


/* =========================================
   LAYOUT
   ========================================= */

.contact-premium-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(460px, 1.1fr);

  gap: 80px;

  align-items: center;
}


/* =========================================
   LINKERKANT
   ========================================= */

.contact-premium-copy .eyebrow {
  margin-bottom: 18px;

  color: #5ea7ff;
}


.contact-premium-copy h2 {
  max-width: 600px;

  margin:
    0
    0
    24px;

  color: #fff;

  font-size:
    clamp(42px, 4.5vw, 66px);

  line-height: .98;

  letter-spacing: -2.5px;
}


.contact-premium-intro {
  max-width: 560px;

  margin:
    0
    0
    36px;

  color:
    rgba(255,255,255,.68);

  font-size: 18px;
  line-height: 1.65;
}


/* USP'S */

.contact-premium-points {
  display: grid;

  gap: 13px;

  margin-bottom: 42px;
}


.contact-premium-points > div {
  display: flex;
  align-items: center;

  gap: 12px;
}


.contact-premium-points span {
  width: 27px;
  height: 27px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(42, 132, 255, .15);

  color: #64adff;

  font-size: 13px;
  font-weight: 900;
}


.contact-premium-points p {
  margin: 0;

  color:
    rgba(255,255,255,.84);

  font-size: 15px;
  font-weight: 600;
}


/* DIRECT CONTACT */

.contact-premium-direct {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 7px;
}


.contact-premium-direct > span {
  margin-bottom: 4px;

  color:
    rgba(255,255,255,.40);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .16em;
}


.contact-premium-direct a {
  position: relative;

  color: #fff;

  font-size: 15px;
  font-weight: 650;

  text-decoration: none;

  transition:
    color .25s ease,
    transform .3s ease;
}


.contact-premium-direct a:hover {
  color: #66adff;

  transform:
    translateX(4px);
}


/* =========================================
   FORMULIER KAART
   ========================================= */

.contact-premium-form-wrap {
  position: relative;

  padding: 38px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 28px;

  background:
    rgba(255,255,255,.075);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.28);
}


/* subtiele randgloed */

.contact-premium-form-wrap::before {
  content: "";

  position: absolute;
  inset: 0;

  padding: 1px;

  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      rgba(80,165,255,.42),
      rgba(255,255,255,.08),
      transparent 65%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0)
    content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:
    xor;

  mask-composite:
    exclude;

  pointer-events: none;
}


/* =========================================
   FORM HEADER
   ========================================= */

.contact-form-top {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 25px;

  margin-bottom: 32px;
}


.contact-form-kicker {
  display: block;

  margin-bottom: 8px;

  color: #62abff;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .16em;
}


.contact-form-top h3 {
  margin: 0;

  color: #fff;

  font-size: 28px;
  line-height: 1.1;

  letter-spacing: -.8px;
}


.contact-response {
  flex-shrink: 0;

  padding: 8px 11px;

  border:
    1px solid
    rgba(110, 180, 255, .20);

  border-radius: 999px;

  background:
    rgba(32, 126, 255, .10);

  color: #9acbff;

  font-size: 10px;
  font-weight: 800;

  white-space: nowrap;
}


/* =========================================
   FORMULIER
   ========================================= */

.contact-premium-form {
  display: grid;

  gap: 18px;
}


.contact-form-row {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 16px;
}


.contact-premium-form label {
  display: grid;

  gap: 8px;

  color:
    rgba(255,255,255,.78);

  font-size: 12px;
  font-weight: 700;
}


/* INPUTS */

.contact-premium-form input,
.contact-premium-form select,
.contact-premium-form textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 13px;

  outline: none;

  background:
    rgba(255,255,255,.07);

  color: #fff;

  font-family: inherit;

  font-size: 14px;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}


.contact-premium-form input,
.contact-premium-form select {
  height: 52px;

  padding:
    0
    15px;
}


.contact-premium-form textarea {
  min-height: 135px;

  padding: 15px;

  resize: vertical;
}


/* placeholders */

.contact-premium-form input::placeholder,
.contact-premium-form textarea::placeholder {
  color:
    rgba(255,255,255,.34);
}


/* select */

.contact-premium-form select {
  cursor: pointer;
}


/* focus */

.contact-premium-form input:focus,
.contact-premium-form select:focus,
.contact-premium-form textarea:focus {
  border-color:
    rgba(66, 151, 255, .75);

  background:
    rgba(255,255,255,.10);

  box-shadow:
    0 0 0 4px
    rgba(42, 129, 255, .10);

  transform:
    translateY(-1px);
}


/* =========================================
   BUTTON
   ========================================= */

.contact-premium-form .btn {
  min-height: 56px;

  margin-top: 4px;

  border: 0;

  border-radius: 14px;

  font-size: 15px;
  font-weight: 800;

  box-shadow:
    0 14px 35px
    rgba(18, 110, 235, .26);

  transition:
    transform .35s
    cubic-bezier(.16,1,.3,1),

    box-shadow .35s ease;
}


@media (hover: hover) {

  .contact-premium-form .btn:hover {
    transform:
      translateY(-3px);

    box-shadow:
      0 19px 45px
      rgba(18, 110, 235, .34);
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

  .contact-premium {
    padding:
      75px
      0
      65px;
  }


  .contact-premium-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .contact-premium-copy h2 {
    font-size:
      clamp(38px, 12vw, 52px);

    letter-spacing:
      -1.7px;
  }


  .contact-premium-intro {
    font-size: 16px;

    margin-bottom: 28px;
  }


  .contact-premium-points {
    margin-bottom: 32px;
  }


  .contact-premium-form-wrap {
    padding: 24px;

    border-radius: 22px;
  }


  .contact-form-top {
    flex-direction: column;

    gap: 14px;
  }


  .contact-form-top h3 {
    font-size: 25px;
  }


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


  .contact-premium-form input,
  .contact-premium-form select {
    height: 54px;

    font-size: 16px;
  }


  .contact-premium-form textarea {
    font-size: 16px;
  }

}/* ==========================================================
   PREMIUM LIGHT FOOTER
   ========================================================== */

footer {
  position: relative;

  background: #ffffff !important;
  color: #5e6878 !important;

  padding: 58px 0 30px;

  border-top: 1px solid #e7ebf1;
}


/* LOGO */

.footer-logo {
  opacity: 1 !important;
  filter: none !important;
}


/* MIDDEN TEKST */

.footer-about p {
  color: #697487 !important;

  font-size: 15px;
  line-height: 1.45;
}


/* CONTACT */

.footer-contact a {
  color: #101827 !important;

  font-weight: 700;

  transition:
    color .25s ease,
    transform .3s ease;
}


.footer-contact a:hover {
  color: #1672ed !important;

  transform: translateX(3px);
}


/* LINKS ONDERAAN */

.footer-links {
  padding-top: 28px;

  border-top: 1px solid #edf0f4;
}


.footer-links a {
  color: #101827 !important;

  font-weight: 600;

  transition: color .25s ease;
}


.footer-links a:hover {
  color: #1672ed !important;
}


/* MOBIEL */

@media (max-width: 800px) {

  footer {
    padding:
      46px
      0
      26px;
  }

  .footer-about p {
    color: #697487 !important;
  }

}/* =========================================
   PORTFOLIO TOP ROW FIX
   ========================================= */

@media (min-width: 801px) {

  .portfolio-agrarisch {
    grid-column: span 2;
    height: 320px;
  }

  .portfolio-infra {
    grid-column: span 1;
    height: 320px;
  }

  .portfolio-agrarisch video,
  .portfolio-infra video {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }

}/* =========================================
   PORTFOLIO LAYOUT DEFINITIEVE FIX
   ========================================= */

@media (min-width: 801px) {

  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Agrarisch = 2 kolommen breed */
  .portfolio-agrarisch {
    grid-column: span 2 !important;
    width: 100% !important;
    height: 320px !important;
  }

  /* Infrastructuur = 1 volledige kolom */
  .portfolio-infra {
    grid-column: span 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 320px !important;
    justify-self: stretch !important;
  }

  .portfolio-agrarisch video,
  .portfolio-infra video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

}/* =========================================
   TIJDELIJK VERBERGEN
   ========================================= */

.portfolio-card:has(.ph1),
.portfolio-card:has(.ph3),
.portfolio-card:has(.ph4) {
  display: none !important;
}@media (max-width: 800px) {

  .intro-offer strong,
  .launch-offer strong {
    margin-right: 8px;
  }

}