/* —— Landing page structure: clear section bands —— */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
#product,
#products,
#product-web,
#product-network,
#product-iot,
#product-mobile,
#product-ai,
#product-mlsecops,
#why,
#how,
#need,
#video,
#proof,
#compare,
#faq,
#demo,
.section-block[id],
.deck-band[id] {
  scroll-margin-top: 84px;
}

main {
  position: relative;
  z-index: 1;
  display: block;
}

/* Kill “everything floats in one void” */
.section-block,
.hero,
.metrics-band,
.deck-band {
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.section-block {
  padding: clamp(3.75rem, 7vw, 5.5rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--bg);
}

/* Alternating bands so each block reads as its own page chunk */
.section-block.band-a,
.metrics-band.band-a {
  background: #0b0e14;
}
.section-block.band-b,
.deck-band.band-b {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 28%),
    #0e1219;
}
.section-block.band-c {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59,130,246,0.07), transparent 55%),
    #0a0d13;
}
.section-block.band-demo {
  background:
    linear-gradient(180deg, rgba(59,130,246,0.08), transparent 40%),
    #0c1018;
  border-top: 1px solid rgba(59,130,246,0.18);
}

/* Remove thin fake dividers / active washes that merge sections */
.section-block::before,
.section-block::after,
.section-block.is-active::after {
  content: none !important;
  display: none !important;
}

.hero {
  min-height: auto;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(ellipse 70% 55% at 70% 20%, rgba(59,130,246,0.14), transparent 55%),
    #0b0e14;
}

.metrics-band {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: #0e1219;
}
.metrics-band .metrics {
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(17, 21, 30, 0.9);
  box-shadow: none;
  backdrop-filter: none;
}

.deck-band {
  padding: clamp(3.75rem, 7vw, 5.5rem) 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.deck-band .deck {
  margin-bottom: 0;
}

.section-block .wrap,
.deck-band .wrap,
.metrics-band .wrap {
  position: relative;
  z-index: 2;
}

.section-block .section-head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  max-width: 42rem;
}
.section-block .section-head.center,
.section-block .section-head {
  margin-inline: auto;
  text-align: center;
}
.section-block .section-head p {
  margin-inline: auto;
}

/* Content stays put — no fade-away on scroll */
.hero-layout {
  opacity: 1 !important;
  transform: none !important;
}

/* Calmer reveals: once in, stay; lighter motion */
.reveal {
  opacity: 0;
  filter: none;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}
.reveal[data-fx="left"],
.reveal[data-fx="right"],
.reveal[data-fx="zoom"] {
  transform: translateY(16px);
}
.reveal[data-fx="left"].in,
.reveal[data-fx="right"].in,
.reveal[data-fx="zoom"].in {
  transform: none;
}

footer {
  position: relative;
  z-index: 1;
  background: #080a0f;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Soften noisy ambient so bands read clearly */
.fx-canvas { opacity: 0.12; }
.sky-scan { opacity: 0.2; }
.cursor-glow { display: none; }

@media (max-width: 980px) {
  .section-block,
  .deck-band {
    padding: 3rem 0;
  }
}