/* ══════════════════════════════════════════════════════════════
   HERO · SGFX BULL SLIDER
   Ported from landing-page-4/index.html. Every rule is scoped to
   #top so it cannot collide with the .hero / .hx rules that other
   pages still rely on in styles.css and home.css.
   ══════════════════════════════════════════════════════════════ */

#top { padding: 0; }
#top > .wrap { max-width: 100%; padding: 0; margin: 0; }

#top .hero-panel {
  position: relative;
  overflow: hidden;
  background: radial-gradient(110% 130% at 86% 0%, #13265C, #081330 55%, #050B1C);
  color: #fff;
  padding: clamp(44px, 6vw, 84px) max(24px, calc((100% - 1200px) / 2 + 24px));
  min-height: calc(clamp(700px, 88vh, 1040px) + 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#top .hero-shapes {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 90% 12%, rgba(0, 255, 242, .14), transparent 60%),
    radial-gradient(36% 44% at 8% 100%, rgba(0, 194, 181, .12), transparent 60%);
}

#top .hero-bull {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 56%);
  mask-image: linear-gradient(90deg, transparent 5%, #000 56%);
  opacity: .92; pointer-events: none;
}

/* ── slides ────────────────────────────────────────────────── */
#top .slides-wrap { position: relative; z-index: 1; display: grid; }
#top .slides-wrap > .slide {
  grid-area: 1 / 1; max-width: 600px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1),
              visibility .6s;
  pointer-events: none;
}
#top .slide.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
#top .slide .eyebrow { margin-bottom: 18px; display: inline-flex; }
#top .slide h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem); color: #fff; line-height: 1.05;
  letter-spacing: -.03em; margin: 0 0 16px; text-wrap: balance;
}
#top .slide .hl { color: #00FFF2; }
#top .slide-lede {
  color: #9AA6C0; font-size: 1.0625rem; line-height: 1.6;
  max-width: 500px; margin-bottom: 28px; text-wrap: pretty;
}
#top .slide-cta { display: flex; flex-wrap: wrap; gap: 14px; }

#top .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: #00857B;
}
#top .eyebrow .bar { width: 22px; height: 3px; border-radius: 2px; background: #00FFF2; }
#top .eyebrow-light { color: #00FFF2; }

/* ── buttons (scoped so the global .btn-cyan is not disturbed) ─ */
#top .btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: .9375rem; padding: 12px 22px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, background .25s, color .25s;
}
#top .btn svg { width: 17px; height: 17px; }
#top .btn-lg { padding: 15px 28px; font-size: 1rem; }
#top .btn-cyan { background: #00FFF2; color: #06231F; box-shadow: 0 12px 30px -12px rgba(0, 255, 242, .5); }
#top .btn-cyan:hover { transform: translateY(-2px); background: #5cfff6; box-shadow: 0 18px 40px -12px rgba(0, 255, 242, .6); }
#top .btn-ghost-light { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #fff; }
#top .btn-ghost-light:hover { border-color: #00FFF2; color: #00FFF2; }

/* ── slider controls ───────────────────────────────────────── */
#top .slider-controls { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-top: 38px; }
#top .slider-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
#top .slider-arrow:hover { background: rgba(0, 194, 181, .12); border-color: #00FFF2; color: #00FFF2; }
#top .slider-arrow svg { width: 19px; height: 19px; }
#top .slider-dots { display: flex; align-items: center; gap: 10px; }
#top .slider-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); border: none; padding: 0; cursor: pointer;
  transition: background .24s, transform .24s, box-shadow .24s;
}
#top .slider-dot:hover { background: rgba(255, 255, 255, .45); }
#top .slider-dot.is-active { background: #00FFF2; transform: scale(1.35); box-shadow: 0 0 10px rgba(0, 255, 242, .6); }

/* Keyboard focus must stay visible on the dark panel */
#top .btn:focus-visible,
#top .slider-arrow:focus-visible,
#top .slider-dot:focus-visible { outline: 2px solid #00FFF2; outline-offset: 3px; }

@media (max-width: 600px) {
  #top .hero-bull {
    opacity: .4;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
    mask-image: linear-gradient(180deg, #000, transparent 72%);
  }
  /* The site nav is position:fixed (~73px). With min-height:auto the centred
     content would otherwise start at y=0 and hide the eyebrow behind it. */
  #top .hero-panel { padding: 104px 22px 44px; min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #top .slides-wrap > .slide { transition: opacity .25s; transform: none; }
}