.hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(3,46,44,.98) 0%, rgba(3,46,44,.93) 46%, rgba(3,46,44,.56) 100%),
        var(--hero-image, none),
        linear-gradient(135deg, #063b39, #021f1e);
    background-size: cover;
    background-position: center;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.24));
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 780px) 1fr; min-height: 570px; padding-top: 104px; }
.hero__content { align-self: center; padding-bottom: 70px; }
.hero__title { max-width: 800px; margin-bottom: 28px; font-size: clamp(54px, 6.3vw, 96px); font-weight: 600; letter-spacing: -.065em; }
.hero__description { max-width: 670px; margin-bottom: 40px; color: rgba(255,255,255,.76); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__aside { align-self: end; justify-self: end; display: flex; align-items: center; gap: 24px; padding-bottom: 87px; writing-mode: vertical-rl; color: rgba(255,255,255,.5); }
.hero__aside-label { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero__aside-index { font-size: 28px; font-weight: 500; }
.hero__stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.22); }
.hero-stat { min-height: 150px; padding: 30px 32px; border-right: 1px solid rgba(255,255,255,.18); }
.hero-stat:last-child { border-right: 0; }
.hero-stat__value { display: block; margin-bottom: 7px; font-size: clamp(27px, 2.3vw, 38px); font-weight: 600; letter-spacing: -.05em; }
.hero-stat__label { display: block; max-width: 175px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; }
.hero__visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.hero__line { position: absolute; width: 700px; height: 700px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.hero__line--one { top: -250px; right: -80px; }
.hero__line--two { top: -90px; right: -300px; }
.hero__orb { position: absolute; top: 18%; right: 11%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(199,170,112,.28), rgba(199,170,112,0) 70%); filter: blur(4px); }