/* Hero — Hero.png full-viewport landscape, copy anchored above mountain horizon */

.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  padding:0 clamp(20px,4vw,48px) 40vh;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  background-color:#010608;
  background-image:url("../Assets/Hero.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Skyline cognition lightning — upper sky only */
.hero-sky-lightning{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:58%;
  max-width:none !important;
  margin:0 !important;
  padding:0;
  border:0;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
  opacity:.62;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 78%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.55) 78%, transparent 100%);
}

.hero-sky-lightning svg{
  width:100%;
  height:100%;
  display:block;
}

.sky-bolt{
  fill:none;
  stroke:rgba(0,229,192,.34);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 10px rgba(0,229,192,.22));
  opacity:0;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:skyBoltPulse 8.4s ease-in-out infinite;
}

.sky-bolt-2{
  animation-delay:2.8s;
  animation-duration:9.1s;
}

.sky-bolt-3{
  animation-delay:5.6s;
  animation-duration:8.8s;
}

.sky-bolt-4{
  animation-delay:7.4s;
  animation-duration:9.4s;
}

@keyframes skyBoltPulse{
  0%,70%,100%{
    opacity:0;
    stroke-dashoffset:1;
  }
  74%{
    opacity:.06;
  }
  78%{
    opacity:.15;
    stroke-dashoffset:.35;
  }
  81%{
    opacity:.18;
    stroke-dashoffset:0;
  }
  86%{
    opacity:.07;
    stroke-dashoffset:0;
  }
  92%{
    opacity:0;
    stroke-dashoffset:1;
  }
}

/* Foreground memory network — lower terrain only */
.hero-network-field{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:45%;
  max-width:none !important;
  margin:0 !important;
  padding:0;
  border:0;
  display:block;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 14%, #000 28%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 14%, #000 28%, #000 100%);
}

/* CSS base mesh — visible even before JS */
.hero-network-field::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.55;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 78px,
      rgba(0,229,192,.04) 78px,
      rgba(0,229,192,.04) 79px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 52px,
      rgba(0,229,192,.035) 52px,
      rgba(0,229,192,.035) 53px
    ),
    linear-gradient(165deg, transparent 30%, rgba(0,229,192,.07) 48%, transparent 66%),
    linear-gradient(15deg, transparent 35%, rgba(0,229,192,.06) 50%, transparent 65%);
  transform:perspective(520px) rotateX(58deg) scale(1.15);
  transform-origin:50% 100%;
  animation:heroNetDrift 14s ease-in-out infinite;
}

@keyframes heroNetDrift{
  0%,100%{opacity:.45; transform:perspective(520px) rotateX(58deg) scale(1.15) translateY(0)}
  50%{opacity:.65; transform:perspective(520px) rotateX(58deg) scale(1.15) translateY(-3px)}
}

.hero-network-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.92;
}

.hero-network-line{
  stroke:rgba(0,215,180,.22);
  stroke-width:.65;
  vector-effect:non-scaling-stroke;
}

.hero-network-line--diag{
  stroke:rgba(0,200,168,.14);
  stroke-width:.5;
}

.hero-network-node{
  fill:rgba(0,229,192,.32);
  transform-box:fill-box;
  transform-origin:center;
  animation:heroNodePulse 5.5s ease-in-out infinite;
}

@keyframes heroNodePulse{
  0%,100%{fill:rgba(0,229,192,.2); transform:scale(.8)}
  50%{fill:rgba(180,255,245,.6); transform:scale(1.35)}
}

.hero-network-signal{
  stroke:rgba(180,255,245,.75);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:42 420;
  stroke-dashoffset:420;
  opacity:0;
  animation:heroSignalTravel 5.2s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(0,229,192,.45));
}

@keyframes heroSignalTravel{
  0%{stroke-dashoffset:420; opacity:0}
  12%{opacity:.85}
  55%{stroke-dashoffset:60; opacity:.95}
  88%{opacity:.5}
  100%{stroke-dashoffset:0; opacity:0}
}

.hero-network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.55;
  pointer-events:none;
}

/* Readability gradient above network */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  display:block;
  background:linear-gradient(
    180deg,
    rgba(0,4,8,.36) 0%,
    transparent 28%,
    transparent 52%,
    rgba(0,8,12,.06) 58%,
    rgba(0,10,14,.18) 72%,
    rgba(0,6,10,.32) 100%
  );
}

