/********************
 * Product Hero Base
 ********************/
.product-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  height: 500px;
  background-image: url("../images/hero-desktop.png");
  background-size: cover;
  background-position: center 50% 80%;
  background-repeat: no-repeat;
  padding-top: 16px;
  padding-bottom: 120px;
}

/********************
 * Brand tokens for buttons
 ********************/
:root{
  --blue-200:#B5E1EC;
  --blue-300:#82CADE;
  --blue-400:#48ABC8;
  --blue-500:#2DBFAD;
  --blue-950:#132A39; /* Default */
}

/********************
 * Image Container
 ********************/
.product-hero .hero-img-container { display: none; }

/********************
 * Content Container
 ********************/
.product-hero .content-wrapper {
  position: relative;
  z-index: 5;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding-bottom: 64px;
}

.product-hero .content-container {
  padding: 60px 20px 40px;
  max-width: 980px;
  margin: 0 auto;
}

/********************
 * Typography
 ********************/
.product-hero .logo-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.product-hero .logo-heading .logo { display: none; }

.product-hero .heading {
  font-size: calc(32px + (44 - 32) * ((100vw - 320px) / 680));
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.product-hero .subheading {
  font-size: calc(14px + (17 - 14) * ((100vw - 320px) / 680));
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 4px 0 0;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.product-hero .tagline {
  font-size: calc(20px + (26 - 20) * ((100vw - 320px) / 680));
  font-weight: 400;
  margin: 10px 0 24px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/********************
 * Buttons (Unified)
 * - No legacy .btn-primary / .btn-outline overrides
 * - .btn is kept only as a hook for existing JS
 ********************/
.product-hero .btn-group{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Base button */
.product-hero .button,
.product-hero .btn{
  all: unset;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  height:3rem;             /* consistent height */
  padding:0 2rem;
  border-radius:9999px;    /* pill */
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.02em;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}

/* Ripple/hover layers (safe even if spans are absent) */
.product-hero .button-inner,
.product-hero .button-inner-hover,
.product-hero .button-inner-static{ pointer-events:none; display:block; }
.product-hero .button-inner{ position:relative; }
.product-hero .button-inner-hover{
  position:absolute; top:0; left:0; opacity:0; transform:translateY(70%);
}
.product-hero .button-bg{
  overflow:hidden; border-radius:inherit; position:absolute; inset:0;
}
.product-hero .button-bg-layers{
  position:absolute; left:50%; transform:translate(-50%); top:-60%;
  aspect-ratio:1/1; width:max(200%,10rem);
}
.product-hero .button-bg-layer{
  border-radius:9999px; position:absolute; inset:0; transform:scale(0);
}
.product-hero .-purple{    background-color:var(--blue-300); }
.product-hero .-turquoise{ background-color:var(--blue-400); }
.product-hero .-yellow{    background-color:var(--blue-200); }

/* Primary */
.product-hero .button--primary{
  background:var(--blue-950);
  color:#fff;
  border:none;
}
.product-hero .button--primary .button-bg{ background:var(--blue-950); }

/* Secondary */
.product-hero .button--secondary{
  background:transparent;
  color:var(--blue-950);
  border:2px solid var(--blue-950);
}
.product-hero .button--secondary .button-bg{ background:transparent; }
.product-hero .button--secondary:hover{ border-color:var(--blue-500); }

/* Hover animations */
.product-hero .button:hover .button-inner-static{
  opacity:0; transform:translateY(-70%);
  transition:transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s linear;
}
.product-hero .button:hover .button-inner-hover{
  opacity:1; transform:translateY(0);
  transition:transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.product-hero .button:hover .button-bg-layer{
  transition:transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s linear;
}
.product-hero .button:hover .button-bg-layer-1{ transform:scale(1); }
.product-hero .button:hover .button-bg-layer-2{ transform:scale(1); transition-delay:.1s; }
.product-hero .button:hover .button-bg-layer-3{ transform:scale(1); transition-delay:.2s; }

/********************
 * Mobile Styles (≤767px)
 ********************/
@media (max-width: 767px) {
  .product-hero {
    background-image: none !important;
    background-size: auto;
    background-position: initial;
    height: 500px;
  }

  .product-hero .hero-img-container {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 500px;
    z-index: 1;
  }

  /* Show only the mobile image (per your existing setup) */
  .product-hero .hero-img-mobile { display: none !important; }
  .product-hero .hero-img-desktop { display: block !important; }

  .product-hero .hero-img-desktop img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
  }

  .product-hero .button,
  .product-hero .btn{
    min-width:120px; font-size:.95rem; padding:0 1.5rem;
  }
}

/********************
 * Desktop Styles (≥768px)
 ********************/
@media (min-width: 768px) {
  .product-hero { height: 500px; display:flex; flex-direction:column; }
  .product-hero .content-wrapper { height: 500px; order: 1; }
  .product-hero .content-container { padding: 60px 40px 40px; }

  .product-hero .heading {
    font-size: 44px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .product-hero .subheading,
  .product-hero .tagline {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .product-hero .tagline{
    font-size: 26px;
    margin: 12px auto 28px;
    max-width: 600px;
  }

  .product-hero .button,
  .product-hero .btn{
    min-width: 140px;
    font-size: 17px;
    padding: 0 20px;
  }

  /* On desktop, hide both inline image containers and use CSS background */
  .product-hero .hero-img-desktop,
  .product-hero .hero-img-mobile{ display: none !important; }
  .product-hero .hero-img-container{ display: none !important; }
}