/* ============================================================
   PASSPORT GATEWAY — Hero Section + Scroll Indicator + Trust Row
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  color: var(--color-text-on-dark);
  background-color: var(--color-navy-deep);
  background-image:
    /* Vesica piscis pattern — fixed-attached so it stays continuous through the page */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A24A' stroke-width='1.5' opacity='0.7'><circle cx='0' cy='70' r='70'/><circle cx='70' cy='0' r='70'/><circle cx='140' cy='70' r='70'/><circle cx='70' cy='140' r='70'/><circle cx='70' cy='70' r='70'/></g></svg>"),
    /* Radial gold accent top-right */
    radial-gradient(1100px 600px at 85% -10%, rgba(201, 162, 74, 0.22), transparent 60%);
  background-size: 140px 140px, auto;
  background-position: top left, center;
  background-attachment: fixed, scroll;
  background-blend-mode: soft-light, normal;
  /* v1.1: add hero photo as a 5th background-image layer with multiply blend */
}

/* Floating scroll indicator */
.scroll-indicator {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(10, 15, 34, 0.72);
  border: 1.5px solid rgba(201, 162, 74, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--color-gold);
  text-decoration: none;
  z-index: 50;
  box-shadow:
    0 6px 22px rgba(10, 15, 34, 0.4),
    0 0 18px rgba(201, 162, 74, 0.2);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.scroll-indicator:hover {
  background: rgba(10, 15, 34, 0.88);
  color: var(--color-gold-soft);
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 8px 26px rgba(10, 15, 34, 0.55),
    0 0 24px rgba(201, 162, 74, 0.4);
}

.scroll-indicator-label {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.9;
}

.scroll-indicator-icon {
  display: block;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
}

.hero-inner {
  text-align: center;
}

.hero-seal {
  display: block;
  width: clamp(200px, 28vw, 320px);
  margin: 0 auto var(--space-6);
}

.hero-seal img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(700%) hue-rotate(5deg) brightness(97%);
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.hero-title {
  font-size: var(--text-4xl);
  max-width: 16ch;
  margin: 0 auto var(--space-5);
  color: var(--color-text-on-dark);
}

.hero-lede {
  font-size: var(--text-lg);
  max-width: 44ch;
  margin: 0 auto var(--space-6);
  color: rgba(247, 244, 236, 0.86);
  line-height: 1.5;
}


/* Trust row — sits between lede and CTAs */
.trust-row {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  max-width: 580px;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  font-weight: 600;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.trust-icon {
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--color-gold);
}