/* ============================================================
   Packagly — banner.css  (split from style.css)
   Depends on: common.css (variables, reset, icon helpers)
   Responsive @media rules live in responsive.css
   ============================================================ */

/* ============================================================
   HERO WRAPPER (navbar + banner share dark bg + decorations)
============================================================ */

.hero-wrap {
  position: relative;
  /* no colour — the banner image (inlined in index.html) is the only background */
  overflow: hidden;
  isolation: isolate;
  /* pull the banner up so it sits behind the glassy navbar (navbar ≈ 85px tall) */
  margin-top: -60px;
  padding-top: 42px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* .hero-bg-img sizing is now inlined in index.html (width:100%; height:auto) */

/* mobile-only banner image — hidden on desktop */
.hero-mobile-banner {
  display: none;
}
.hero-glow {
  display: none; /* no colour decorations — show only the banner image */
}
.hero-glow-1 {
  width: 500px;
  height: 500px;
  top: -120px;
  right: -100px;
  background: var(--green);
  opacity: 0.14;
}
.hero-glow-2 {
  width: 420px;
  height: 420px;
  bottom: -180px;
  left: -120px;
  background: #70ae13;
  opacity: 0.16;
}

/* ============================================================
   BANNER
============================================================ */
.hero-banner {
  position: relative;
  z-index: 5;
  padding: 36px 0 70px;
}

.hero-content {
  max-width: 600px;
}

.hero-title {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 0 0 22px;
  text-transform: none;
  color: #fff;
}
.hero-title .text-accent {
  color: var(--green);
  text-shadow: 0 0 60px rgba(112, 174, 19, 0.4);
}

.hero-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--white-70);
  max-width: 500px;
  margin: 0px 0 22px;
  font-weight: 400;
}
.btn-cta-green {
  background: var(--green);
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  padding: 14px 18px 14px 24px;
  border-radius: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.25s ease;
  box-shadow: 0 10px 28px rgba(112, 174, 19, 0.35);
}
.btn-cta-green:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(112, 174, 19, 0.5);
}

.cta-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  margin-left: 2px;
}
.cta-arrow .icon {
  filter: brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(508%)
    hue-rotate(40deg) brightness(94%) contrast(89%);
}

.btn-cta-outline {
  background: transparent;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-weight: 700;
  font-size: 13px;
  padding: 13px 28px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all 0.25s ease;
}
.btn-cta-outline:hover {
  border-color: var(--green);
  background: rgba(112, 174, 19, 0.1);
  color: var(--green) !important;
  transform: translateY(-2px);
}

/* Features row */
.hero-features {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 22px;
  flex-wrap: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  list-style: none;
}
.feature-ico {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.feature-ico .icon {
  filter: brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(508%)
    hue-rotate(40deg) brightness(94%) contrast(89%);
  width: 22px;
  height: 22px;
}
.feature-text {
  line-height: 1.25;
  letter-spacing: 0.2px;
}
.feature-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.18);
  min-height: 38px;
}

/* ===== HERO VISUAL (right side) ===== */
.hero-visual {
  position: relative;
  text-align: center;
  padding: 10px 0;
}
.hero-visual-overline {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 34px);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
  line-height: 1;
}
.hero-visual-headline {
  display: block;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--green);
  text-transform: uppercase;
  margin-top: 2px;
  text-shadow:
    0 0 30px rgba(112, 174, 19, 0.55),
    0 0 80px rgba(112, 174, 19, 0.35);
}
.hero-visual-placeholder {
  margin-top: 26px;
  aspect-ratio: 16/9;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
============================================================ */