/* =========================================================
   Home Hero
   - Background image
   - Global white overlay
   - WIDER text panel (3-line headline)
   ========================================================= */

.home-hero{
  position: relative;
  isolation: isolate;
  z-index: 20;

  background-image: var(--home-hero-bg-desktop);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  padding: clamp(44px, 6vw, 92px) 0;
}

/* Global overlay (keep this) */
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.65);
  z-index: 0;
}

.home-hero__inner{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;

  padding-left: var(--space-sm);
  padding-right: var(--space-sm);

  display: flex;
  justify-content: center;
}

/* =========================================================
   TEXT PANEL (WIDER)
   ========================================================= */

.home-hero__content{
  position: relative;

  /*THIS IS THE KEY CHANGE */
  max-width: 980px;        /* was 760px */
  width: 100%;

  padding: var(--space-xl) var(--space-xl);

  background: rgba(255,255,255,0.70);
  border-radius: var(--radius-lg);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* TITLE */
.home-hero__title{
  margin: 0 0 var(--space-sm);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.home-hero__title .line{
  display: block;
}

.text-red{ color: var(--gc-red); }

/* SUBTEXT */
.home-hero__subtext{
  margin: 0 0 var(--space-md);
  color: var(--gc-text);
  font-weight: 500;
  max-width: 68ch; /* slightly wider */
}

/* BUTTONS */
.home-hero__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 1014px){

  .home-hero{
    background-image: var(--home-hero-bg-mobile);
    background-position: top center;

    padding-top: clamp(36px, 7vw, 64px);
    padding-bottom: clamp(28px, 6vw, 48px);
  }

  .home-hero__content{
    max-width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .home-hero__actions{
    width: 100%;
  }

  .home-hero__actions .btn{
    width: 100%;
    justify-content: center;
  }
}