.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);
}