/* Geotec — donker ontwerp · homepage */
:root{--accent:#6FBF42;--ink:#06122A;--ink-2:#0A1C3D;--ink-3:#0E2650;--text:#EEF3FA;--text-2:#B9C6DA;--text-3:#8C9BB3;--line:rgba(214,226,245,.14);--amber:#F0A53A}
html,body{margin:0;background:#06122A}
body{color:#EEF3FA;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#EEF3FA}a:hover{color:#FFFFFF}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1360px;margin:0 auto;padding-inline:clamp(20px,4vw,60px)}
.section{padding-block:clamp(96px,10vw,150px)}
.display{font-family:'Instrument Sans','Inter',system-ui,sans-serif}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--accent);flex-shrink:0}
.h2{margin:0;font-family:'Instrument Sans','Inter',system-ui,sans-serif;font-size:clamp(40px,5.2vw,78px);line-height:.95;font-weight:700;font-stretch:87%;letter-spacing:-.025em;text-wrap:balance}
.acc{color:var(--accent)}
.lead{margin:0;font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:#DCE4F0;text-wrap:pretty}
.body{margin:0;font-size:17px;line-height:1.7;color:var(--text-2);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border:1px solid transparent;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(5px)}
.btn-primary{background:var(--accent);color:#06122A}
.btn-primary:hover{filter:brightness(1.12);color:#06122A}
.btn-ghost{background:rgba(6,18,42,.25);color:#EEF3FA;border-color:rgba(238,243,250,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:#EEF3FA;color:#06122A}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:16px;text-decoration:none;color:#EEF3FA;border-bottom:1px solid rgba(238,243,250,.3);align-self:flex-start}
.link-arrow:hover{border-color:var(--accent)}
.link-arrow .arrow{transition:transform .3s}
.link-arrow:hover .arrow{transform:translateX(5px)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo-badge{flex:none;width:52px;height:52px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.logo-badge img{height:34px;width:auto;display:block}
.logo-word{display:flex;flex-direction:column;gap:4px}
.logo-name{font-family:'Montserrat','Inter',sans-serif;font-weight:700;font-size:22px;line-height:1;letter-spacing:.06em}
.logo-name .g{color:#6FBF42}
.logo-name .t{color:#FFFFFF}
.logo-tag{font-family:'Montserrat','Inter',sans-serif;font-weight:600;font-size:9.5px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:#B9C6DA}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,42,94,.94);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(238,243,250,.12);box-shadow:0 12px 32px -18px rgba(0,0,0,.55)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.header-cta{min-height:46px;padding:0 22px}
.nav-link{position:relative;padding:10px 0;font-size:15px;font-weight:500;text-decoration:none;color:#EEF3FA}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-link:hover::after,.nav-link.is-current::after{transform:scaleX(1)}
.nav-phone{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;justify-content:center;padding:0 6px;font-size:15px;font-weight:600;text-decoration:none;color:#EEF3FA}
.menu-btn{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:rgba(6,18,42,.35);border:1px solid rgba(238,243,250,.4);border-radius:50%;color:#EEF3FA;cursor:pointer}
.mobile-menu{position:absolute;top:0;left:0;right:0;z-index:30;background:#06122A;padding:22px clamp(20px,4vw,60px) 40px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line)}
.mobile-link{display:flex;align-items:center;min-height:58px;font-family:'Instrument Sans','Inter',sans-serif;font-size:30px;font-weight:700;font-stretch:87%;text-decoration:none;color:#EEF3FA;border-bottom:1px solid rgba(238,243,250,.1)}

/* hero */
.hero{position:relative;min-height:880px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#06122A}
.hero-media{position:absolute;inset:0;overflow:hidden;transform-origin:50% 100%}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.14) translate3d(2.5%,0,0);transition:opacity 1.6s ease,transform 0s linear 1.6s}
.hero-slide:nth-of-type(2){transform:scale(1.14) translate3d(-2.5%,0,0)}
.hero-slide:nth-of-type(3){transform:scale(1.14) translate3d(0,2%,0)}
.hero-slide.is-active{opacity:1;transform:scale(1.02) translate3d(0,0,0);transition:opacity 1.6s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,42,.82) 0%,rgba(6,18,42,.2) 24%,rgba(6,18,42,.28) 52%,rgba(6,18,42,.93) 86%,#06122A 100%),linear-gradient(90deg,rgba(6,18,42,.8) 0%,rgba(6,18,42,.35) 45%,rgba(6,18,42,0) 72%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(238,243,250,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(238,243,250,.06) 1px,transparent 1px);background-size:96px 96px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)}
@keyframes pulse{50%{opacity:.3}}
.vf{position:absolute;width:34px;height:34px;border-color:rgba(238,243,250,.55);border-style:solid;border-width:0;z-index:3;pointer-events:none}
.vf.tl{top:28px;left:clamp(16px,2.4vw,36px);border-top-width:2px;border-left-width:2px}
.vf.tr{top:28px;right:clamp(16px,2.4vw,36px);border-top-width:2px;border-right-width:2px}
.vf.bl{bottom:28px;left:clamp(16px,2.4vw,36px);border-bottom-width:2px;border-left-width:2px}
.vf.br{bottom:28px;right:clamp(16px,2.4vw,36px);border-bottom-width:2px;border-right-width:2px}
.hero-title{margin:0;font-family:'Instrument Sans','Inter',system-ui,sans-serif;font-size:clamp(58px,9.4vw,148px);line-height:.9;font-weight:700;font-stretch:85%;letter-spacing:-.025em;text-wrap:balance}
.hero-title .acc{position:relative;display:inline-block}
.hero-title .acc::after{content:"";position:absolute;left:0;right:.12em;bottom:-.06em;height:.055em;background:var(--accent);transform-origin:left;animation:draw 1.3s cubic-bezier(.2,.7,.2,1) 1.1s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.announce{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(6,18,42,.55);border:1px solid rgba(238,243,250,.22);font-size:14px;font-weight:500;text-decoration:none;color:#EEF3FA;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-self:flex-start;transition:border-color .3s}
.announce:hover{border-color:var(--accent)}
.announce-tag{padding:6px 10px;border-radius:999px;background:var(--accent);color:#06122A;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.announce .arrow{transition:transform .3s}
.announce:hover .arrow{transform:translateX(4px)}
.rise{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}.d6{animation-delay:.85s}
@keyframes rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
.usps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.usps li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:#DCE4F0}
.usps li::before{content:"";width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent);background:rgba(111,191,66,.18);flex-shrink:0}
.tab{display:flex;flex-direction:column;gap:12px;width:170px;min-height:44px;padding:10px 0;background:none;border:0;color:var(--text-3);text-align:left;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.tab:hover{color:#EEF3FA}
.tab .bar{position:relative;display:block;height:2px;background:rgba(238,243,250,.22);overflow:hidden}
.tab .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tab.is-active{color:#EEF3FA}
.tab.is-active .bar::after{animation:fillbar 6.5s linear forwards}
.is-static .tab.is-active .bar::after{animation:none;transform:scaleX(1)}
@keyframes fillbar{to{transform:scaleX(1)}}

/* intro */
.stat-n{font-family:'Instrument Sans','Inter',sans-serif;font-size:clamp(46px,4.6vw,68px);font-weight:700;font-stretch:85%;line-height:1;letter-spacing:-.02em;color:#EEF3FA;font-variant-numeric:tabular-nums}
.stat-n .u{color:var(--accent);font-size:.55em;margin-left:4px;letter-spacing:0}
.stat-l{margin-top:10px;font-size:14px;line-height:1.45;color:var(--text-2)}
.photo-tag{position:absolute;right:20px;top:20px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(6,18,42,.82);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#EEF3FA;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.photo-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
.crosshair{position:absolute;width:64px;height:64px;pointer-events:none;color:rgba(238,243,250,.8)}
.intro-media{position:relative}
.float-card{position:absolute;left:-56px;bottom:-56px;z-index:2;width:44%;aspect-ratio:4/3;margin:0;overflow:hidden;border-radius:6px;border:6px solid #06122A;box-shadow:0 24px 60px rgba(0,0,0,.45);background:#0A1C3D}
.float-card img{width:100%;height:100%;object-fit:cover;display:block}

/* diensten panels */
.panels{display:flex;gap:14px;height:660px}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:6px;background:#0A1C3D;transition:flex .9s cubic-bezier(.2,.7,.2,1)}
.panel.is-active{flex:2.7 1 0}
.panel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(.8) brightness(.62);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.panel.is-active .panel-img{transform:scale(1);filter:saturate(1) brightness(.82)}
.panel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,42,.55) 0%,rgba(6,18,42,0) 26%,rgba(6,18,42,.1) 45%,rgba(6,18,42,.94) 100%)}
.panel-top{position:absolute;top:26px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#EEF3FA}
.panel-plus{width:40px;height:40px;border-radius:50%;border:1px solid rgba(238,243,250,.45);display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.2,.7,.2,1),background .4s,border-color .4s,color .4s}
.panel.is-active .panel-plus{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:#06122A}
.panel-body{position:absolute;left:0;right:0;bottom:0;padding:30px;display:flex;flex-direction:column;gap:14px}
.panel-title{margin:0;font-family:'Instrument Sans','Inter',sans-serif;font-size:clamp(28px,2.5vw,40px);line-height:1;font-weight:700;font-stretch:85%;letter-spacing:-.02em;hyphens:manual}
.panel-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .8s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.panel.is-active .panel-more{grid-template-rows:1fr;opacity:1;transition-delay:.15s,.35s}
.panel-more-inner{overflow:hidden;min-height:0;width:min(560px,78vw);display:flex;flex-direction:column;gap:18px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:#DCE4F0}
.checks li svg{flex-shrink:0;margin-top:3px;color:var(--accent)}
.price{display:inline-flex;align-items:baseline;gap:8px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.price strong{font-family:'Instrument Sans','Inter',sans-serif;font-size:30px;letter-spacing:-.01em;text-transform:none;color:#EEF3FA;font-weight:700;font-stretch:87%}

/* actueel / risicoklassen */
.risk-wrap{position:relative;padding:36px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(14,38,80,.55),rgba(10,28,61,.35))}
.risk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;height:360px}
.risk-col{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;height:100%}
.risk-bar{position:relative;border-radius:4px 4px 0 0;background:rgba(214,226,245,.09);border:1px solid rgba(214,226,245,.2);border-bottom:0;transform-origin:bottom}
.risk-col.hot .risk-bar{background:rgba(240,165,58,.14);border-color:#F0A53A}
.risk-letter{position:absolute;top:14px;left:0;right:0;text-align:center;font-family:'Instrument Sans','Inter',sans-serif;font-size:40px;font-weight:700;font-stretch:85%;line-height:1;color:#EEF3FA}
.risk-col.hot .risk-letter{color:#F0A53A}
.risk-label{min-height:34px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:500;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--text-2)}
.risk-col.hot .risk-label{color:#F0A53A}
.risk-base{height:2px;background:rgba(214,226,245,.35)}

/* werkwijze */
.step{display:flex;flex-direction:column;gap:18px}
.step-line{position:relative;height:2px;background:rgba(238,243,250,.16);overflow:hidden}
.step-line::after{content:"";position:absolute;inset:0;background:var(--accent)}
.step-n{font-family:'Instrument Sans','Inter',sans-serif;font-size:96px;line-height:1;font-weight:700;font-stretch:85%;color:transparent;-webkit-text-stroke:1.5px rgba(238,243,250,.65)}
.step h3{margin:0;font-family:'Instrument Sans','Inter',sans-serif;font-size:28px;font-weight:700;font-stretch:87%;letter-spacing:-.015em}
.step p{margin:0;font-size:16px;line-height:1.65;color:var(--text-2)}

/* cta */
.big-phone{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-family:'Instrument Sans','Inter',sans-serif;font-size:clamp(38px,4.6vw,68px);font-weight:700;font-stretch:85%;letter-spacing:-.015em;text-decoration:none;color:#EEF3FA}
.big-phone:hover{color:var(--accent)}

/* footer */
.foot-h{margin:0 0 18px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.foot-list a{display:inline-flex;align-items:center;gap:10px;min-height:36px;font-size:16px;text-decoration:none;color:#D3DCEA}
.foot-list a:hover{color:#FFFFFF}
.call-fab{display:none}

/* scroll-driven reveals, only where the browser supports them */
@supports (animation-timeline: view()){
.reveal{animation:revealUp linear both,fadeAway linear forwards;animation-timeline:view(),view();animation-range:entry 5% entry 80%,exit 25% exit 100%}
.su{animation:slideUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.sl{animation:slideL linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.sr{animation:slideR linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.st2{animation-range:entry 8% entry 78%}
.st3{animation-range:entry 16% entry 86%}
.st4{animation-range:entry 24% entry 94%}
.reveal-img{animation:revealClip linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
.step-line::after{animation:lineFill linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
.risk-bar{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
.risk-col:nth-child(2) .risk-bar{animation-range:entry 14% cover 42%}
.risk-col:nth-child(3) .risk-bar{animation-range:entry 18% cover 46%}
.risk-col:nth-child(4) .risk-bar{animation-range:entry 22% cover 50%}
.risk-col:nth-child(5) .risk-bar{animation-range:entry 26% cover 54%}
.hero{view-timeline:--hero block}
.hero-media{animation:heroAway linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
.hero-copy{animation:heroCopy linear both;animation-timeline:--hero;animation-range:exit 0% exit 60%}
.parallax img{scale:1.16;animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.panel-img{top:-5%;height:110%;animation:panelDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.float-card{animation:floatUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.drift-x{animation:driftX linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes revealUp{from{opacity:0;transform:translateY(54px)}to{opacity:1;transform:none}}
@keyframes fadeAway{from{opacity:1;transform:none}to{opacity:.2;transform:translateY(-40px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
@keyframes panelDrift{from{translate:0 -4%}to{translate:0 4%}}
@keyframes floatUp{from{translate:0 80px}to{translate:0 -80px}}
@keyframes driftX{from{translate:40px 0}to{translate:-40px 0}}
@keyframes revealClip{from{clip-path:inset(24% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lineFill{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@keyframes heroAway{to{transform:scale(.92);filter:brightness(.45)}}
@keyframes heroCopy{to{opacity:0;transform:translateY(-90px)}}
@keyframes drift{from{translate:0 -7%}to{translate:0 7%}}

@media (max-width:1120px){
.main-nav{display:none !important}
.menu-btn{display:inline-flex}
}
@media (max-width:900px){
.panels{flex-direction:column;height:auto}
.panel,.panel.is-active{flex:none;min-height:520px}
.panel-more{grid-template-rows:1fr;opacity:1}
.panel-more-inner{width:100%}
.panel-img,.panel.is-active .panel-img{transform:none;filter:saturate(1) brightness(.72)}
.panel-plus{display:none}
.hero-tabs{display:none !important}
.vf{display:none}
.float-card{left:16px;bottom:-40px;width:52%}
.risk{height:300px;gap:8px}
.risk-label{font-size:9.5px}
}
@media (max-width:640px){
.hero{min-height:700px}
.nav-phone-text,.header-cta{display:none !important}
.risk-wrap{padding:22px 16px}
.risk-letter{font-size:28px}
.call-fab{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
.photo-tag::before{animation:none}
.hero-slide,.hero-slide.is-active{transition:opacity .2s;transform:none}
.rise,.reveal,.su,.sl,.sr,.reveal-img,.step-line::after,.risk-bar,.hero-media,.hero-copy,.parallax img,.panel-img,.float-card,.drift-x,.hero-title .acc::after{animation:none !important}
.panel,.panel-img,.panel-more{transition:none}
}