.srs-img-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(124,58,237,.18), transparent 60%),
}

.srs-img-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(transparent 31px, rgba(100,116,139,.06) 32px),
    linear-gradient(90deg, transparent 31px, rgba(100,116,139,.06) 32px);
  background-size:32px 32px;
  
}

.srs-img-hero{
  --maxw:1400px;
  --padX:clamp(14px,3vw,26px);
  --padY:28px;

  --text:#0f172a;
  --muted:#475569;
  --line:rgba(148,163,184,.30);

  --safeL:env(safe-area-inset-left,0px);
  --safeR:env(safe-area-inset-right,0px);
  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);

  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  color:var(--text);
  overflow-wrap:anywhere;
  hyphens:none;

  position:relative;
  isolation:isolate;
  margin:0;
  width:100%;
  max-width:100%;

  padding-top:calc(var(--padY) + var(--safeT));
  padding-bottom:calc(var(--padY) + var(--safeB));
  padding-left:0;
  padding-right:0;

  overflow:hidden;
  overflow-x:clip;

  contain:layout paint;
}


@supports not (overflow-x:clip){
  .srs-img-hero{ overflow-x:hidden; }
}

.srs-img-hero :where(*, *::before, *::after){ box-sizing:border-box; }
.srs-img-hero :where(h2, p, figure){ margin:0; }

.srs-img-hero__wrap{
  position:relative;
  z-index:1;

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

  padding-inline:
    calc(var(--padX) + var(--safeL))
    calc(var(--padX) + var(--safeR));

  min-width:0;
}

.srs-img-hero__card{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 48px rgba(2,6,23,.10);
  overflow:hidden;

  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}

.srs-img-hero__hdr{
  padding:clamp(16px,2.2vw,22px);
  border-bottom:1px solid rgba(226,232,240,.85);

  background:
    radial-gradient(900px 260px at 0% 0%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(900px 260px at 100% 0%, rgba(14,165,233,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
}

.srs-img-hero__title{
  margin:0;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.1;
  font-size:clamp(22px,4.2vw,34px);

  background:linear-gradient(100deg,#7c3aed,#2563eb 35%,#06b6d4 70%,#10b981);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.srs-img-hero__sub{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
  font-size:clamp(13px,1.8vw,16px);
  max-width:72ch;
}

.srs-img-hero__figure{
  padding:clamp(14px,2.4vw,22px);
  display:flex;
  justify-content:center;
  align-items:center;
}

.srs-img-hero__img{
  width:min(860px,100%);
  height:auto;
  display:block;

  border-radius:18px;
  border:1px solid rgba(226,232,240,.85);
  background:#fff;

  box-shadow:0 22px 55px rgba(2,6,23,.14);
  filter:drop-shadow(0 10px 24px rgba(2,6,23,.10));
}

.srs-img-hero__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;

  padding:
    0
    clamp(14px,2.4vw,22px)
    clamp(16px,2.6vw,22px);
}

.srs-img-hero__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:6px 10px;
  border-radius:999px;

  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.86);

  font-weight:850;
  font-size:12.5px;
  color:#0f2247;
  white-space:nowrap;
}

@media (max-width:600px){
  .srs-img-hero{ --padY:20px; }
}

@media (max-width:560px){
  .srs-img-hero__card{ border-radius:18px; }
  .srs-img-hero__img{ border-radius:14px; }
}

@media (prefers-reduced-motion: reduce){
  .srs-img-hero *,
  .srs-img-hero *::before,
  .srs-img-hero *::after{
    animation:none !important;
    transition:none !important;
  }

  .srs-img-hero__card{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}


/* Ensure content above ::before/::after backgrounds */
.srs-img-hero > *{
  position: relative;
  z-index: 1;
}


@media (max-width: 600px){
  .srs-img-hero__pill{
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}