:root{--navy:#071321;--navy2:#0b1b2e;--blue:#1160cf;--orange:#fa8425;--text:#18283c;--muted:#6d7b8d;--light:#f4f7fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.container{width:min(1160px,calc(100% - 48px));margin:auto}.site-header{height:84px;position:fixed;z-index:100;top:0;left:0;right:0;background:rgba(5,14,27,.78);backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.09);transition:background .25s}.site-header.scrolled{background:rgba(5,14,27,.97)}.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:100%}.brand{display:flex;align-items:center;gap:10px;color:white}.brand-mark{width:47px;height:43px;object-fit:cover;object-position:center}.brand-text,.footer-brand{display:flex;flex-direction:column}.brand-text strong,.footer-brand strong{font:800 16px Montserrat,sans-serif;letter-spacing:1px}.brand-text small,.footer-brand small{font:700 9px Montserrat,sans-serif;letter-spacing:2.2px;margin-top:4px}.brand-text small span,.footer-brand small span{color:#3b8dff}.brand-text small em,.footer-brand small em{color:var(--orange);font-style:normal}.main-nav{display:flex;align-items:center;gap:29px}.main-nav>a{font-size:13px;font-weight:600;color:#d7e1ee;transition:color .2s}.main-nav>a:hover{color:var(--orange)}.main-nav .nav-cta{background:var(--orange);color:#fff;padding:13px 18px;border-radius:6px}.menu-toggle{display:none}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 79% 46%,#13395b 0%,#091a2d 37%,#06111e 78%);color:#fff;min-height:740px;padding:165px 0 115px}.hero-glow{position:absolute;width:700px;height:700px;right:-200px;top:0;background:radial-gradient(circle,rgba(18,106,207,.23),transparent 65%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;position:relative}.hero-copy{position:relative;z-index:3}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.1px;color:#ff9b49;display:flex;align-items:center;gap:12px}.eyebrow-line{height:2px;width:28px;background:var(--orange)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Montserrat,Arial,sans-serif}h1{font-size:clamp(44px,5.1vw,76px);line-height:1.12;letter-spacing:-2.5px;margin:24px 0}h1 span{color:#ff9239}.hero-lead{font-size:16px;line-height:1.85;color:#c1d1e2;max-width:550px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:6px;padding:17px 23px;font-size:13px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:#ed7116}.btn-outline{border-color:#63778d;color:#fff;background:rgba(255,255,255,.035)}.btn-blue{background:var(--blue);color:#fff}.hero-bottom{font-size:11px;color:#8ca6c0;margin-top:57px;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.hero-dot,.status-dot{height:7px;width:7px;border-radius:50%;background:#32d4be;display:inline-block}.bullet{color:#45627f}.hero-visual{height:500px;position:relative;display:grid;place-items:center;isolation:isolate}.orbit{position:absolute;border-radius:50%;aspect-ratio:1}.orbit-outer{width:510px;border:2px dashed rgba(65,181,255,.43);box-shadow:0 0 60px rgba(0,139,255,.15),inset 0 0 60px rgba(0,139,255,.13);animation:spin 90s linear infinite}.orbit-inner{width:445px;border:2px solid rgba(46,170,255,.28);box-shadow:0 0 22px #047cd9,0 0 90px rgba(0,151,255,.24)}.thermostat-shell{width:355px;height:355px;border-radius:50%;padding:20px;background:linear-gradient(130deg,#59e2ff,#134f97 27%,#03101d 43%,#ff8b37 75%,#ffb764);box-shadow:12px 15px 70px rgba(255,110,34,.28),-15px -15px 60px rgba(0,164,255,.32),0 0 0 8px rgba(8,24,42,.6);transform:rotate(-8deg)}.thermostat-ring{height:100%;width:100%;padding:14px;border-radius:50%;background:conic-gradient(from 205deg,#0782d8,#36d8ff,#15385c,#ff9b49,#ff5b25,#ffab62,#0782d8);box-shadow:inset 0 0 17px rgba(0,0,0,.7)}.thermostat-face{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 25%,#183451,#020a14 72%);border:7px solid #081522;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;transform:rotate(8deg);box-shadow:inset 0 0 45px #000}.temp-caption{font-size:10px;color:#9db8d2;letter-spacing:2px}.temp-reading{font-size:100px;font-weight:700;line-height:1.3;letter-spacing:-9px;color:#6be9ff;text-shadow:0 0 30px rgba(24,206,255,.65)}.temp-reading span{font-size:50px;vertical-align:top;letter-spacing:0}.temp-state{font-size:9px;letter-spacing:2px;color:#a6bdcd}.temp-state .status-dot{margin-right:6px}.temp-scale{position:absolute;bottom:45px;display:flex;justify-content:space-between;width:155px;font-size:11px;color:#e8a273}.spark{position:absolute;width:10px;height:10px;background:#8befff;border-radius:50%;box-shadow:0 0 18px 5px #0cc3ff}.spark-one{top:38px;right:120px}.spark-two{bottom:57px;right:75px}.spark-three{left:22px;top:200px}.visual-tag{position:absolute;bottom:-15px;right:40px;font-size:10px;font-weight:800;letter-spacing:2px;color:#a5c7df}.visual-tag span{color:#ff9744;margin-right:9px}.hero-bottom-fade{position:absolute;bottom:0;width:100%;height:100px;background:linear-gradient(transparent,#071321)}.section{padding:105px 0}.services{background:#f5f7fa}.section-heading{max-width:680px;margin-bottom:48px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading.center .eyebrow{justify-content:center}.dark-eyebrow{color:#1262d3}h2{font-size:clamp(30px,3.1vw,43px);line-height:1.2;letter-spacing:-1.5px;margin:16px 0}h2 span{color:var(--blue)}.section-heading>p:last-child,.about-copy>p:not(.eyebrow),.contact-intro>p:not(.eyebrow){font-size:15px;line-height:1.85;color:var(--muted)}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{position:relative;background:#fff;border:1px solid #e7edf3;border-radius:12px;padding:29px 23px;min-height:315px;box-shadow:0 10px 35px rgba(9,31,55,.035);transition:transform .25s,box-shadow .25s}.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(9,31,55,.1)}.service-icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:35px;margin-bottom:32px}.service-icon.blue{background:#eaf3ff;color:var(--blue)}.service-icon.orange{background:#fff0e5;color:var(--orange)}.service-icon.gray{background:#edf1f4;color:#62788e}.service-number{position:absolute;right:22px;top:32px;font-size:12px;color:#a2b1c1}.service-card h3{font-size:17px}.service-card p{font-size:13px;line-height:1.75;color:var(--muted);min-height:90px}.service-card a{font-size:12px;font-weight:800;color:var(--blue)}.service-card a span{margin-left:9px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about-art{height:425px;border-radius:14px;background:radial-gradient(circle at 70% 25%,#18528b,#0b1b30 60%,#071321);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.about-art-lines{position:absolute;inset:-30%;border:1px solid rgba(56,150,255,.13);border-radius:50%;box-shadow:0 0 0 70px rgba(38,124,218,.05),0 0 0 150px rgba(38,124,218,.04)}.about-icon{font:800 150px Montserrat;color:#1467cf;z-index:1;letter-spacing:-20px}.about-icon span{font-size:80px;color:#ff8b2a;letter-spacing:0}.about-art-label{font-size:11px;letter-spacing:4px;color:#c9d7e6;z-index:1}.about-art-label span{color:#ff8b2a}.about-copy>p:not(.eyebrow){margin-bottom:20px}.about-copy .btn{margin-top:10px}.process{background:#081827;color:#fff}.process .section-heading h2 span{color:#ff943c}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.step{border-top:1px solid #33506c;padding-top:25px}.step>span{font:800 37px Montserrat;color:#ff9239}.step h3{font-size:18px;margin:24px 0 10px}.step p{font-size:14px;color:#a8bed0;line-height:1.8;max-width:300px}.contact{background:#f5f7fa}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.contact-intro{padding-top:35px}.contact-note{display:flex;gap:17px;margin-top:35px;padding:22px;background:#eaf1f9;border-radius:10px}.contact-note>span{color:#0d65d6;font-size:24px}.contact-note strong{font-size:14px}.contact-note p{font-size:13px;line-height:1.7;color:#697d91;margin:8px 0 0}.contact-placeholder{font-size:12px!important;margin-top:25px}.form-card{background:#fff;padding:35px;border-radius:13px;border:1px solid #e3eaf0;box-shadow:0 16px 45px rgba(15,41,67,.06)}.form-card h3{font-size:22px;margin-bottom:8px}.form-card>p{font-size:13px;color:var(--muted);margin-bottom:25px}.form-card form{display:grid;gap:17px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700}.form-card label>span{color:var(--orange)}.form-card input:not([type=checkbox]),.form-card textarea,.form-card select{width:100%;border:1px solid #dbe3eb;border-radius:6px;background:#f9fbfd;padding:13px 14px;font-size:13px;color:#26384d;outline:none}.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--blue)}.privacy-check{flex-direction:row!important;align-items:flex-start;line-height:1.6}.privacy-check span{color:#5c6d7e!important;font-weight:400}.privacy-check input{margin-top:2px}.submit-btn{width:100%}.form-small{font-size:11px;color:#8694a3;text-align:center;margin:0}.honey{position:absolute;left:-9999px}.form-message{padding:12px;border-radius:5px;margin-bottom:16px}.success{background:#e5f8ee;color:#186b3e}.footer{background:#06111e;color:#d4e0eb;padding:50px 0 20px}.footer-top{display:flex;justify-content:space-between;gap:30px;padding-bottom:45px}.footer-brand p{font-size:13px;color:#8099ae;margin:15px 0 0}.footer-links{display:flex;gap:25px;align-items:center;font-size:12px}.footer-links a:hover{color:var(--orange)}.footer-bottom{border-top:1px solid #203144;padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;color:#7890a6}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){.services-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1.1fr .9fr}.hero-visual{transform:scale(.8);margin-left:-35px}.about-grid,.contact-grid{gap:45px}}@media(max-width:760px){.container{width:min(100% - 36px,1160px)}.site-header{height:74px}.brand-mark{width:40px;height:37px}.brand-text strong{font-size:13px}.brand-text small{font-size:7px}.menu-toggle{display:flex;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;background:transparent;border:0;cursor:pointer}.menu-toggle span{height:2px;width:25px;background:#fff}.main-nav{display:none;position:absolute;left:0;right:0;top:74px;padding:20px;background:#071321;flex-direction:column;align-items:stretch;gap:20px}.main-nav.open{display:flex}.main-nav .nav-cta{text-align:center}.hero{padding:135px 0 80px}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:left}.hero-visual{height:380px;transform:scale(.72);margin:-40px auto -55px;width:500px;max-width:100%;left:0}.hero-bottom{margin-top:32px}.section{padding:72px 0}.services-grid{grid-template-columns:repeat(2,1fr)}.about-grid,.contact-grid{grid-template-columns:1fr;gap:30px}.about-art{height:310px}.steps{grid-template-columns:1fr}.footer-top{flex-direction:column}.footer-links{flex-wrap:wrap}}@media(max-width:480px){h1{font-size:47px}.hero-lead{font-size:14px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-visual{margin-left:calc(50% - 250px)}.services-grid{grid-template-columns:1fr}.service-card{min-height:auto}.service-card p{min-height:0}.form-row{grid-template-columns:1fr}.form-card{padding:23px}.footer-links{gap:15px}}

/* MATTHEUSSENS - HERO V2 */

.hero {
  position: relative;
  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(0, 112, 220, 0.22),
      transparent 45%
    ),
    linear-gradient(
      110deg,
      #030b16 0%,
      #071b30 55%,
      #0a2844 100%
    );
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 5;
}

