/* Homepage hero: text left, half Bizzapt mark with tracing light right, connected network on the left.
   Fonts come from typography.css (Space Grotesk headings, Manrope body, DM Mono labels) and are not changed here. */
.net-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 560px; padding: 72px var(--gutter, clamp(20px, 5vw, 72px)) 84px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  background-color: #0d0c10; /* solid colour lets the navbar pick its dark logo */
  background-image: radial-gradient(70% 80% at 78% 45%, #1d1720 0%, #0d0c10 60%, #0a090c 100%);
  color: #f4f2f2;
}
.net-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.net-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 62% at 26% 50%, #0b0a0dcc 0%, #0b0a0d88 55%, transparent 100%);
}

/* Copy */
.net-hero-copy { position: relative; z-index: 2; max-width: 640px; }
.net-hero-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font: 500 .68rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #d8c6d1;
}
.net-hero-eyebrow::before { content: ""; flex: none; width: 34px; height: 1px; background: #c9a3bd; }
.connected-home .net-hero h1 {
  margin: 0; font-size: clamp(2.3rem, 4vw, 4.4rem); font-weight: 400; line-height: 1.12;
  letter-spacing: -.04em; color: #f4f2f2; text-wrap: balance;
}
.connected-home .net-hero h1 strong { display: block; font-weight: 500; color: #b893ad; margin-top: .06em; }
.net-hero-description {
  max-width: 540px; margin: 22px 0 0; font: 400 clamp(.95rem, 1.1vw, 1.04rem)/1.8 var(--sans);
  color: #c6bbc3; text-wrap: pretty;
}
.net-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.net-hero-actions a {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 14px 18px; min-height: 48px; font: 600 .72rem var(--sans);
  text-decoration: none; border-radius: 3px; transition: background .2s;
}
.net-hero-primary { background: #d1bdca; color: #2e242b; }
.net-hero-primary:hover { background: #e2d0dc; }
.net-hero-secondary { color: #e0d6dd; border: 1px solid #8d758880; }
.net-hero-secondary:hover { background: #ffffff08; }
.net-hero :is(a, button):focus-visible { outline: 2px solid #e3c6db; outline-offset: 4px; }
.net-hero-tags {
  display: flex; align-items: center; gap: 12px; margin-top: 34px;
  font: 400 .6rem var(--mono); letter-spacing: .36em; text-transform: uppercase; color: #a99aa4;
}
.net-hero-tags i { width: 5px; height: 5px; border-radius: 50%; background: #c9a3bd; }

/* Half mark, bleeding off the right edge */
.net-hero-visual {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(520px, 50vw, 860px); right: calc(clamp(520px, 50vw, 860px) * -.30);
  top: 50%; transform: translateY(-42%);
}
.net-hero-glow {
  position: absolute; left: 10%; top: -10%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #8a668055 0%, #6b8a9a22 40%, transparent 70%);
  filter: blur(10px); animation: net-hero-pulse 6s ease-in-out infinite;
}
.net-hero-mark { position: relative; display: block; width: 100%; overflow: visible; opacity: .7; animation: net-hero-float 9s ease-in-out infinite; }
.net-hero-mark .fill path { fill: url(#netHeroFill); stroke: #e7c9dc55; stroke-width: .8; }
.net-hero-mark .shine { mix-blend-mode: screen; }
.net-hero-mark .shine rect { animation: net-hero-shine 5.5s ease-in-out infinite; }
.net-hero-mark .run {
  fill: none; stroke: url(#netHeroRun); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 150 890; animation: net-hero-run 7s linear infinite; filter: drop-shadow(0 0 5px #e2bcd6);
}
.net-hero-mark .run.b { stroke: #a9c7d6; filter: drop-shadow(0 0 5px #9fbccb); animation-delay: -3.5s; }
.net-hero-mark .run.c { animation-delay: -1.8s; animation-duration: 9s; }
@keyframes net-hero-pulse { 0%, 100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes net-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes net-hero-shine { 0% { transform: translateX(-340px); } 55%, 100% { transform: translateX(340px); } }
@keyframes net-hero-run { to { stroke-dashoffset: -1040; } }

@media (max-width: 1100px) {
  .net-hero-tags { display: none; }
  .net-hero-visual { width: 560px; right: -200px; }
}
@media (max-width: 860px) {
  .net-hero { min-height: 0; padding: 56px 22px 210px; }
  .net-hero::after { background: radial-gradient(90% 55% at 40% 38%, #0b0a0dcc 0%, #0b0a0d77 60%, transparent 100%); }
  .net-hero-visual { width: 520px; right: -250px; top: auto; bottom: -40px; transform: none; }
  .net-hero-mark { opacity: .45; }
}
@media (max-width: 520px) {
  .net-hero-actions { flex-direction: column; align-items: stretch; }
  .connected-home .net-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .net-hero-visual { width: 400px; right: -170px; bottom: -50px; }
  .net-hero-mark { opacity: .4; }
}
.net-hero.is-offscreen *, .net-hero.is-offscreen::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .net-hero-glow, .net-hero-mark, .net-hero-mark .shine rect, .net-hero-mark .run { animation: none; }
}