/* ==========================================================================
   LP03 · UNIT 1 · HERO — "Keep Your Business Moving"
   --------------------------------------------------------------------------
   Navy field crossed by soft diagonal "motion trails" (light streaks that
   drift slowly — the business keeps moving). Copy + Sign Up Free CTA at
   inline-start; the shared lead form (components/lead-form.css) at
   inline-end, whose compact bridge reads: storefront → Fatorly → e-invoice.
   ========================================================================== */

.bhero {
  position: relative;
  z-index: 2;                      /* above the next section: country popup */
  display: flex;
  align-items: center;
  min-block-size: 100svh;
  padding-block-start: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
  padding-block-end: clamp(3.5rem, 8vw, 6rem);
  background-color: var(--c-navy);
  isolation: isolate;
}

.bhero__decor {
  background:
    radial-gradient(ellipse 55% 50% at 15% 85%, rgba(0, 169, 182, 0.2), transparent 70%),
    radial-gradient(ellipse 45% 40% at 90% 10%, rgba(1, 62, 106, 0.95), transparent 70%),
    linear-gradient(160deg, #031A4C 0%, var(--c-navy) 60%);
}

[dir="rtl"] .bhero__decor {
  scale: -1 1;
}

/* Diagonal motion trails */
.bhero__trail {
  position: absolute;
  inset-inline-start: -20%;
  inline-size: 140%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 169, 182, 0.55) 45%, rgba(255, 255, 255, 0.6) 50%, transparent 60%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  rotate: -14deg;
  opacity: 0.55;
  animation: bhero-trail 9s linear infinite;
}

.bhero__trail:nth-child(1) { inset-block-start: 22%; animation-duration: 11s; }
.bhero__trail:nth-child(2) { inset-block-start: 48%; animation-delay: -4s; opacity: 0.35; }
.bhero__trail:nth-child(3) { inset-block-start: 74%; animation-duration: 13s; animation-delay: -7s; }

@keyframes bhero-trail {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}

.bhero__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .bhero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ---------------------------------------------------------------------------
   Copy
   --------------------------------------------------------------------------- */
.bhero__content {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .bhero__content {
    justify-items: start;
    text-align: start;
  }
}

.bhero__title {
  max-inline-size: 18ch;
  color: var(--c-on-dark);
}

/* Word spans created by hero.js (slide-in "moving" reveal) */
.bhero__word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.bhero__sub {
  max-inline-size: 36rem;
  color: var(--c-on-dark-body);
}

.bhero__actions {
  margin-block-start: var(--space-xs);
  inline-size: 100%;
}

@media (min-width: 30rem) {
  .bhero__actions {
    inline-size: auto;
  }
}

@media (min-width: 48rem) {
  .bhero__actions {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Form column (shared lead form)
   --------------------------------------------------------------------------- */
.bhero__form {
  padding-block-start: 2.5rem;           /* room for the bridge on the card */
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

/* Pre-animation states (JS motion only) */
.js-motion .bhero__title {
  visibility: hidden;
}

.js-motion .bhero [data-bhero-anim] {
  opacity: 0;
}