/* ===========================================================================
   Netsecurity Hero — HubSpot custom module (CSS)
   Static file: NO HubL here. Dynamic values arrive via inline CSS vars /
   data-attributes set in module.html. Font: Montserrat only.
   All rules are scoped under .ns-hero so the module is drop-in safe.
   =========================================================================== */

.ns-hero {
  --ns-navy: #00345D;
  --ns-heading: #ffffff;
  --ns-accent: #00345D;
  --ns-body: #ffffff;
  --ns-btn-text: #00345D;
  /* StarBorder CTA — tweak these two to restyle the animated glow */
  --ns-cta-star: #6E93C2; /* glow color (fades to transparent) */
  --ns-cta-speed: 8s;     /* one sweep duration */

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ns-body);
  -webkit-font-smoothing: antialiased;
  /* Solid navy is always painted first — it is the fallback for every
     background type (incl. waves before/if WebGL loads). --ns-bg-image is
     only set when Background = Image. */
  background-color: var(--ns-navy);
  background-image:
    radial-gradient(1200px 700px at 18% -10%, rgba(90, 130, 180, 0.28), transparent 55%),
    var(--ns-bg-image, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

.ns-hero *,
.ns-hero *::before,
.ns-hero *::after { box-sizing: border-box; }

/* faint geometric facets — sits behind the wave canvas */
.ns-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, transparent 34%),
    linear-gradient(300deg, rgba(0, 0, 0, 0.22) 0%, transparent 40%);
  pointer-events: none;
}

/* animated GradientWaves layer (only present when Background = Animated waves) */
.ns-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ns-hero__bg canvas { display: block; width: 100%; height: 100%; }

.ns-hero__wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
}

.ns-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding-top: calc(96px + 3rem); /* base + 3rem extra headroom */
  padding-bottom: 80px;
}

/* ---------- COPY ---------- */
.ns-hero__heading {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: var(--ns-heading);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -1px;
}
.ns-hero__heading strong,
.ns-hero__heading b { font-weight: 700; color: var(--ns-accent); }

.ns-hero__lead {
  margin-top: 34px;
  max-width: 520px;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ns-body);
  font-weight: 400;
}
.ns-hero__lead p { margin: 0 0 12px; }
.ns-hero__lead p:last-child { margin-bottom: 0; }

/* StarBorder wrapper (ported from React Bits, vanilla). The <a> is the
   "container": it clips the glow to the pill and lifts on hover. The two star
   spans sweep glowing radial gradients along the top/bottom edges. The inner
   span is the visible white pill surface. */
.ns-hero__cta {
  position: relative;
  display: inline-block;
  margin-top: 44px;
  padding: 2px 0;           /* StarBorder "thickness": how much glow peeks out */
  border-radius: 30px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ns-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.6); }

.ns-hero__cta-star {
  position: absolute;
  width: 300%;
  height: 50%;
  opacity: 0.7;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--ns-cta-star, #008fff), transparent 10%);
  animation-duration: var(--ns-cta-speed, 4s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.ns-hero__cta-star--bottom { bottom: -11px; right: -250%; animation-name: ns-cta-star-bottom; }
.ns-hero__cta-star--top    { top: -11px;   left: -250%;  animation-name: ns-cta-star-top; }

.ns-hero__cta-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  color: var(--ns-btn-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 20px 34px;
  border-radius: 30px;
}
.ns-hero__cta-inner svg { transition: transform 0.2s ease; }
.ns-hero__cta:hover .ns-hero__cta-inner svg { transform: translate(2px, -2px); }

@keyframes ns-cta-star-bottom {
  0%   { transform: translate(0%, 0%);    opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}
@keyframes ns-cta-star-top {
  0%   { transform: translate(0%, 0%);   opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-hero__cta-star { animation: none; opacity: 0; }
}

/* ---------- IMAGE SLIDESHOW ---------- */
.ns-hero__media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ns-hero__slider {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 11 / 10;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .ns-hero__slider { height: 0; padding-bottom: 90.9%; }
}
.ns-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.ns-hero__slide.is-active { opacity: 1; }

.ns-hero__dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin-top: 22px;
}
.ns-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.ns-hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.ns-hero__dot.is-active { width: 28px; background: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .ns-hero__slide { transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .ns-hero__heading { font-size: 58px; }
}
@media (max-width: 820px) {
  .ns-hero__wrap { padding: 0 28px; }
  .ns-hero__grid {
    grid-template-columns: 1fr;
    padding-top: calc(56px + 3rem); /* base + 3rem to clear the floating nav */
  }
  .ns-hero__media { align-items: center; order: -1; margin-bottom: 24px; }
  .ns-hero__slider, .ns-hero__dots { max-width: 420px; }
  .ns-hero__heading { font-size: 46px; }
  .ns-hero__lead { font-size: 19px; }
}