.hero h1 {
  font-weight: 800;
  letter-spacing: -2.5px;
}

.hero h1 span {
  color: #ff790f;
}

.hero .eyebrow {
  color: #ff790f;
  letter-spacing: 2px;
}

.hero-lead {
  color: #e0e8f1;
}

.btn-orange {
  background: #ff790f;
  border-radius: 12px;
}

.btn-outline {
  border-radius: 12px;
}



/* ===================================
   HERO V3 - LIAM & THERMOSTAAT
=================================== */

.hero {
  min-height: 700px;
  padding: 145px 0 75px;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  isolation: isolate;
  min-height: 480px;
}

.hero-copy {
  position: relative;
  z-index: 5;
}

.hero-person {
  position: absolute;
  z-index: 3;
  bottom: -75px;
  left: 43%;
  width: min(35vw, 460px);
  pointer-events: none;
}

.hero-person img {
  display: block;
  width: 100%;
  height: auto;

  /* Foto subtiel laten overvloeien */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 82%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 82%,
    transparent 100%
  );
}

.hero-visual {
  position: relative;
  z-index: 1;
  transform: translateX(125px) scale(.85);
}

/* Tablet */
@media (max-width: 1050px) {
  .hero-person {
    left: 46%;
    width: 38vw;
  }

  .hero-visual {
    transform: translateX(75px) scale(.72);
  }
}

