/* ==========================================================================
   HERO.CSS — Hero, Overlay, Swiper, Hero Content, Badge, CTA, Trust Bar
   ========================================================================== */

.hero{
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background: linear-gradient(120deg, #071640 0%, #0E2E80 45%, #1656F5 100%);
}
.hero__slide{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.hero__bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35;
  mix-blend-mode: luminosity;
}
.hero__overlay{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(0,194,255,.35), transparent 55%),
              linear-gradient(120deg, rgba(7,22,64,.92), rgba(22,86,245,.75));
}

.hero__inner{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 40px;
  padding-block: 64px;
  width: 100%;
}

.hero__badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

.hero__title{ color: #fff; margin-bottom: 18px; }
.hero__title span{ color: var(--color-accent); }
.hero__desc{ color: rgba(255,255,255,.82); max-width: 520px; margin-bottom: 30px; line-height: 1.7; }
.hero__actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero__visual{ position: relative; display: flex; justify-content: center; }
.hero__visual img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero__speed-badge{
  position: absolute; top: 10%; right: 4%;
  background: rgba(11,17,32,.85);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: .75rem;
  backdrop-filter: blur(8px);
}
.hero__speed-badge strong{ display: block; font-size: 1.4rem; font-family: var(--font-heading); }

/* ---------- Swiper controls ---------- */
.hero__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.hero__nav:hover{ background: rgba(255,255,255,.28); }
.hero__nav--prev{ left: 24px; }
.hero__nav--next{ right: 24px; }

.hero__pagination{
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: 8px;
}
.hero__pagination button{
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: all var(--transition-fast);
}
.hero__pagination button.is-active{ width: 26px; border-radius: var(--radius-pill); background: #fff; }

/* ---------- Trust Bar ---------- */
.trust-bar{
  position: relative; z-index: 4;
  margin-top: -46px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 12px;
}
.trust-bar__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-bar__item{
  display: flex; align-items: center; gap: 14px;
  padding-inline: 16px;
  border-right: 1px solid var(--color-border);
}
.trust-bar__item:last-child{ border-right: none; }
.trust-bar__icon{
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  color: var(--color-primary);
}
.trust-bar__icon svg{ width: 22px; height: 22px; }
.trust-bar__title{ font-weight: 700; font-size: .95rem; }
.trust-bar__desc{ font-size: .8rem; color: var(--color-text-muted); }