.svc-hero {
position: relative;
padding-block: clamp(44px, 4.7vw, 72px) clamp(56px, 6.3vw, 96px);
overflow: hidden;
}
.svc-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(46% 60% at 18% 20%, rgba(30, 141, 233, 0.16), transparent 68%),
radial-gradient(40% 60% at 88% 30%, rgba(123, 47, 247, 0.14), transparent 70%);
}
.svc-hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.svc-hero__lead {
margin: 28px 0 36px;
max-width: 400px;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.6;
color: var(--c-text-2);
}
.svc-hero__cta {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.svc-hero__cta .btn--primary {
min-width: 300px;
}
.svc-hero__note {
display: flex;
align-items: center;
gap: 10px;
max-width: 320px;
}
.svc-hero__note svg {
width: 34px;
flex: none;
color: var(--c-violet);
}
.svc-hero__points {
display: flex;
flex-direction: column;
gap: 30px;
} #all-services {
padding-block: clamp(28px, 2.8vw, 40px) clamp(64px, 6.3vw, 90px);
}
.svc-list__head {
text-align: center;
margin-bottom: clamp(36px, 4.4vw, 60px);
}
.svc-list__head .eyebrow {
letter-spacing: 0.34em;
} .svc-groups {
display: grid;
gap: clamp(48px, 5vw, 76px);
}
.svc-group__head {
display: grid;
grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
align-items: start;
gap: clamp(24px, 4vw, 64px);
padding-bottom: 20px;
margin-bottom: clamp(22px, 2.4vw, 32px);
border-bottom: 1px solid var(--c-line);
}
.svc-group__head .eyebrow {
justify-self: end;
max-width: 62ch;
text-align: right;
}
.svc-group__title {
font-family: var(--font-display);
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--c-text);
}
.svc-group__grid {
--icard-gap: 20px;
}
.svc-card {
min-height: 210px;
}
.svc-card .icard__title {
margin-top: 22px;
font-size: 19px;
} .compare__grid {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.6fr);
gap: clamp(28px, 3.6vw, 56px);
align-items: start;
}
.compare__scroll {
overflow-x: auto;
border: 1px solid var(--c-line-2);
scrollbar-width: thin;
}
.compare-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.compare-table th,
.compare-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--c-line);
text-align: center;
vertical-align: middle;
}
.compare-table thead th {
padding-block: 22px 18px;
}
.compare-table tbody th {
text-align: left;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 400;
color: var(--c-text-3);
white-space: nowrap;
}
.compare-table__svc {
display: grid;
justify-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text);
}
.rating {
letter-spacing: 3px;
color: var(--c-accent);
font-size: 12px;
}
.rating .off {
color: rgba(245, 245, 245, 0.2);
}
.budget {
color: var(--c-accent);
font-family: var(--font-ui);
font-weight: 700;
}
.compare-table tfoot td {
font-size: var(--fs-xs);
color: var(--c-text-3);
line-height: 1.5;
} .spotlight {
position: relative;
overflow: hidden;
}
.spotlight__grid {
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 0.55fr);
gap: clamp(28px, 3.6vw, 56px);
align-items: center;
}
.spotlight__name {
display: flex;
align-items: baseline;
gap: 18px;
flex-wrap: wrap;
margin: 20px 0 18px;
}
.spotlight__name .h2 {
font-size: clamp(40px, 4vw, 58px);
}
.spotlight__points {
display: grid;
gap: 12px;
margin-bottom: 26px;
font-size: var(--fs-body);
color: var(--c-text-2);
}
.spotlight__points li {
position: relative;
padding-left: 20px;
}
.spotlight__points li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: var(--c-accent);
}
.stamp {
display: grid;
place-items: center;
color: var(--c-violet);
opacity: 0.85;
transform: rotate(-12deg);
}
.stamp svg {
width: 100%;
max-width: 190px;
} .faq-sec__grid,
.cases-sec__grid {
display: grid;
grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.7fr);
gap: clamp(28px, 3vw, 44px);
align-items: start;
}
.cases-sec__cards > * {
height: 362px;
}
.cases-sec__cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
} @media (max-width: 1200px) {
.svc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.compare__grid,
.faq-sec__grid,
.cases-sec__grid,
.spotlight__grid {
grid-template-columns: 1fr;
}
.stamp {
justify-self: start;
}
.cases-sec__cards {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 900px) {
.svc-hero__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.svc-group__head {
grid-template-columns: 1fr;
gap: 12px;
}
.svc-group__head .eyebrow {
justify-self: start;
text-align: left;
}
.svc-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.svc-grid,
.cases-sec__cards {
grid-template-columns: 1fr;
}
.svc-hero__cta .btn--primary {
min-width: 0;
width: 100%;
}
} .svc-group__head .eyebrow {
max-width: 62ch;
}