.symbiont-new-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:hsl(var(--background));}.symbiont-new-hero .hero-container{position:relative;z-index:10;width:100%;max-width:1400px;margin:0 auto;padding:8rem 1.5rem}.symbiont-new-hero .hero-grid{display:grid;gap:4rem;align-items:center}.symbiont-new-hero .hero-copy{text-align:left}.symbiont-new-hero .hero-pill{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2.5rem;padding:.4rem .9rem;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--background)/.6);backdrop-filter:blur(10px);font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:hsl(var(--muted-foreground))}.symbiont-new-hero .hero-title{font-family:DM Sans,system-ui,sans-serif;font-size:clamp(3rem,7vw,5.5rem);font-weight:700;line-height:1.02;letter-spacing:-.04em;color:hsl(var(--foreground))}.symbiont-new-hero .hero-title span{background:linear-gradient(to right,hsl(var(--accent)),hsl(var(--accent)/.6));-webkit-background-clip:text;background-clip:text;color:transparent}.symbiont-new-hero .hero-text{margin-top:2rem;font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.75;color:hsl(var(--muted-foreground));max-width:34rem}.symbiont-new-hero .hero-actions{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap}.symbiont-new-hero .hero-btn{display:inline-flex;align-items:center;justify-content:center;height:3.5rem;padding:0 2rem;border-radius:999px;font-weight:600;text-decoration:none;transition:.2s ease}.symbiont-new-hero .hero-btn-primary{background:hsl(var(--accent));color:hsl(var(--accent-foreground));box-shadow:0 18px 40px hsl(220 70% 50%/.22)}.symbiont-new-hero .hero-btn-primary:hover{transform:translateY(-2px)}.symbiont-new-hero .hero-btn-outline{border:1px solid hsl(var(--border));background:hsl(var(--background)/.65);color:hsl(var(--foreground));backdrop-filter:blur(10px)}.symbiont-new-hero .hero-visual-wrap{position:relative;display:flex;align-items:center;justify-content:center}.symbiont-new-hero .hero-visual-box{position:relative;width:100%;max-width:480px;aspect-ratio:1/1;margin:0 auto}.symbiont-new-hero .hero-orb{position:absolute;bottom:8%;right:6%;width:380px;height:380px;border-radius:999px;background:linear-gradient(to top right,hsl(220 90% 70%/.14),transparent);filter:blur(64px)}.hero-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero-aurora:before{content:"";position:absolute;inset:-20%;background:radial-gradient(50% 45% at 75% 75%,hsl(220 90% 70%/.28),transparent 65%),radial-gradient(40% 40% at 30% 90%,hsl(190 90% 70%/.20),transparent 65%),radial-gradient(35% 35% at 85% 95%,hsl(220 80% 75%/.18),transparent 65%);filter:blur(60px);animation:aurora-drift 22s ease-in-out infinite alternate;will-change:transform,opacity}.hero-aurora:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,hsl(var(--background)) 0%,hsl(var(--background)/.85) 25%,hsl(var(--background)/0) 60%,hsl(var(--background)/.6) 100%)}.hero-noise{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none}.hero-constellation{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}.hero-constellation svg{width:100%;height:100%;display:block}.bg-link{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cn-draw 3.2s ease-out forwards,cn-link-pulse 9s ease-in-out 3.2s infinite}.bg-node{opacity:0;transform-origin:center;transform-box:fill-box;filter:drop-shadow(0 0 5px hsl(220 90% 60%/.5));animation:cn-pop .6s ease-out forwards,cn-breath 6s ease-in-out infinite}.cn-shield-trace{stroke-dasharray:45 195;stroke-dashoffset:0;filter:drop-shadow(0 4px 12px hsl(220 90% 55%/.25));animation:cn-shield-trace 12s linear infinite}@keyframes aurora-drift{0%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:.9}50%{transform:translate3d(-3%,2%,0) scale(1.1) rotate(8deg);opacity:1}100%{transform:translate3d(3%,-2%,0) scale(1.05) rotate(-6deg);opacity:.85}}@keyframes orb-float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(20px,-30px,0) scale(1.08)}}.orb-float-slower{animation:orb-float 20s ease-in-out infinite reverse}@keyframes cn-draw{to{stroke-dashoffset:0}}@keyframes cn-link-pulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes cn-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}@keyframes cn-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes cn-shield-trace{to{stroke-dashoffset:-240}}@media (min-width:1024px){.symbiont-new-hero .hero-grid{grid-template-columns:7fr 5fr;gap:3rem}}@media (max-width:767px){.symbiont-new-hero .hero-container{padding-top:7rem;padding-bottom:5rem}.symbiont-new-hero .hero-pill{font-size:.62rem;letter-spacing:.12em}.symbiont-new-hero .hero-actions{flex-direction:column}.symbiont-new-hero .hero-btn{width:100%}.symbiont-new-hero .hero-visual-wrap{display:none}}


