/*
 * Local Unsplash imagery with a shared automotive SaaS hero treatment.
 * Source photos:
 * https://unsplash.com/photos/1487754180451-c456f719a1fc
 * https://unsplash.com/photos/1530046339160-ce3e530c7d2f
 * https://unsplash.com/photos/1503376780353-7e6692767b70
 * https://unsplash.com/photos/1492144534655-ae79c964c9d7
 * The industrial hero reuses the project's existing Unsplash drivetrain asset.
 */
.hero,
.product-hero,
.belt-hero,
.saas-hero {
  isolation: isolate;
  color: #fff;
  background-color: #071827;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(8, 29, 47, .2);
}

.hero::before,
.product-hero::before,
.belt-hero::before,
.saas-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  content: "";
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  background:
    radial-gradient(circle at 80% 18%, rgba(65, 194, 217, .2), transparent 28%),
    linear-gradient(110deg, rgba(5, 19, 31, .2), transparent 55%);
}

.hero::after,
.product-hero::after,
.belt-hero::after,
.saas-hero::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  content: "";
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.hero {
  width: min(1440px, calc(100% - 40px));
  min-height: 320px;
  margin: 32px auto 0;
  padding: 48px;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .94) 0%, rgba(6, 24, 39, .86) 43%, rgba(5, 22, 35, .42) 100%),
    url("/assets/heroes/account-support.jpg");
  background-position: center 58%;
  box-sizing: border-box;
}

.product-hero {
  min-height: 290px;
  padding: 42px 46px;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .95) 0%, rgba(6, 24, 39, .84) 48%, rgba(5, 22, 35, .46) 100%),
    url("/assets/heroes/product-catalog.jpg");
  background-position: center 48%;
}

.belt-hero {
  min-height: 290px;
  padding: 42px 46px;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .96) 0%, rgba(6, 24, 39, .86) 48%, rgba(5, 22, 35, .44) 100%),
    url("/assets/heroes/industrial-clusters.webp");
  background-position: center 45%;
}

.saas-hero {
  position: relative;
  width: min(1440px, calc(100% - 40px));
  min-height: 250px;
  margin: 32px auto 0;
  padding: 46px 48px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .95) 0%, rgba(6, 24, 39, .82) 48%, rgba(5, 22, 35, .42) 100%),
    url("/assets/heroes/account-support.jpg");
  background-position: center 58%;
  box-sizing: border-box;
}

.saas-hero.hero-membership {
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .95) 0%, rgba(6, 24, 39, .82) 46%, rgba(5, 22, 35, .38) 100%),
    url("/assets/heroes/membership.jpg");
  background-position: center 58%;
}

.saas-hero.hero-account {
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .95) 0%, rgba(6, 24, 39, .84) 50%, rgba(5, 22, 35, .4) 100%),
    url("/assets/heroes/account-support.jpg");
}

.saas-hero.hero-help,
.saas-hero.hero-correction {
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .96) 0%, rgba(6, 24, 39, .86) 52%, rgba(5, 22, 35, .44) 100%),
    url("/assets/heroes/supplier-search.jpg");
  background-position: center 52%;
}

.saas-hero.hero-legal {
  min-height: 220px;
  background-image:
    linear-gradient(90deg, rgba(4, 17, 29, .97) 0%, rgba(6, 24, 39, .9) 55%, rgba(5, 22, 35, .48) 100%),
    url("/assets/heroes/product-catalog.jpg");
  background-position: center 56%;
}

.hero-copy,
.product-hero > div,
.belt-hero > div,
.saas-hero > * { position: relative; z-index: 1; }

.hero h1,
.product-hero h1,
.belt-hero h1,
.saas-hero h1,
.saas-hero.is-compact h1 {
  max-width: 790px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.hero h1 em { color: #74d6e9; }

.hero-description,
.product-hero p,
.belt-hero p,
.saas-hero-copy {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(226, 237, 245, .82);
  font-size: 15px;
  line-height: 1.65;
}

.metric-panel,
.product-hero-metrics,
.belt-coverage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: rgba(7, 27, 44, .48);
  border: 1px solid rgba(209, 235, 245, .22);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
  backdrop-filter: blur(14px);
}

.metric-primary {
  grid-column: 1 / -1;
  padding: 10px 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.metric-primary strong,
.metric-primary span { display: block; }
.metric-primary strong { margin: 0; color: #fff; font-size: 38px; letter-spacing: -.04em; }
.metric-primary span { margin-top: 2px; color: rgba(225, 238, 246, .68); font-size: 11px; }
.metric-secondary { display: contents; }
.metric-secondary div { padding: 6px 12px; border: 0; }
.metric-secondary strong,
.metric-secondary span { display: block; }
.metric-secondary strong { color: #fff; font-size: 15px; }
.metric-secondary span { margin-top: 2px; color: rgba(225, 238, 246, .62); font-size: 10px; }

.product-hero-metrics > div,
.belt-coverage > div {
  min-width: 0;
  padding: 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
}

.product-hero-metrics strong,
.belt-coverage strong {
  display: block;
  color: #fff;
  font-size: 29px;
  line-height: 1.1;
  text-align: left;
}

.product-hero-metrics span,
.belt-coverage span {
  display: block;
  margin-top: 6px;
  color: rgba(225, 238, 246, .7);
  font-size: 10px;
}

@media (max-width: 820px) {
  .hero,
  .product-hero,
  .belt-hero,
  .saas-hero {
    width: min(100% - 24px, 1440px);
    min-height: 240px;
    margin-top: 14px;
    padding: 30px 24px;
    border-radius: 16px;
    background-position: center;
  }
  .hero,
  .product-hero,
  .belt-hero { grid-template-columns: 1fr; }
  .metric-panel,
  .product-hero-metrics,
  .belt-coverage { display: none; }
  .hero h1,
  .product-hero h1,
  .belt-hero h1,
  .saas-hero h1,
  .saas-hero.is-compact h1 { font-size: clamp(30px, 9vw, 40px); }
  .hero-description,
  .product-hero p,
  .belt-hero p,
  .saas-hero-copy { font-size: 14px; line-height: 1.6; }
}