.why-hero {
position: relative;
padding-block: clamp(40px, 5.4vw, 78px) clamp(48px, 6vw, 86px);
overflow: hidden;
}
.why-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(44% 56% at 14% 22%, rgba(30, 141, 233, 0.16), transparent 66%),
radial-gradient(38% 52% at 90% 44%, rgba(123, 47, 247, 0.13), transparent 70%);
}
.why-hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(32px, 4vw, 64px);
align-items: end;
}
.why-hero__title {
max-width: 13ch;
}
.why-hero__lead {
margin-top: clamp(26px, 3vw, 40px);
max-width: 52ch;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--c-text-2);
}
.why-hero__points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(22px, 2.6vw, 34px);
padding-bottom: clamp(10px, 2vw, 34px);
} .process-line {
position: relative;
margin-top: clamp(40px, 5vw, 68px);
}
.process-line__rail {
position: absolute;
top: 24px;
left: 6%;
right: 6%;
height: 1px;
background: repeating-linear-gradient(90deg, var(--c-line-2) 0 6px, transparent 6px 12px);
}
.process-line__steps {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(14px, 2vw, 28px);
}
.pstep {
text-align: center;
display: grid;
justify-items: center;
gap: 14px;
}
.pstep__num {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--c-line-2);
border-radius: var(--radius-pill);
background: var(--c-bg);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--c-text-3);
transition: border-color var(--dur-main) ease, color var(--dur-main) ease,
box-shadow var(--dur-main) ease;
}
.pstep:hover .pstep__num,
.pstep.is-active .pstep__num {
border-color: var(--c-accent);
color: var(--c-accent);
box-shadow: 0 0 0 4px rgba(30, 141, 233, 0.14);
}
.pstep__title {
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-text);
}
.pstep__desc {
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--c-text-3);
max-width: 22ch;
} .ind__grid {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
gap: clamp(28px, 3.6vw, 56px);
align-items: start;
}
.ind__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
} .results {
position: relative;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%);
border-block: 1px solid var(--c-line);
}
.results__grid {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
gap: clamp(28px, 3.6vw, 56px);
align-items: center;
}
.results__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(20px, 2.6vw, 34px);
}
.results__stats > * {
padding-left: clamp(18px, 2vw, 28px);
border-left: 1px solid var(--c-line-2);
}
.results__stats > *:first-child {
padding-left: 0;
border-left: 0;
} @media (max-width: 1100px) {
.process-line__steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: clamp(28px, 4vw, 40px);
}
.process-line__rail {
display: none;
}
}
@media (max-width: 1024px) {
.ind__grid,
.results__grid {
grid-template-columns: 1fr;
}
.why-hero__points {
padding-bottom: 0;
}
.results__stats {
grid-template-columns: 1fr 1fr;
row-gap: 30px;
}
.results__stats > *:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
}
@media (max-width: 900px) {
.why-hero__grid {
grid-template-columns: 1fr;
}
.why-hero__points {
padding-bottom: 0;
}
}
@media (max-width: 768px) {
.ind__cards {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.process-line__steps {
grid-template-columns: 1fr 1fr;
}
.ind__cards {
grid-template-columns: 1fr;
}
.why-hero__points {
grid-template-columns: 1fr;
}
}