.svc-h {
position: relative;
overflow: hidden;
padding-block: clamp(32px, 2.7vw, 52px) clamp(36px, 2.8vw, 58px);
}
.svc-h__bg {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(50% 64% at 76% 40%, rgba(30, 141, 233, 0.18), transparent 68%),
radial-gradient(36% 50% at 8% 14%, rgba(123, 47, 247, 0.1), transparent 72%);
}
.svc-h__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.82fr);
gap: clamp(28px, 3.2vw, 48px);
align-items: center;
}
.svc-h__lead {
margin: 20px 0 0;
max-width: 46ch;
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--c-text-2);
}
.svc-h__cta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: clamp(22px, 2.2vw, 30px);
}
.svc-h__note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 16px 0 0;
max-width: 52ch;
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--c-text-3);
}
.svc-h__note::before {
content: "";
flex: none;
width: 7px;
height: 7px;
margin-top: 7px;
border-radius: var(--radius-pill);
background: var(--c-accent);
}
.svc-h__art {
position: relative;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
width: 100%;
max-width: clamp(480px, 32vw, 560px);
margin-left: auto;
}
.svc-h__art .splash {
position: absolute;
inset: -4%;
width: 108%;
height: 108%;
object-fit: contain;
opacity: 0.55;
}
.svc-h__art .glyph {
position: relative;
width: 46%;
color: var(--c-accent);
}
.svc-h__art .hand-note {
position: absolute;
right: 2%;
top: 12%;
max-width: 180px;
text-align: right;
line-height: 1.15;
color: var(--c-accent-light);
transform: rotate(-5deg);
pointer-events: none;
} .svc-say {
padding-block: clamp(48px, 5vw, 76px);
}
.svc-say__text {
max-width: 900px;
margin: 0;
font-size: clamp(20px, 1.85vw, 27px);
line-height: 1.55;
color: var(--c-text);
} .svc-split {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.svc-split__text {
margin: 22px 0 0;
font-size: var(--fs-body);
line-height: 1.75;
color: var(--c-text-2);
}  .svc-steps {
position: relative;
display: grid;
grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
gap: 20px;
text-align: center;
}
.svc-steps::before {
content: "";
position: absolute;
top: 33px;
left: calc(50% / var(--steps, 5));
right: calc(50% / var(--steps, 5));
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 141, 233, 0.45), transparent);
}
.svc-step {
position: relative;
display: grid;
justify-items: center;
gap: 10px;
}
.svc-step .ico-disc {
background: var(--c-bg);
}
.svc-step__num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--c-text-3);
}
.svc-step__title {
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--c-text);
}
.svc-step__text {
max-width: 30ch;
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--c-text-3);
} .svc-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 32px;
}
.svc-check {
display: flex;
gap: 14px;
align-items: flex-start;
}
.svc-check__ico {
flex: none;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--c-line-3);
border-radius: var(--radius-pill);
color: var(--c-accent);
transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.svc-check:hover .svc-check__ico {
border-color: rgba(30, 141, 233, 0.6);
box-shadow: 0 0 20px rgba(30, 141, 233, 0.2);
}
.svc-check__title {
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--c-text);
}
.svc-check__text {
margin: 6px 0 0;
font-size: var(--fs-xs);
line-height: 1.6;
color: var(--c-text-3);
} .svc-scope {
border-top: 1px solid var(--c-line);
}
.svc-scope__row {
display: grid;
grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.4fr);
gap: 24px;
align-items: start;
padding: 24px 0;
border-bottom: 1px solid var(--c-line);
transition: background 0.25s ease, padding-left 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.svc-scope__row:hover {
background: rgba(255, 255, 255, 0.025);
padding-left: 18px;
}
}
.svc-scope__num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--c-text-3);
padding-top: 4px;
}
.svc-scope__title {
font-family: var(--font-ui);
font-size: clamp(17px, 1.4vw, 20px);
font-weight: 700;
line-height: 1.25;
color: var(--c-text);
}
.svc-scope__text {
font-size: var(--fs-sm);
line-height: 1.65;
color: var(--c-text-3);
} .svc-metrics {
display: grid;
grid-template-columns: repeat(var(--metrics, 4), minmax(0, 1fr));
gap: 20px;
}
.svc-metric {
padding: 26px 24px;
border: 1px solid var(--c-line-2);
border-radius: var(--radius-sm);
background: var(--c-surface);
}
.svc-metric__v {
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 38px);
line-height: 0.92;
color: var(--c-accent);
}
.svc-metric__l {
margin-top: 10px;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--c-text-2);
} .svc-compare {
overflow-x: auto;
border: 1px solid var(--c-line-2);
border-radius: var(--radius-sm);
}
.svc-compare table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.svc-compare th,
.svc-compare td {
padding: 15px 18px;
border-bottom: 1px solid var(--c-line);
text-align: left;
vertical-align: top;
}
.svc-compare thead th {
font-family: var(--font-ui);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text);
}
.svc-compare tbody th {
font-family: var(--font-body);
font-weight: 400;
color: var(--c-text-3);
white-space: nowrap;
}
.svc-compare td {
color: var(--c-text-2);
}
.svc-compare .is-accent {
color: var(--c-accent);
font-weight: 600;
}  .svc-tiers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.svc-tier {
display: flex;
flex-direction: column;
padding: 30px 28px;
border: 1px solid var(--c-line-2);
border-radius: var(--radius-sm);
background: var(--c-surface);
transition: transform 0.3s var(--ease-main), border-color 0.3s ease;
}
.svc-tier:hover {
transform: translateY(-3px);
border-color: rgba(30, 141, 233, 0.4);
}
.svc-tier.is-featured {
border-color: rgba(30, 141, 233, 0.45);
background: linear-gradient(180deg, rgba(30, 141, 233, 0.08), rgba(9, 9, 9, 0.4));
}
.svc-tier__name {
font-family: var(--font-ui);
font-size: 19px;
font-weight: 700;
color: var(--c-text);
}
.svc-tier__price {
margin: 14px 0 4px;
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 36px);
line-height: 1;
color: var(--c-accent);
}
.svc-tier__note {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-text-3);
}
.svc-tier__list {
margin: 20px 0 24px;
display: grid;
gap: 10px;
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--c-text-2);
}
.svc-tier__list li {
position: relative;
padding-left: 20px;
}
.svc-tier__list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--c-accent);
}
.svc-tier .btn {
margin-top: auto;
justify-content: center;
}
.svc-tiers__note {
margin-top: 22px;
font-size: var(--fs-xs);
color: var(--c-text-3);
} @media (max-width: 1024px) {
.svc-split { grid-template-columns: 1fr; }
.svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.svc-steps::before { display: none; }
.svc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-related,
.svc-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.svc-h__grid { grid-template-columns: 1fr; }
.svc-h__art { order: -1; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 760px) {
.svc-checks { grid-template-columns: 1fr; }
.svc-scope__row { grid-template-columns: 44px minmax(0, 1fr); }
.svc-scope__text { grid-column: 2; }
.svc-h__art .hand-note { display: none; }
}
@media (max-width: 560px) {
.svc-h__grid { gap: 20px; }
.svc-h__art { max-width: 280px; }
.svc-steps { grid-template-columns: 1fr; }
.svc-metrics { grid-template-columns: 1fr; }
} .svc-split__text,
.svc-tiers__note {
max-width: 68ch;
} .stypes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: clamp(16px, 1.6vw, 24px);
}
.stype {
display: flex;
flex-direction: column;
padding: clamp(22px, 2vw, 30px);
background: var(--c-surface);
border: 1px solid var(--c-line-2);
border-radius: 4px;
transition: border-color var(--dur-main) ease, transform var(--dur-main) var(--ease-main);
}
.stype:hover {
border-color: rgba(30, 141, 233, 0.42);
transform: translateY(-3px);
}
.stype__head {
display: flex;
gap: 14px;
align-items: flex-start;
}
.stype__ico {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--c-line-2);
border-radius: var(--radius-pill);
color: var(--c-accent);
}
.stype__ico svg {
width: 18px;
height: 18px;
}
.stype__title {
margin: 0;
font-family: var(--font-ui);
font-size: var(--fs-base);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.stype__fit {
margin: 6px 0 0;
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--c-text-2);
}
.stype__scope {
margin: 20px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 9px;
}
.stype__scope li {
display: flex;
gap: 9px;
align-items: flex-start;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--c-text-2);
}
.stype__scope svg {
flex: none;
margin-top: 3px;
color: var(--c-accent);
}
.stype__facts {
margin: 20px 0 0;
display: grid;
gap: 12px;
}
.stype__facts div {
padding-top: 12px;
border-top: 1px solid var(--c-line);
}
.stype__facts dt {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-3);
}
.stype__facts dd {
margin: 4px 0 0;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--c-text-2);
}
.stype__foot {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: auto;
padding-top: 20px;
}
.stype__weight {
display: flex;
gap: 9px;
align-items: center;
margin: 0;
}
.stype__weight-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-3);
}
.stype__dots {
display: inline-flex;
gap: 4px;
}
.stype__dot {
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
background: rgba(245, 245, 245, 0.18);
}
.stype__dot.is-on {
background: var(--c-accent);
}
.stype__link {
display: inline-flex;
gap: 6px;
align-items: center;
}