/* Fix: keep the network animation away from the title and center the shield more to the right */
.symbiont-new-hero .hero-copy{position:relative;z-index:20;}
.symbiont-new-hero .hero-copy:before{content:"";position:absolute;z-index:-1;inset:-2rem -3rem -2rem -2rem;background:radial-gradient(ellipse 85% 70% at 35% 45%,hsl(var(--background)) 0%,hsl(var(--background)/.96) 45%,hsl(var(--background)/.72) 68%,hsl(var(--background)/0) 100%);pointer-events:none;}
.symbiont-new-hero .hero-title,.symbiont-new-hero .hero-text,.symbiont-new-hero .hero-actions,.symbiont-new-hero .hero-pill{position:relative;z-index:2;}
.symbiont-new-hero .hero-visual-wrap{min-height:520px;justify-content:flex-end;}
.symbiont-new-hero .hero-visual-box{max-width:540px;transform:translateX(1.5rem);}
@media (max-width:1200px){.symbiont-new-hero .hero-visual-box{transform:translateX(0);}}

/* V3 fix: de lijn door de titel is uit de SVG gehaald. Het losse icoon is verborgen, zodat het zichtbare icoon exact op het knooppunt zit. */
.symbiont-new-hero .hero-visual-wrap{display:none!important;}
.symbiont-new-hero .bg-shield{filter:drop-shadow(0 22px 50px hsl(220 70% 50% / .16));}

/* V4: hard fix. Removed the two top-left SVG lines that crossed the title. The visual duplicate stays hidden. */
.symbiont-new-hero .hero-title{isolation:isolate;}
.symbiont-new-hero .hero-title span{position:relative;z-index:3;}
.symbiont-new-hero .bg-shield{transform-box:fill-box;transform-origin:center;}

