/* ============================================================
   hero.css — SELF-CONTAINED, REUSABLE hero component
   Mirrors Wix's bgLayers: a full-bleed background layer (gradient OR image)
   sits behind the content, and the transparent header overlays the top.

   Variants:
     .hero                 base (content + .hero__bg layer)
     .hero--gradient       soft lavender gradient background (home)
     .hero--image          full-bleed background image  (set --hero-bg: url(...))
     .hero--split          two columns: text + media (home / product pages)
     .hero--centered       single centered column (pricing / contact / legal)
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* clear the fixed/overlaying header */
  padding-top: calc(var(--header-h) + clamp(16px, 3vw, 44px));
  padding-bottom: clamp(28px, 3.5vw, 56px);
}

/* full-bleed background layer (behind everything, spans behind the header too) */
.hero__bg { position: absolute; inset: 0; z-index: -1; }

.hero--gradient .hero__bg {
  background:
    radial-gradient(48% 70% at 88% 92%, rgba(190, 194, 255, .45) 0%, rgba(238, 242, 255, 0) 60%),
    radial-gradient(42% 60% at 6% 4%, rgba(238, 242, 255, .9) 0%, rgba(238, 242, 255, 0) 55%),
    linear-gradient(170deg, #f2f3ff 0%, #ffffff 45%, #f4f5ff 100%);
}
.hero--image .hero__bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* layouts */
.hero__inner { position: relative; z-index: 1; }
.hero--split .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero--centered .hero__inner { max-width: 820px; margin-inline: auto; text-align: center; }

/* content */
.hero__eyebrow { margin-bottom: 16px; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.hero__title .accent { color: var(--c-primary); }
.hero__title .ink { color: var(--c-heading); }
.hero__desc { margin-top: 22px; font-size: var(--fs-lead); color: var(--c-text-strong); max-width: 54ch; }
.hero--centered .hero__desc { margin-inline: auto; }
.hero__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 28px; max-width: 520px; }
.hero__actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }
.hero--centered .hero__actions { justify-content: center; }
.hero__meta { display: flex; gap: 32px; margin-top: 26px; color: var(--c-text); font-size: var(--fs-sm); }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }

/* product graphic — single composite image (dashboard panel + pills baked in),
   bleeding off the right edge of the section and ending there */
.hero__visual { position: relative; }
.hero__shot { display: block; width: 152%; max-width: none; height: auto; }

@media (max-width: 768px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__bullets { grid-template-columns: 1fr; }
  .hero__shot { width: 100%; }
}