/* NEXSPIRE — Hero v4 powered by Swiper.js v11.
 *
 * Battle-tested library used by Apple, Tesla, Microsoft. Handles fade transitions,
 * autoplay, accessibility, keyboard navigation and pagination out of the box.
 * Our job here is just to make slides look on-brand.
 *
 * Layout strategy:
 *   - .swiper-slide is a single grid cell with image, overlay and content all
 *     stacked using grid-template-areas: "stack". No absolute positioning hacks.
 *   - The image (.hero-slide__bg) is a sibling to the content pane, with a
 *     dedicated overlay (.hero-slide__overlay) layered between for contrast.
 *   - The content pane (.hero-slide__pane) is constrained to max 720px on
 *     desktop and uses fluid clamp() typography so it never overflows.
 */

/* ===== Swiper container ===== */
.hero--swiper {
  position: relative;
  isolation: isolate;
  background: #0b0d10;
}

.hero-swiper {
  width: 100%;
  min-height: clamp(580px, 82vh, 840px);
  height: clamp(580px, 82vh, 840px);
  position: relative;
}

.hero-swiper .swiper-wrapper {
  height: 100%;
}

/* ===== Slide ===== */
.hero-slide {
  display: grid !important;            /* override Swiper's flex */
  grid-template-areas: "stack";
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hero-slide > * { grid-area: stack; }

/* Image layer with subtle Ken Burns */
.hero-slide__bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  transform: scale(1.05);
  will-change: transform;
}
.swiper-slide-active .hero-slide__bg {
  animation: heroKenBurns 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1.13); }
}

/* Overlay — guarantees text contrast on ANY background image.
 * Two layered linear gradients only. NO radial gradients (those create
 * transparent hotspots exactly where text sits). */
.hero-slide__overlay {
  pointer-events: none;
  background:
    linear-gradient(95deg,
      rgba(11,13,16,.94) 0%,
      rgba(11,13,16,.88) 25%,
      rgba(11,13,16,.65) 50%,
      rgba(11,13,16,.35) 75%,
      rgba(11,13,16,.22) 100%),
    linear-gradient(180deg,
      rgba(11,13,16,.45) 0%,
      transparent 15%,
      transparent 80%,
      rgba(11,13,16,.65) 100%);
}

/* banking_core image (3D network nodes on pure black) is already dark — use
 * a much lighter overlay so the nodes remain visible on the right side, and
 * position the visible nodes to the right where they don't fight the text. */
.hero-slide[data-key="banking_core"] .hero-slide__bg {
  background-position: 75% 50%;
}
.hero-slide[data-key="banking_core"] .hero-slide__overlay {
  background:
    linear-gradient(95deg,
      rgba(11,13,16,.78) 0%,
      rgba(11,13,16,.55) 35%,
      rgba(11,13,16,.20) 65%,
      rgba(11,13,16,.05) 100%),
    linear-gradient(180deg,
      rgba(11,13,16,.40) 0%,
      transparent 18%,
      transparent 80%,
      rgba(11,13,16,.55) 100%);
}

/* Content layer */
.hero-slide__inner {
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(80px, 10vh, 120px) clamp(20px, 5vw, 60px) clamp(96px, 12vh, 140px);
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero-slide__pane {
  max-width: 720px;
  align-self: center;
}

/* ===== Eyebrow pill ===== */
.hero--swiper .hero__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5be3ff;
  background: rgba(46, 111, 247, 0.16);
  border: 1px solid rgba(91, 227, 255, 0.4);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 0 12px rgba(0, 184, 212, 0.3);
}

/* ===== Title — forced white. main.css/umbrella.css define .hero__title and
 *  .gradient-text* with their own colors that bleed in unless we !important. */