/* Mobiel */
@media (max-width: 760px) {
  .hero {
    padding: 115px 0 50px;
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-person {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(78%, 340px);
    margin: 25px auto -35px;
  }

  .hero-visual {
    transform: scale(.65);
    margin: -45px auto -75px;
  }
}


@media (min-width: 1051px) {
  .hero-person {
    left: 45%;
    width: min(39vw, 510px);
    bottom: -75px;
  }
}



/* Hero voordelen */

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 48px;
}

.hero-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 95px;
  text-align: center;
  color: #e5edf6;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}

.benefit-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(90, 174, 255, .6);
  border-radius: 50%;
  color: #65cfff;
  font-size: 24px;
}

@media (max-width: 760px) {
  .hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 35px;
  }

  .hero-benefit {
    min-width: 0;
  }
}


/* =====================================
   SERVICES V2 - PHOTO CARDS
===================================== */

.services {
  background: #f5f7fa;
}

.service-card {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3eaf1;
  box-shadow: 0 12px 30px rgba(9, 31, 55, .06);
  transition: transform .3s, box-shadow .3s;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(9, 31, 55, .13);
}

.service-image {
  height: 190px;
  overflow: hidden;
  background: #e6edf4;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.07);
}

.service-content {
  position: relative;
  padding: 40px 23px 25px;
  display: flex;
  flex-direction: column;
  min-height: 235px;
}

