:root{
  --brand:#90278E;
  --brand-dark:#561552;
  --badge-bg:#feeefb;
}

/* Base */
.badge-soft-brand{ background-color:var(--badge-bg); color:var(--brand); }
.brand-link{ color:var(--brand); }
.brand-link:hover{ color:var(--brand-dark); }
.btn-brand{
  border:1px solid var(--brand);
  color:#fff;
  background-color:var(--brand);
}
.btn-brand:hover{ background-color:var(--brand-dark); color:#fff; }

/* Left column defaults */
.hero-left{
  position:relative;
  color:#fff; /* mobile default over dark overlay */
}


/* Desktop typography colors */
@media (min-width:768px){
  .hero-left{ color:#111; }               /* body text */
  .hero-heading{ color:#212529; }         /* heading */
  .hero-support{ color:#6c757d; }         /* "secondary" tone on desktop */
}

/* Mobile: image sits behind the left column with a dark overlay */
@media (max-width:767.98px){
  .hero-right{ display:none; } /* no Bootstrap d- classes */
  .logo-desktop{ display:none; }
  .logo-mobile{ display:block; }

  .footer-links{ width: 100%;}

  .hero-left::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
      var(--hero-img) center/cover no-repeat;
    z-index:0;
  }
  .hero-left > *{ position:relative; z-index:1; }
}

/* Desktop & tablets: image occupies the right column */
@media (min-width:768px){
  .logo-mobile{ display:none; }
  .logo-desktop{ display:block; }
  .hero{ min-height:100vh; }

  .hero-right::before{
    content:"";
    position:absolute; inset:0;
    background: var(--hero-img) center/cover no-repeat;
    z-index:0;
  }
  .hero-gradient{
    position:absolute; top:0; bottom:0; left:-1px; width:300px; z-index:20;
    background: linear-gradient(to right, #fff 0%, #fff 10%, transparent 100%);
    pointer-events:none;
  }
}