/* Growgency — gedeelde base-stijl (design system). Bewerk hier ipv inline per pagina. */
:root{
  --navy:#0B1733;
  --navy-deep:#070E22;
  --navy-soft:#16264F;
  --mint:#6FE3B4;
  --mint-bright:#8CF0C6;
  --mint-soft:#BFF2DD;
  --cream:#F6F4EE;
  --ink:#0E1C40;
  --grey:#8B93AB;
  --white:#FFFFFF;
  --radius:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Sora',sans-serif;
  background:var(--navy-deep);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
em,.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mint);font-weight:600;margin-bottom:20px;display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--mint);opacity:.6;display:inline-block}
section{position:relative}
/* grain overlay for depth */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- NAV ---------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,backdrop-filter .4s,box-shadow .4s}
#nav.scrolled{background:rgba(7,14,34,.78);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(255,255,255,.06)}
/* De gap is een ondergrens, geen vaste maat: space-between verdeelt de rest
   zoals altijd. Zonder die ondergrens raakte het logo tussen 981 en 1150 px
   de eerste menuknop, want space-between legt de vrije ruimte niet per se
   daar waar je hem nodig hebt. In het Duits liep dat het eerst mis, omdat de
   labels daar het langst zijn. */
.nav-inner{max-width:1180px;margin:0 auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px)}
.logo{font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--white);text-decoration:none;white-space:nowrap}
.logo span{color:var(--mint)}
.nav-links{display:flex;gap:clamp(20px,2.6vw,36px);align-items:center}
.nav-links a:not(.btn){
  color:rgba(255,255,255,.72);text-decoration:none;font-size:14px;font-weight:500;position:relative;
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--mint);transition:width .28s var(--ease);
}
.nav-links a:not(.btn):hover{color:var(--white)}
.nav-links a:not(.btn):hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer;border:none;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn-mint{background:var(--mint);color:var(--navy-deep)}
.btn-mint::before{
  content:"";position:absolute;inset:0;background:var(--mint-bright);transform:translateX(-101%);transition:transform .4s var(--ease);z-index:0;
}
.btn-mint:hover::before{transform:translateX(0)}
.btn-mint span,.btn-mint svg{position:relative;z-index:1}
.btn-mint:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(111,227,180,.4)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.nav-cta{padding:11px 22px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.04);cursor:pointer;padding:0;z-index:130;position:relative}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--mint);margin:0 auto;border-radius:2px;transition:transform .3s,opacity .3s}
#nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav.open .nav-toggle span:nth-child(2){opacity:0}
#nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden;
  background:radial-gradient(1100px 620px at 78% -8%, rgba(111,227,180,.14), transparent 58%),
             radial-gradient(800px 600px at -8% 95%, rgba(22,38,79,.85), transparent 60%),
             var(--navy-deep);
}
#heroStars{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center}
h1{font-size:clamp(46px,6.2vw,80px);line-height:1.0;font-weight:800;letter-spacing:-.035em}
h1 em{color:var(--mint);letter-spacing:0}
.hero p.lead{margin:30px 0 40px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.72);max-width:500px;font-weight:300}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* hero tiles w/ parallax */
.hero-visual{position:relative;height:540px;perspective:1000px}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s var(--ease)}
.tile{
  position:absolute;border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);padding:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.32);animation:float 8s ease-in-out infinite;
}
.tile h4{font-size:14px;font-weight:600;margin-bottom:8px;color:rgba(255,255,255,.82)}
.tile .big{font-size:30px;font-weight:800;color:var(--mint);letter-spacing:-.02em}
.tile small{color:rgba(255,255,255,.55);font-size:12px}
.tile-1{top:7%;left:1%;width:236px;animation-delay:0s}
.tile-2{top:40%;right:-1%;width:248px;animation-delay:1.6s}
.tile-3{top:71%;left:13%;width:244px;animation-delay:3.1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.bars{display:flex;align-items:flex-end;gap:7px;height:60px;margin-top:14px}
.bars i{flex:1;background:linear-gradient(180deg,var(--mint),rgba(111,227,180,.2));border-radius:4px 4px 0 0;animation:grow 1.5s var(--ease) both}
@keyframes grow{from{height:0!important}}
.spark{position:absolute;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
/* ---------- MARQUEE ---------- */
.marquee-label{text-align:center;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:30px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.marquee-track{display:flex;gap:72px;width:max-content;animation:scroll-x 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:'Instrument Serif',serif;font-style:italic;font-size:27px;color:rgba(255,255,255,.5);white-space:nowrap;transition:color .3s}
.marquee-track span:hover{color:var(--mint)}
@keyframes scroll-x{to{transform:translateX(-50%)}}
/* ---------- COMET JOURNEY ---------- */
.journey{position:relative;padding:130px 0 150px;background:linear-gradient(180deg,var(--navy-deep) 0%,#060B1C 100%);overflow:hidden}
#journeyStars{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.journey .wrap{position:relative;z-index:2}
.journey-head{text-align:center;max-width:740px;margin:0 auto 96px}
h2{font-size:clamp(36px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.06}
h2 em{color:var(--mint)}
.journey-head p{margin-top:22px;color:rgba(255,255,255,.68);font-size:17px;line-height:1.7;font-weight:300}
.journey-stage{position:relative;max-width:1080px;margin:0 auto}
#cometSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
#cometPathGhost{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5;stroke-dasharray:2 10}
#cometPathLit{fill:none;stroke:url(#mintGrad);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(111,227,180,.65))}
.comet-core{fill:#fff;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px var(--mint))}
.comet-glow{fill:var(--mint);opacity:.3;filter:blur(7px)}
.milestones{position:relative;z-index:2}
.milestone{
  display:flex;align-items:center;gap:52px;min-height:296px;
  opacity:.22;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.milestone.lit{opacity:1;transform:translateY(0)}
.milestone:nth-child(even){flex-direction:row-reverse}
.milestone-card{
  flex:0 0 45%;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:36px 38px;
  transition:box-shadow .6s,background .6s,transform .6s var(--ease);
}
.milestone-card::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:3px;border-radius:3px;background:var(--mint);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease);
}
.milestone:nth-child(even) .milestone-card::before{left:auto;right:0}
.milestone.lit .milestone-card{
  background:linear-gradient(160deg,rgba(111,227,180,.08),rgba(255,255,255,.02));
  box-shadow:0 26px 64px rgba(0,0,0,.34),0 0 0 1px rgba(111,227,180,.22);
}
.milestone.lit .milestone-card::before{transform:scaleY(1)}
.milestone-num{font-family:'Instrument Serif',serif;font-style:italic;font-size:17px;color:var(--mint);display:block;margin-bottom:12px}
.milestone-card h3{font-size:24px;font-weight:700;margin-bottom:14px;letter-spacing:-.015em}
.milestone-card p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.7;font-weight:300}
.milestone-spacer{flex:1}
.node{
  position:absolute;left:50%;transform:translate(-50%,-50%) scale(.55);
  width:16px;height:16px;border-radius:50%;background:#070E22;border:2px solid rgba(255,255,255,.22);
  transition:all .5s var(--ease);z-index:3;
}
.node.lit{background:var(--mint);border-color:#fff;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 6px rgba(111,227,180,.18),0 0 22px rgba(111,227,180,.8)}
/* ---------- STATS ---------- */
.stats{background:var(--cream);color:var(--ink);padding:116px 0}
.stats .eyebrow{color:#0E8F62}.stats .eyebrow::before{background:#0E8F62}
.stats h2 em{color:#0E8F62}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(14,28,64,.12);border-radius:var(--radius);overflow:hidden;margin-top:62px}
.stat{background:var(--cream);padding:50px 42px;transition:background .35s}
.stat:hover{background:#fff}
.stat .num{font-size:clamp(48px,5vw,66px);font-weight:800;letter-spacing:-.035em;color:var(--navy);line-height:1}
.stat .num .suffix{color:#0E8F62}
.stat p{margin-top:16px;color:#4B5470;font-size:15px;line-height:1.65;font-weight:400}
/* ---------- COMPARE ---------- */
.compare{background:var(--cream);color:var(--ink);padding:0 0 124px}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:58px}
.compare-card{border-radius:var(--radius);padding:40px 34px;background:#fff;border:1px solid rgba(14,28,64,.1);transition:transform .35s var(--ease),box-shadow .35s}
.compare-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(14,28,64,.12)}
.compare-card.hero-card{background:var(--navy);color:#fff;border:none;box-shadow:0 32px 72px rgba(11,23,51,.4);position:relative;overflow:hidden}
.compare-card.hero-card::after{content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(111,227,180,.32),transparent 70%)}
.compare-card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.compare-card.hero-card h3{color:var(--mint)}
.compare-card .tag{font-size:12px;color:#9aa2b8;margin-bottom:18px;display:block;font-weight:500}
.compare-card.hero-card .tag{color:rgba(255,255,255,.6)}
.compare-card ul{list-style:none}
.compare-card li{padding:11px 0 11px 30px;position:relative;font-size:14.5px;line-height:1.55;color:#4B5470;border-bottom:1px solid rgba(14,28,64,.07)}
.compare-card.hero-card li{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.1)}
.compare-card li:last-child{border-bottom:none}
.compare-card li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:14px;border-radius:50%;background:rgba(197,106,106,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23C56A6A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:9px}
.compare-card.hero-card li::before{background:rgba(111,227,180,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%236FE3B4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
/* ---------- FINAL CTA ---------- */
.final{position:relative;padding:150px 0;text-align:center;overflow:hidden;background:radial-gradient(900px 460px at 50% 0%, rgba(111,227,180,.18), transparent 64%),#060B1C}
#finalStars{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.final .wrap{position:relative;z-index:2}
.final h2{max-width:840px;margin:0 auto}
.final p{margin:26px auto 42px;max-width:560px;color:rgba(255,255,255,.68);font-size:17px;line-height:1.7;font-weight:300}
/* ---------- FOOTER ---------- */
footer{background:#060B1C;border-top:1px solid rgba(255,255,255,.08);padding:64px 0 40px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-grid p,.foot-grid a{color:rgba(255,255,255,.52);font-size:13.5px;line-height:2;text-decoration:none}
.foot-grid a:hover{color:var(--mint)}
.foot-col h5{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:14px}
/* De line-height:2 van .foot-grid a is voor kolommen met tekstlinks onder
   elkaar; in een pill maakt die de knop scheef. Vandaar hier expliciet 1. */
.foot-social{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 15px;
  border:1px solid rgba(255,255,255,.15);border-radius:999px;font-size:13px;line-height:1!important;
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.foot-social:hover{border-color:rgba(111,227,180,.45)}
.foot-social svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px}
.foot-bottom{margin-top:50px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.35);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* ---------- FOCUS STRIP ---------- */
/* ---------- SOFTWARE HUB ---------- */
.software{position:relative;background:linear-gradient(180deg,#060B1C,var(--navy-deep));padding:130px 0;overflow:hidden}
.software-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.software h2{margin-bottom:8px}
.software .lead2{color:rgba(255,255,255,.7);font-size:16.5px;line-height:1.7;font-weight:300;margin:18px 0 28px;max-width:480px}
.sw-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.sw-list li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.82);line-height:1.5}
.sw-list .ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:rgba(111,227,180,.14);display:grid;place-items:center;margin-top:1px}
.sw-list .ic svg{width:15px;height:15px;stroke:var(--mint)}
.sw-list b{color:#fff;font-weight:600}
/* hub diagram */
.hub{position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto;width:100%}
.hub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-line{stroke:rgba(111,227,180,.35);stroke-width:1.5;fill:none}
.hub-dot{fill:var(--mint)}
.hub-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:24px;
  background:linear-gradient(160deg,rgba(111,227,180,.22),rgba(111,227,180,.06));border:1px solid rgba(111,227,180,.4);
  display:grid;place-items:center;text-align:center;backdrop-filter:blur(6px);box-shadow:0 0 50px rgba(111,227,180,.25);z-index:3}
.hub-core b{display:block;font-size:15px;color:#fff;font-weight:700}
.hub-core span{font-size:11px;color:var(--mint);letter-spacing:.12em;text-transform:uppercase;margin-top:4px;display:block}
.hub-node{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:9px 15px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;z-index:2;backdrop-filter:blur(4px);
  transition:border-color .3s,transform .3s var(--ease)}
.hub-node:hover{border-color:var(--mint);transform:translate(-50%,-50%) scale(1.05)}
.hub-node small{display:block;font-size:10.5px;color:rgba(255,255,255,.5);font-weight:400}
/* ---------- CASES ---------- */
.cases{background:var(--cream);color:var(--ink);padding:120px 0}
.cases .eyebrow{color:#0E8F62}.cases .eyebrow::before{background:#0E8F62}
.cases h2 em{color:#0E8F62}
.cases-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.cases-head p{color:#4B5470;font-size:16px;line-height:1.6;max-width:440px;margin-top:14px}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:58px}
a.case{display:block;text-decoration:none;color:inherit}
.case{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(14,28,64,.08);transition:transform .35s var(--ease),box-shadow .35s}
.case:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(14,28,64,.14)}
.case-photo{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden}
.case-photo .ph-note{position:absolute;bottom:12px;right:12px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(0,0,0,.3);padding:4px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.case-photo .initial{font-family:'Instrument Serif',serif;font-style:italic;font-size:64px;color:rgba(255,255,255,.92)}
.case-body{padding:28px 26px 30px}
.case-metric{font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;color:#0E8F62;display:inline-block;margin-bottom:10px}
.case-body p{font-size:14.5px;color:#4B5470;line-height:1.6;margin-bottom:18px}
.case-name{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--navy);padding-top:16px;border-top:1px solid rgba(14,28,64,.08)}
.case-name .tag{margin-left:auto;font-size:11px;font-weight:600;color:#0E8F62;background:rgba(14,143,98,.1);padding:5px 11px;border-radius:999px;letter-spacing:.02em}
/* ---------- QUOTES (people) ---------- */
@media(max-width:980px){
  .software-grid{grid-template-columns:1fr;gap:48px}
  .hub{max-width:360px}
  .case-grid{grid-template-columns:1fr}
}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{height:420px;max-width:520px;margin-top:10px}
  .stats-grid,.compare-grid{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;background:var(--navy-deep);padding:96px 26px 40px;transform:translateX(105%);transition:transform .38s cubic-bezier(.16,1,.3,1);box-shadow:-24px 0 70px rgba(0,0,0,.55);z-index:120;border-left:1px solid rgba(255,255,255,.08)}
  #nav.open .nav-links{transform:translateX(0)}
  .nav-links a:not(.btn){display:block;font-size:18px;font-weight:500;color:#fff;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .nav-cta{margin-top:22px;justify-content:center;text-align:center}
  .nav-overlay{position:fixed;inset:0;background:rgba(4,8,18,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s;z-index:110}
  #nav.open .nav-overlay{opacity:1;visibility:visible}
  .milestone,.milestone:nth-child(even){flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:30px 0}
  .milestone-card{flex:1 1 auto}
  .milestone-spacer{display:none}
  #cometSvg{display:none}.milestone .node{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.milestone{opacity:1;transform:none}
}
/* ============ SUBPAGE SYSTEM ============ */
.subhero{position:relative;padding:160px 0 70px;overflow:hidden;background:radial-gradient(900px 520px at 82% -10%,rgba(111,227,180,.13),transparent 58%),var(--navy-deep)}
.subhero .wrap{position:relative;z-index:2}
.breadcrumb{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none}
.breadcrumb a:hover{color:var(--mint)}
.breadcrumb span{color:rgba(255,255,255,.3)}
.subhero h1{font-size:clamp(38px,5vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.03em;max-width:880px}
.subhero h1 em{color:var(--mint)}
.subhero .lead{margin-top:24px;font-size:18px;line-height:1.7;color:rgba(255,255,255,.74);max-width:660px;font-weight:300}
.subhero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
/* prose / content */
.section-pad{padding:84px 0}
.section-pad.alt{background:var(--cream);color:var(--ink)}
.prose{max-width:760px}
.prose.center{margin:0 auto;text-align:center}
.prose h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:18px}
.prose h2 em{color:var(--mint)}
.alt .prose h2 em{color:#0E8F62}
.prose h3{font-size:21px;font-weight:700;margin:34px 0 12px;letter-spacing:-.01em}
.prose p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.74);font-weight:300;margin-bottom:16px}
.alt .prose p{color:#46506B}
.prose p strong,.prose li strong{color:#fff;font-weight:600}
.alt .prose p strong,.alt .prose li strong{color:var(--navy)}
.prose ul{list-style:none;margin:18px 0}
.prose ul li{position:relative;padding:8px 0 8px 30px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.74);font-weight:300}
.alt .prose ul li{color:#46506B}
.prose ul li::before{content:'';position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:50%;background:rgba(111,227,180,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%236FE3B4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px}
.eyebrow.dark{color:#0E8F62}.eyebrow.dark::before{background:#0E8F62}
/* feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.feat{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px 28px;transition:transform .35s var(--ease),border-color .35s}
.feat:hover{transform:translateY(-5px);border-color:rgba(111,227,180,.4)}
.alt .feat{background:#fff;border:1px solid rgba(14,28,64,.08)}
.feat .ic{width:42px;height:42px;border-radius:12px;background:rgba(111,227,180,.14);display:grid;place-items:center;margin-bottom:18px}
.feat .ic svg{width:22px;height:22px;stroke:var(--mint);fill:none;stroke-width:1.8}
.alt .feat .ic{background:rgba(14,143,98,.1)}.alt .feat .ic svg{stroke:#0E8F62}
.feat h3{font-size:18px;font-weight:700;margin-bottom:9px}
.feat p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.66);font-weight:300}
.alt .feat p{color:#46506B}
/* number strip */
.numstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;margin-top:48px}
.numstrip .n{background:var(--navy-deep);padding:34px 26px}
.alt .numstrip{background:rgba(14,28,64,.12)}.alt .numstrip .n{background:var(--cream)}
.numstrip .big{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--mint)}
.alt .numstrip .big{color:#0E8F62}
.numstrip .lbl{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.6)}
.alt .numstrip .lbl{color:#46506B}
/* FAQ accordion */
.faq{max-width:820px;margin:46px auto 0}
.faq details{border:1px solid rgba(255,255,255,.12);border-radius:14px;margin-bottom:14px;background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .3s}
.alt .faq details{border-color:rgba(14,28,64,.1);background:#fff}
.faq details[open]{border-color:rgba(111,227,180,.4)}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:0 0 22px;width:22px;height:22px;position:relative;transition:transform .3s}
.faq summary .pl::before,.faq summary .pl::after{content:'';position:absolute;background:var(--mint);border-radius:2px;top:50%;left:50%}
.faq summary .pl::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.faq summary .pl::after{width:2px;height:13px;transform:translate(-50%,-50%);transition:transform .3s}
.faq details[open] summary .pl::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details[open] summary .pl{transform:rotate(180deg)}
.faq .ans{padding:0 26px 24px;font-size:15.5px;line-height:1.72;color:rgba(255,255,255,.72);font-weight:300}
.alt .faq .ans{color:#46506B}
.faq .ans p{margin-bottom:12px}
/* CTA band */
.ctaband{position:relative;overflow:hidden;background:radial-gradient(700px 360px at 50% 0%,rgba(111,227,180,.16),transparent 64%),#060B1C;padding:90px 0;text-align:center}
.ctaband h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.025em;max-width:760px;margin:0 auto 14px}
.ctaband h2 em{color:var(--mint)}
.ctaband p{color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 30px;font-size:16.5px;line-height:1.65;font-weight:300}
.ctaband .hero-ctas{justify-content:center}
/* two-col split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.alt-img .visual{order:-1}
.split .visual{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;background:linear-gradient(150deg,var(--navy-soft),#0E8F62);display:grid;place-items:center;position:relative}
.split .visual .ph-note{position:absolute;bottom:12px;right:12px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(0,0,0,.3);padding:4px 9px;border-radius:6px}
.split .visual .initial{font-family:'Instrument Serif',serif;font-style:italic;font-size:60px;color:rgba(255,255,255,.9)}
/* related links */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.rel-card{display:block;text-decoration:none;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px;transition:transform .3s var(--ease),border-color .3s}
.alt .rel-card{background:#fff;border-color:rgba(14,28,64,.08)}
.rel-card:hover{transform:translateY(-4px);border-color:rgba(111,227,180,.4)}
.rel-card h4{font-size:17px;font-weight:700;color:#fff;margin-bottom:8px}
.alt .rel-card h4{color:var(--navy)}
.rel-card p{font-size:14px;color:rgba(255,255,255,.62);font-weight:300;line-height:1.55}
.alt .rel-card p{color:#46506B}
.rel-card .arrow{margin-top:14px;color:var(--mint);font-size:14px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
@media(max-width:980px){
  .feat-grid,.related{grid-template-columns:1fr}
  .numstrip{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split.alt-img .visual{order:0}
}
/* ============ HIGHTECH CONTROL CENTER ============ */
.hubx{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1/1}
.hubx>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hubx-line{stroke:url(#hubGrad);stroke-width:1.4;fill:none}
.hubx-ring{transform-origin:230px 230px;animation:hubspin 60s linear infinite}
.hubx-ring.rev{animation-duration:42s;animation-direction:reverse}
@keyframes hubspin{to{transform:rotate(360deg)}}
.hubx-sweep{position:absolute;top:50%;left:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,rgba(111,227,180,.22),rgba(111,227,180,0) 32%);animation:hubspin 6s linear infinite;pointer-events:none;-webkit-mask:radial-gradient(circle,transparent 29%,#000 30%,#000 99%,transparent 100%);mask:radial-gradient(circle,transparent 29%,#000 30%,#000 99%,transparent 100%);z-index:1}
.hubx-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:26px;background:linear-gradient(160deg,rgba(22,42,74,.92),rgba(8,16,36,.95));border:1px solid rgba(111,227,180,.45);box-shadow:0 0 0 1px rgba(111,227,180,.10),0 0 55px rgba(111,227,180,.28),inset 0 0 26px rgba(111,227,180,.07);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;z-index:6}
.cc-tag{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.cc-num{font-family:'Sora',sans-serif;font-size:40px;font-weight:800;color:#fff;line-height:.85;display:flex;flex-direction:column;align-items:center}
.cc-num span{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.cc-bars{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:2px}
.cc-bars i{width:4px;height:6px;background:linear-gradient(180deg,var(--mint),rgba(111,227,180,.25));border-radius:2px;animation:ccbar 1.3s ease-in-out infinite}
.cc-bars i:nth-child(2){animation-delay:.15s}.cc-bars i:nth-child(3){animation-delay:.3s}.cc-bars i:nth-child(4){animation-delay:.45s}.cc-bars i:nth-child(5){animation-delay:.6s}
@keyframes ccbar{0%,100%{height:5px}50%{height:16px}}
.cc-live{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px}
.cc-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:ccpulse 1.6s ease-in-out infinite}
@keyframes ccpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hubx-node{position:absolute;transform:translate(-50%,-50%);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:7px;z-index:5;backdrop-filter:blur(6px);box-shadow:0 8px 22px rgba(0,0,0,.35);transition:border-color .3s,transform .3s,box-shadow .3s}
.hubx-node:hover{border-color:var(--mint);transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 24px rgba(111,227,180,.3)}
.nd-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 7px var(--mint);animation:ccpulse 2.2s ease-in-out infinite}
.hubx-node:nth-child(2n) .nd-dot{animation-delay:.7s}
@media(max-width:980px){.hubx{max-width:340px}.hubx-node{font-size:10.5px;padding:6px 10px}.hubx-core{width:118px;height:118px}.cc-num{font-size:30px}}
/* ============ DIENSTEN MEGA MENU ============ */
.nav-item{position:relative;display:flex;align-items:center}
.mega-trigger{display:flex;align-items:center;gap:6px}
.mega-trigger .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s}
.has-mega:hover .chev{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(16px);width:600px;max-width:88vw;background:rgba(8,16,34,.97);border:1px solid rgba(111,227,180,.20);border-radius:18px;padding:16px;box-shadow:0 34px 80px rgba(0,0,0,.55);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s;z-index:130}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px)}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;transition:background .2s}
.mega-item:hover{background:rgba(111,227,180,.09)}
.mega a::after{display:none!important}
.mega-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:rgba(111,227,180,.12);display:grid;place-items:center}
.mega-ic svg{width:17px;height:17px;stroke:var(--mint);fill:none;stroke-width:1.8}
.mega-tx{display:flex;flex-direction:column}
.mega-tx b{color:#fff;font-size:13.5px;font-weight:600;line-height:1.2}
.mega-tx small{color:rgba(255,255,255,.55);font-size:11.5px;margin-top:3px;line-height:1.3}
.mega-foot{display:inline-flex;align-items:center;gap:7px;margin:8px 4px 2px;padding:8px 8px;color:var(--mint);font-size:13px;font-weight:600}
@media(max-width:980px){
  .nav-item{display:block;width:100%}
  .mega{display:none!important}
  .mega-trigger{justify-content:flex-start}
  .mega-trigger .chev{display:none}
}
/* ============ COOKIE BANNER + LEGAL ============ */
.cookiebar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(720px,92vw);background:rgba(8,16,34,.97);border:1px solid rgba(111,227,180,.22);border-radius:16px;padding:16px 20px;box-shadow:0 24px 60px rgba(0,0,0,.5);backdrop-filter:blur(14px);z-index:200}
.cookiebar[hidden]{display:none}
.cookiebar-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cookiebar-inner p{margin:0;font-size:13.5px;color:rgba(255,255,255,.75);flex:1;min-width:220px}
.cookiebar-inner a{color:var(--mint)}
.cookiebar-btns{display:flex;gap:10px;flex-shrink:0}
.cookiebar-btns .btn{padding:10px 18px;font-size:13px}
.foot-legal{display:flex;gap:16px}
.foot-legal a{color:rgba(255,255,255,.55)}
.foot-legal a:hover{color:var(--mint)}
@media(max-width:600px){.cookiebar-inner{flex-direction:column;align-items:stretch}.cookiebar-btns{justify-content:flex-end}}
/* ============ COMPARISON TABLE ============ */
.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
.cmp thead th{color:var(--mint);font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.cmp td:first-child,.cmp th:first-child{font-weight:600;color:#fff}
.cmp tr.you{background:rgba(111,227,180,.08)}
.cmp tr.you td:first-child{color:var(--mint)}
.cmp tr.you td{border-color:rgba(111,227,180,.25)}
@media(max-width:680px){.cmp,.cmp tbody,.cmp th,.cmp td,.cmp tr{display:block}.cmp thead{display:none}.cmp td{border:none;padding:3px 0}.cmp tr{border-bottom:1px solid rgba(255,255,255,.12);padding:14px 0}.cmp td:first-child{font-size:16px;margin-bottom:6px}}
@media(max-width:980px){
.nav-links .has-mega .mega{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:2px 0 8px 6px!important;min-width:0!important;display:none!important}
.nav-links .has-mega.gg-open .mega{display:block!important}
.nav-links .mega-grid{display:flex!important;flex-direction:column!important;gap:0!important}
.nav-links .mega-item{padding:8px 8px!important;border-radius:8px}
.nav-links .mega-tx small{display:none}
.nav-links .mega-trigger .chev,.nav-links .has-mega>a svg{display:inline-block!important;transition:transform .3s}
.nav-links .has-mega.gg-open .mega-trigger .chev,.nav-links .has-mega.gg-open>a svg{transform:rotate(180deg)}
}

/* klantcase media */
.case-photo img{width:100%;height:100%;object-fit:cover;display:block}
.case-logo{height:42px;width:auto;display:block;margin-bottom:24px}
.case-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:44px}
.case-figs img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.alt .case-figs img{border-color:rgba(14,28,64,.1)}
@media(max-width:760px){.case-figs{grid-template-columns:1fr;gap:16px}.case-logo{height:34px}}

/* credit-link in de footer-onderbalk */
.foot-bottom a{color:rgba(255,255,255,.55);text-decoration:none}
.foot-bottom a:hover{color:var(--mint)}

/* klantlogo op licht vlak (voor donkere logos op de donkere hero) */
.case-logo-chip{display:inline-block;background:#fff;padding:13px 20px;border-radius:14px;margin-bottom:24px}
.case-logo-chip img{height:24px;width:auto;display:block}
@media(max-width:760px){.case-logo-chip{padding:10px 15px}.case-logo-chip img{height:19px}}

/* tabel in klantcases */
.case-table-wrap{overflow-x:auto;margin-top:38px}
.case-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.case-table th,.case-table td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09);white-space:nowrap}
.case-table th{font-weight:600;color:var(--mint);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.case-table td{color:rgba(255,255,255,.74);font-weight:300}
.case-table tbody tr:last-child td{border-bottom:none;font-weight:600;color:#fff}
.alt .case-table th{color:#0E8F62}
.alt .case-table td{color:#46506B}
.alt .case-table th,.alt .case-table td{border-color:rgba(14,28,64,.1)}
.alt .case-table tbody tr:last-child td{color:var(--navy)}
.case-figs img{aspect-ratio:1/1;object-fit:cover}

/* zesde kaart: word jij onze volgende case */
.case.case-cta{background:linear-gradient(160deg,#16264F,#070E22);border:1px solid rgba(111,227,180,.32);text-align:center}
.alt .case.case-cta{background:linear-gradient(160deg,#16264F,#070E22);border-color:rgba(111,227,180,.32)}
.case.case-cta:hover{transform:translateY(-8px);border-color:rgba(111,227,180,.6)}
.case-cta-inner{display:flex;flex-direction:column;align-items:center;height:100%;padding:40px 28px}
.case-cta-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.case-cta h3{font-size:23px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.015em;margin-bottom:12px}
.case-cta h3 em{color:var(--mint);font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.case-cta p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.66);font-weight:300;margin-bottom:24px}
.case-cta .btn{display:inline-flex;align-self:center;margin-top:8px}
/* Bij drie cases is de CTA de vierde tegel en zou hij smal alleen op rij twee
   staan. Dan de hele rij laten vullen. Bij vier cases is de CTA de vijfde
   tegel en valt deze regel vanzelf weg, dus terugzetten vraagt geen actie. */
.case-grid > .case-cta:nth-child(4){grid-column:1 / -1}

/* branded-shelf screenshots: brede banners, gestapeld en niet bijgesneden */
.case-shelves{display:flex;flex-direction:column;gap:20px;margin-top:26px;max-width:940px}
.case-shelves img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.alt .case-shelves img{border-color:rgba(14,28,64,.1)}

/* woord-suffix in een statkaart (mln, Mio.): kleiner dan een teken-suffix,
   anders breekt het getal over twee regels */
.stat .num .suffix.unit{font-size:.42em;letter-spacing:0}