.page-hero { position: relative; background: var(--ink); color: #fff; padding: clamp(72px,10vw,130px) 0; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; right: -190px; top: -210px; box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.02); }
.page-hero__grid { position: relative; display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: center; }
.page-hero h1 { max-width: 1000px; font-size: clamp(2.8rem,5.8vw,5.4rem); }
.page-hero p { max-width: 760px; color: rgba(255,255,255,.68); font-size: 1.2rem; }
.page-hero__mark { width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; position: relative; }
.page-hero__mark span { font-size: 7rem; font-weight: 950; color: var(--accent); }
.page-hero__mark div { position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.page-hero__image img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 24px; border: 1px solid rgba(255,255,255,.14); }

@media (max-width: 760px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__mark { display: none; }
}
@media (max-width: 430px) {
  .page-hero { padding: 72px 0; }
}