.service-content .service-icon {
  position: absolute;
  top: -28px;
  left: 22px;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  border: 4px solid #fff;
  font-size: 27px;
  box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

.service-content h3 {
  font-size: 17px;
  margin: 0 0 12px;
}

.service-content p {
  min-height: 0;
  margin-bottom: 20px;
}

.service-content a {
  margin-top: auto;
  color: #1262d3;
  font-weight: 800;
}

.service-content a span {
  display: inline-block;
  transition: transform .2s;
}

.service-content a:hover span {
  transform: translateX(5px);
}

@media (max-width: 760px) {
  .service-image {
    height: 180px;
  }

  .service-content {
    min-height: 220px;
  }
}


/* ===================================
   ABOUT - LIAM MATTHEUSSEN
=================================== */

.about-art {
  position: relative;
  height: 470px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 55% 35%,
      #174d83 0%,
      #0b2038 55%,
      #071321 100%
    );
}


/* ABOUT - FOTO LIAM */

.about-art {
  position: relative;
  height: 470px;
  overflow: hidden;
  border-radius: 16px;
}

.about-person {
  position: absolute;
  z-index: 2;

  width: auto;
  height: 95%;
  max-width: none;
  max-height: none;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  object-fit: contain;
  object-position: bottom center;
}

.about-person-label {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 22px;
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(5,18,34,.85);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-person-label strong {
  color: #fff;
  font-size: 15px;
}

.about-person-label span {
  color: #ff9239;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.about-copy h2 {
  max-width: 530px;
}

.about-copy p:not(.eyebrow) {
  line-height: 1.85;
}

/* Tablet en mobiel */
@media (max-width: 760px) {
  .about-art {
    height: 390px;
  }

  .about-person {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .about-art {
    height: 340px;
  }

  .about-person-label {
    left: 15px;
    bottom: 15px;
  }
}


@media (max-width: 760px) {
  .about-art {
    height: 390px;
  }

  .about-person {
    height: 95%;
    width: auto;
  }
}

@media (max-width: 480px) {
  .about-art {
    height: 340px;
  }

  .about-person {
    height: 95%;
    width: auto;
  }
}


/* =====================================
   ONZE AANPAK V2
===================================== */

.process {
  position: relative;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(17, 96, 207, .16),
      transparent 65%
    ),
    #081827;
  color: #fff;
}

.process-intro {
  color: #a8bed0;
  font-size: 15px;
  line-height: 1.8;
  margin: 20px auto 0;
  max-width: 550px;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Verbindingslijn achter de kaarten */
.steps::before {
  content: "";
  position: absolute;
  top: 55px;
  left: 10%;
  right: 10%;
  border-top: 2px dashed rgba(75, 155, 235, .35);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  padding: 28px;
  border: 1px solid rgba(104, 160, 216, .22);
  border-radius: 16px;
  background: #10263d;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.step:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 146, 57, .65);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-icon {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 146, 57, .12);
  color: #ff9239;
}

.step-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}

.step .step-number {
  font: 800 42px Montserrat, sans-serif;
  color: rgba(112, 158, 203, .35);
}

.step h3 {
  font-size: 19px;
  margin: 28px 0 14px;
}

.step p {
  color: #a8bed0;
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
  max-width: none;
}

.process-cta {
  margin-top: 45px;
  text-align: center;
}

.process-cta p {
  color: #d4e1ed;
  font-size: 15px;
  margin-bottom: 18px;
}

/* Responsive */
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .steps::before {
    display: none;
  }

  .step {
    padding: 25px;
  }

  .step h3 {
    margin-top: 20px;
  }

  .process-cta {
    margin-top: 35px;
  }
}


/* CONTACTGEGEVENS */

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #15283e;
}

.contact-detail-icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #eaf2ff;
  color: #1766d5;
  border-radius: 12px;
}

.contact-detail-icon svg {
  width: 24px;
  height: 24px;
}

.contact-detail small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #77889c;
  margin-bottom: 5px;
}

.contact-detail strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.contact-detail:hover strong {
  color: #1766d5;
}