.hero--swiper .hero__title,
.hero--swiper .hero__title span:not(.hero__title-grad) {
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
.hero--swiper .hero__title {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.85);
  margin: 0 0 20px;
  max-width: 720px;
}
.hero--swiper .hero__title-grad {
  background: linear-gradient(135deg, #5be3ff 0%, #2E6FF7 55%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #5be3ff !important;             /* fallback if gradient fails */
  filter: drop-shadow(0 2px 12px rgba(46, 111, 247, 0.5));
  display: inline-block;
}

/* ===== Subtitle ===== */
.hero--swiper .hero__subtitle {
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
  max-width: 620px;
  margin: 0 0 28px;
  font-weight: 400;
}
.hero--swiper .hero__subtitle strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* ===== CTA buttons ===== */
.hero--swiper .hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero--swiper .hero__actions .btn {
  font-size: 0.9375rem;
  padding: 0.75rem 1.375rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.hero--swiper .hero__actions .btn--primary {
  background: linear-gradient(135deg, #2E6FF7, #00B8D4);
  color: #ffffff;
  border: 0;
  box-shadow: 0 14px 36px -12px rgba(46, 111, 247, 0.55);
}
.hero--swiper .hero__actions .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(46, 111, 247, 0.7);
}
.hero--swiper .hero__actions .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero--swiper .hero__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
.hero--swiper .hero__actions .btn--lg {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

/* ===== Pagination (Swiper bullets) ===== */
.hero-swiper__pagination.swiper-pagination {
  position: absolute;
  bottom: 32px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;
  display: inline-flex;
  gap: 8px;
  z-index: 5;
  padding: 9px 14px;
  background: rgba(11, 13, 16, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero-swiper__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition: all .25s ease;
}
.hero-swiper__pagination .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.75);
}
.hero-swiper__pagination .swiper-pagination-bullet-active {
  background: linear-gradient(135deg, #5be3ff, #2E6FF7);
  width: 28px;
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(91, 227, 255, 0.5);
}

/* ===== Progress bar (autoplay countdown) ===== */
.hero-swiper__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 4;
}
.hero-swiper__progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #5be3ff, #2E6FF7, #a78bfa);
  box-shadow: 0 0 12px rgba(91, 227, 255, 0.6);
  transform-origin: left center;
}

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .hero-swiper {
    min-height: clamp(560px, 78vh, 740px);
    height: clamp(560px, 78vh, 740px);
  }
  .hero--swiper .hero__title {
    font-size: clamp(1.875rem, 5vw, 3rem);
  }
}

/* ===== Mobile (≤768px) — vertical layout, stronger top-down dim ===== */
@media (max-width: 768px) {
  .hero-swiper {
    min-height: 88vh;
    height: 88vh;
  }
  .hero-slide__bg {
    background-position: 70% 30%;
  }
  .hero-slide__overlay {
    background:
      linear-gradient(180deg,
        rgba(11,13,16,.85) 0%,
        rgba(11,13,16,.55) 30%,
        rgba(11,13,16,.45) 55%,
        rgba(11,13,16,.92) 100%);
  }
  .hero-slide__inner {
    align-items: end;
    padding: 90px 20px 110px;
  }
  .hero-slide__pane { max-width: none; }

  .hero--swiper .hero__eyebrow {
    font-size: 0.6875rem;
    padding: 6px 11px;
    margin-bottom: 14px;
  }
  .hero--swiper .hero__title {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
    margin-bottom: 12px;
  }
  .hero--swiper .hero__subtitle {
    font-size: 0.9375rem;
    margin-bottom: 18px;
    max-width: none;
  }
  .hero--swiper .hero__actions { gap: 8px; }
  .hero--swiper .hero__actions .btn {
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
  }
  .hero--swiper .hero__actions .btn--lg {
    font-size: 0.9375rem;
    padding: 0.75rem 1.125rem;
  }

  .hero-swiper__pagination.swiper-pagination {
    bottom: 22px !important;
    gap: 6px;
    padding: 7px 11px;
  }
  .hero-swiper__pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }
  .hero-swiper__pagination .swiper-pagination-bullet-active {
    width: 22px;
  }
}

/* ===== Very small phones ===== */
@media (max-width: 480px) {
  .hero--swiper .hero__title {
    font-size: 1.5rem;
    line-height: 1.15;
  }
  .hero--swiper .hero__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero--swiper .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero--swiper .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Reduced motion — disable Ken Burns and progress animation ===== */
@media (prefers-reduced-motion: reduce) {
  .swiper-slide-active .hero-slide__bg { animation: none !important; transform: none !important; }
  .hero-swiper__progress > span { transition: none !important; }
}

/* Hero stays cinematic even though the rest of the site is light-mode-only */
[data-theme="light"] .hero--swiper { background: #0b0d10; }