.hero::after{
  display:none !important;
}

.hero > *:not(.hero-network-field):not(.hero-sky-lightning){
  position:relative;
  z-index:5;
  max-width:min(940px,100%);
}

.hero > .hero-copy-stack{
  max-width:min(940px,100%);
}

.hero-eyebrow{
  margin:0 0 clamp(10px,1.6vh,18px);
  font-size:clamp(10px,.82vw,12px);
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(0,229,192,.86);
  text-shadow:0 0 18px rgba(0,229,192,.2);
  opacity:0;
}

.hero-intro .hero-eyebrow{
  animation:heroEyebrowIn .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.15s;
}

@keyframes heroEyebrowIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

.hero-copy-stack{
  position:relative;
  width:100%;
  max-width:min(940px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  margin:0;
  padding:0;
}

.hero-copy-stack .hero-sub{
  position:relative;
  z-index:0;
  order:1;
  margin:0 0 clamp(10px,1.4vh,16px);
  max-width:min(54ch,100%);
  color:rgba(168,194,208,.52);
  font-size:clamp(13px,1.05vw,16px);
  font-weight:500;
  line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.65);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

.hero-headline{
  position:relative;
  z-index:1;
  order:2;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(2px,.4vh,8px);
}

.hero-line{
  display:block;
  width:100%;
  margin:0;
  font-size:clamp(34px,4.55vw,68px);
  font-weight:850;
  line-height:1.03;
  letter-spacing:-.055em;
}

.hero-line--platform{
  color:rgba(248,252,255,.22);
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}

.hero-line--memory{
  position:relative;
  display:block;
  min-height:1.05em;
}

.hero-memory-wrap{
  position:relative;
  display:inline-block;
}

.hero-memory-dim{
  display:block;
  color:rgba(248,252,255,.18);
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}

.hero-memory-lit{
  position:absolute;
  left:0;
  top:0;
  color:#f8fcff;
  text-shadow:0 2px 26px rgba(0,0,0,.65), 0 0 40px rgba(0,0,0,.18);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.35) 50%, transparent 52%);
  mask-image:linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.35) 50%, transparent 52%);
  -webkit-mask-size:280% 100%;
  mask-size:280% 100%;
  -webkit-mask-position:100% 0;
  mask-position:100% 0;
  will-change:-webkit-mask-position, mask-position;
}

.hero-period{
  display:inline-block;
  color:#00e5c0;
  opacity:0;
  margin-left:.05em;
  vertical-align:baseline;
  font-weight:850;
}

/* Headline reveal — inscription in light */
.hero-intro .hero-line--platform{
  animation:heroPlatformReveal 1.2s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.45s;
}