/* V5: kleur van titel normaal terug, extra lijnen rechtsboven en subtiele hover op tweede knop */
.symbiont-new-hero .hero-title span{
  background:linear-gradient(to right,hsl(var(--accent)),hsl(220 90% 68%));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none!important;
}
.symbiont-new-hero .bg-link-soft{
  stroke-opacity:.75;
}
.symbiont-new-hero .hero-btn-outline{
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px hsl(220 30% 20% / .04);
}
.symbiont-new-hero .hero-btn-outline:after{
  content:"→";
  opacity:0;
  margin-left:.35rem;
  transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.symbiont-new-hero .hero-btn-outline:hover{
  transform:translateY(-1px);
  border-color:hsl(220 70% 50% / .28);
  background:hsl(var(--background) / .9);
  box-shadow:0 14px 34px hsl(220 40% 20% / .07);
}
.symbiont-new-hero .hero-btn-outline:hover:after{
  opacity:1;
  transform:translateX(0);
}


/* V7: meer één geheel, betere spacing, Poppins en grotere centrale shield */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
.symbiont-new-hero{
  font-family:Poppins,Inter,system-ui,sans-serif;
  min-height:calc(100vh - 0px);
}
.symbiont-new-hero .hero-container{
  max-width:1500px;
  padding-left:clamp(3rem,7vw,7rem);
  padding-right:clamp(2rem,5vw,5rem);
  padding-top:7.5rem;
  padding-bottom:6.5rem;
}
.symbiont-new-hero .hero-grid{
  min-height:620px;
  display:grid;
  align-items:center;
}
@media (min-width:1024px){
  .symbiont-new-hero .hero-grid{
    grid-template-columns:minmax(560px,.82fr) minmax(520px,1fr);
    gap:2rem;
  }
}
.symbiont-new-hero .hero-copy{
  transform:translateX(clamp(.75rem,2vw,2.25rem));
  max-width:660px;
}
.symbiont-new-hero .hero-copy:before{
  inset:-3.5rem -6rem -3.5rem -3.5rem;
  background:radial-gradient(ellipse 75% 70% at 32% 45%,hsl(var(--background)) 0%,hsl(var(--background)/.97) 42%,hsl(var(--background)/.72) 65%,hsl(var(--background)/0) 100%);
}
.symbiont-new-hero .hero-pill{
  margin-bottom:2.1rem;
  font-family:Poppins,Inter,system-ui,sans-serif;
  font-weight:500;
}
.symbiont-new-hero .hero-title{
  font-family:Poppins,Inter,system-ui,sans-serif;
  font-size:clamp(4.25rem,7.2vw,6.75rem);
  line-height:.97;
  letter-spacing:-.065em;
  font-weight:800;
}
.symbiont-new-hero .hero-title span{
  display:inline-block;
  background:linear-gradient(90deg,hsl(220 84% 54%) 0%,hsl(220 83% 66%) 65%,hsl(220 78% 72%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 18px 22px hsl(220 90% 60% / .16));
}
.symbiont-new-hero .hero-text{
  margin-top:2.05rem;
  max-width:38rem;
  font-size:clamp(1.05rem,1.28vw,1.25rem);
  line-height:1.85;
  letter-spacing:-.01em;
}
.symbiont-new-hero .hero-actions{
  margin-top:2.45rem;
}
.symbiont-new-hero .hero-btn{
  height:3.7rem;
  padding:0 2.15rem;
  font-family:Poppins,Inter,system-ui,sans-serif;
  font-weight:600;
}
.symbiont-new-hero .bg-shield circle:first-child{
  filter:drop-shadow(0 24px 55px hsl(220 70% 45% / .16));
}
@media (max-width:900px){
  .symbiont-new-hero .hero-container{padding-left:1.5rem;padding-right:1.5rem;}
  .symbiont-new-hero .hero-copy{transform:none;}
  .symbiont-new-hero .hero-title{font-size:clamp(3.25rem,14vw,5rem);}
}


/* V8: compactere buttons naast elkaar, betere hover en geen afkapping bij de g */
.symbiont-new-hero .hero-title{
  line-height:1.04;
  padding-bottom:.08em;
  overflow:visible;
}
.symbiont-new-hero .hero-title span{
  line-height:1.08;
  padding-bottom:.05em;
  margin-bottom:-.05em;
  overflow:visible;
}
.symbiont-new-hero .hero-actions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:.8rem;
  max-width:100%;
}
.symbiont-new-hero .hero-btn{
  height:3.25rem;
  padding:0 1.55rem;
  font-size:.94rem;
  white-space:nowrap;
  min-width:0;
}
.symbiont-new-hero .hero-btn-primary{
  position:relative;
  overflow:hidden;
  box-shadow:0 15px 34px hsl(220 70% 50%/.20);
}
.symbiont-new-hero .hero-btn-primary:after{
  content:"→";
  opacity:0;
  margin-left:.35rem;
  transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.symbiont-new-hero .hero-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 38px hsl(220 70% 50%/.25);
  background:hsl(220 75% 52%);
}
.symbiont-new-hero .hero-btn-primary:hover:after{
  opacity:1;
  transform:translateX(0);
}
.symbiont-new-hero .hero-btn-outline{
  padding-left:1.45rem;
  padding-right:1.45rem;
}
@media (max-width:640px){
  .symbiont-new-hero .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .symbiont-new-hero .hero-btn{
    width:100%;
  }
}


/* V9: titel altijd in 2 regels met betere verspringing */
.symbiont-new-hero .hero-copy{
  max-width:760px;
}
.symbiont-new-hero .hero-title{
  display:block;
  font-size:clamp(4.15rem,6.15vw,6.15rem);
  line-height:.98;
  letter-spacing:-.07em;
  max-width:780px;
  padding-bottom:.12em;
}
.symbiont-new-hero .hero-title .hero-line{
  display:block;
  white-space:nowrap;
  overflow:visible;
}
.symbiont-new-hero .hero-title .hero-line-main{
  color:hsl(var(--foreground));
}
.symbiont-new-hero .hero-title .hero-line-accent{
  margin-top:.04em;
  padding-bottom:.08em;
  background:linear-gradient(90deg,hsl(220 84% 54%) 0%,hsl(220 83% 66%) 64%,hsl(220 78% 72%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 16px 20px hsl(220 90% 60% / .14));
}
@media (min-width:1024px){
  .symbiont-new-hero .hero-grid{
    grid-template-columns:minmax(660px,.9fr) minmax(520px,1fr);
    gap:1.5rem;
  }
}
@media (max-width:1180px){
  .symbiont-new-hero .hero-title{
    font-size:clamp(3.75rem,5.8vw,5.35rem);
  }
  .symbiont-new-hero .hero-copy{
    max-width:700px;
  }
}
@media (max-width:900px){
  .symbiont-new-hero .hero-title{
    font-size:clamp(3.1rem,11vw,4.5rem);
  }
  .symbiont-new-hero .hero-title .hero-line{
    white-space:normal;
  }
}


/* V10: primary button gebruikt alleen hover-pijltje, titel iets groter maar blijft 2 regels */
.symbiont-new-hero .hero-btn-primary{
  gap:0;
}
.symbiont-new-hero .hero-btn-primary:after{
  content:"→";
  display:inline-block;
  opacity:0;
  width:0;
  margin-left:0;
  transform:translateX(-6px);
  transition:opacity .18s ease, transform .18s ease, width .18s ease, margin-left .18s ease;
}
.symbiont-new-hero .hero-btn-primary:hover:after{
  opacity:1;
  width:.9em;
  margin-left:.38rem;
  transform:translateX(0);
}
.symbiont-new-hero .hero-title{
  font-size:clamp(4.35rem,6.55vw,6.55rem);
  max-width:840px;
}
.symbiont-new-hero .hero-copy{
  max-width:820px;
}
@media (min-width:1024px){
  .symbiont-new-hero .hero-grid{
    grid-template-columns:minmax(720px,.95fr) minmax(500px,1fr);
    gap:1.25rem;
  }
}
@media (max-width:1280px){
  .symbiont-new-hero .hero-title{
    font-size:clamp(4rem,6.05vw,5.95rem);
  }
  .symbiont-new-hero .hero-grid{
    grid-template-columns:minmax(660px,.92fr) minmax(460px,1fr);
  }
}
@media (max-width:900px){
  .symbiont-new-hero .hero-title{
    font-size:clamp(3.15rem,11vw,4.65rem);
  }
}


/* V11: ruimte voor het hover-pijltje staat er altijd al, zodat de blauwe button niet groter wordt op hover */
.symbiont-new-hero .hero-btn-primary{
  gap:.38rem;
  padding-right:1.45rem;
}
.symbiont-new-hero .hero-btn-primary:after{
  content:"→";
  display:inline-block;
  width:.9em;
  min-width:.9em;
  margin-left:0;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .18s ease, transform .18s ease;
}
.symbiont-new-hero .hero-btn-primary:hover:after{
  width:.9em;
  min-width:.9em;
  margin-left:0;
  opacity:1;
  transform:translateX(0);
}
.symbiont-new-hero .hero-btn-primary:hover{
  transform:translateY(-1px);
}


/* V12: schild lijn loopt weer netjes oneindig door op het grotere schild */
.symbiont-new-hero .cn-shield-trace{
  stroke-dasharray:18 82!important;
  stroke-dashoffset:0;
  animation:cn-shield-trace-v12 6.8s linear infinite!important;
}
@keyframes cn-shield-trace-v12{
  to{stroke-dashoffset:-100;}
}