/* Preserved original styles: inner */
.metal-code {
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(49,170,244,.35);
  border-radius:11px;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  margin-bottom:38px
}

.page-hero {
  position:relative;
  overflow:hidden;
  background:linear-gradient(118deg,#07151f,#0b2a3a);
  color:#fff;
  padding:92px 0 70px
}

.page-hero::after {
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(49,170,244,.22),transparent 68%);
  right:-100px;
  top:-190px
}

.page-hero-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:52px 52px
}

.page-hero-inner {
  position:relative;
  z-index:2
}

.page-hero h1 {
  font-size:clamp(44px,6vw,72px);
  line-height:1.03;
  letter-spacing:-.045em;
  max-width:900px
}

.page-hero p {
  max-width:720px;
  color:#b4c7d0;
  font-size:17px;
  margin-top:20px
}

.breadcrumbs {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:30px;
  font-size:12px;
  color:#90a8b4
}

.breadcrumbs strong {
  color:#fff
}

.metal-code.large {
  width:68px;
  height:68px;
  font-size:17px;
  background:#07151f
}

@media(max-width:980px) {
.page-hero {
  padding:72px 0 58px
}
}

@media(max-width:640px) {
.page-hero h1 {
  font-size:42px
}
}

@media(max-width:640px) {
.page-hero p {
  font-size:15px
}
}

@media(max-width:640px) {
.page-hero {
  padding:60px 0 50px
}
}