@keyframes heroPlatformReveal{
  from{color:rgba(248,252,255,.22)}
  to{color:#f8fcff}
}

.hero-intro .hero-memory-lit{
  animation:heroMemoryMaskReveal 2.15s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:1.35s;
}

@keyframes heroMemoryMaskReveal{
  from{
    -webkit-mask-position:100% 0;
    mask-position:100% 0;
  }
  to{
    -webkit-mask-position:0% 0;
    mask-position:0% 0;
  }
}

.hero-intro .hero-period{
  animation:heroPeriodIlluminate 1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:3.65s;
}

@keyframes heroPeriodIlluminate{
  0%{
    opacity:0;
    filter:brightness(.45);
    text-shadow:none;
  }
  100%{
    opacity:1;
    filter:none;
    text-shadow:
      0 0 10px rgba(0,229,192,.95),
      0 0 22px rgba(0,229,192,.62),
      0 0 44px rgba(0,229,192,.28);
  }
}

.hero-intro .hero-copy-stack .hero-sub{
  animation:heroSubReveal 1.05s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:4.2s;
}

@keyframes heroSubReveal{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

/* Fixed above beam-nav scroll tool */
@media (min-width:1024px){
  body.system-mode .hero-cta-row{
    position:fixed;
    left:50%;
    bottom:calc(clamp(24px,4vh,40px) + 144px);
    transform:translateX(-50%);
    z-index:39;
    max-width:min(640px,calc(100vw - 48px));
    padding:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease;
  }

  body.system-mode:not(.section-hero-active) .hero-cta-row{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .1s ease, visibility 0s linear .1s;
  }

  body.system-mode.section-hero-active .hero-cta-row{
    visibility:visible;
    pointer-events:auto;
    transition:opacity .35s ease, visibility 0s;
  }
}

.hero-intro .hero-cta-row,
body.hero-intro .hero-cta-row{
  animation:heroCtaReveal .95s ease forwards;
  animation-delay:5.15s;
}

body.system-mode.section-hero-active.hero-intro .hero-cta-row,
body.system-mode.section-hero-active.hero-ui-static .hero-cta-row{
  opacity:1;
}

@keyframes heroCtaReveal{
  from{opacity:0}
  to{opacity:1}
}

.hero-cta-row .btn{
  transition:box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.hero-cta-row .btn:hover,
.hero-cta-row .btn:focus-visible{
  transform:none;
}

.hero.is-static .hero-eyebrow,
.hero.is-static .hero-line--platform,
.hero.is-static .hero-sub{
  opacity:1;
  transform:none;
  animation:none;
}

body.hero-ui-static .hero-cta-row{
  opacity:1;
  animation:none;
}

.hero.is-static .hero-line--platform{color:#f8fcff}

.hero.is-static .hero-memory-lit{
  position:static;
  -webkit-mask-image:none;
  mask-image:none;
}

.hero.is-static .hero-memory-dim{display:none}

.hero.is-static .hero-period{
  opacity:1;
  text-shadow:
    0 0 8px rgba(0,229,192,.88),
    0 0 20px rgba(0,229,192,.52),
    0 0 40px rgba(0,229,192,.22);
}

@media (prefers-reduced-motion:reduce){
  .sky-bolt{
    animation:none !important;
    opacity:0 !important;
  }

  .hero-network-field::before{
    animation:none;
    opacity:.5;
  }

  .hero-network-signal,
  .hero-network-node{
    animation:none !important;
  }

  .hero-network-signal{
    opacity:.35;
    stroke-dashoffset:200;
  }

  .hero-intro .hero-eyebrow,
  .hero-intro .hero-line--platform,
  .hero-intro .hero-memory-lit,
  .hero-intro .hero-period,
  .hero-intro .hero-sub,
  body.hero-intro .hero-cta-row{
    animation:none !important;
    opacity:1 !important;
    transform:translateX(-50%) !important;
  }

  .hero-intro .hero-line--platform{color:#f8fcff}
  .hero-intro .hero-memory-lit{
    -webkit-mask-image:none;
    mask-image:none;
    position:static;
  }
  .hero-intro .hero-memory-dim{display:none}
  .hero-intro .hero-period{
    text-shadow:0 0 10px rgba(0,229,192,.75);
  }
}

/* Override horizontal system-mode section centering */
body.system-mode .system-track > section.hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:0 clamp(20px,4vw,48px) 40vh !important;
  overflow:hidden !important;
  background-color:#010608 !important;
  background-image:url("../Assets/Hero.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

body.system-mode .system-track > section.hero .hero-sky-lightning{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  height:58% !important;
  z-index:2 !important;
  max-width:none !important;
  display:block !important;
}

body.system-mode .system-track > section.hero .hero-network-field{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  height:45% !important;
  z-index:3 !important;
  max-width:none !important;
  display:block !important;
}

body.system-mode .system-track > section.hero::before{
  z-index:4 !important;
  display:block !important;
}

body.system-mode .system-track > section.hero > *:not(.hero-network-field):not(.hero-sky-lightning){
  position:relative !important;
  z-index:5 !important;
  opacity:unset;
  transform:unset;
  filter:unset;
  transition:none !important;
}

body.system-mode .hero .hero-sub{
  text-align:center;
}

@media (max-width:1023px){
  .hero-cta-row{
    position:fixed;
    left:50%;
    bottom:114px;
    transform:translateX(-50%);
    z-index:39;
    flex-direction:column;
    max-width:min(300px,calc(100vw - 32px));
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .hero-cta-row .btn{width:100%}
}

@media (max-width:760px){
  .hero{
    height:100svh;
    min-height:100svh;
    padding:0 16px 36vh;
  }

  .hero-line{font-size:clamp(26px,7vw,36px)}
  .hero-eyebrow{letter-spacing:.18em; font-size:9px}
  .hero-sub{font-size:14px}

  body.system-mode .system-track > section.hero{
    padding:0 16px 36vh !important;
  }
}