.service-page { background: #f4f5f3; }
.service-hero { position: relative; min-block-size: min(48rem,calc(100vh - var(--header-height))); display: grid; align-items: center; overflow: hidden; background: #08090d; color: #fff; }
.service-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 55%,rgba(29,52,220,.34),transparent 29%), radial-gradient(circle at 82% 12%,rgba(226,90,25,.17),transparent 25%), linear-gradient(115deg,transparent 55%,rgba(20,23,38,.82)); }
.service-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(24rem,.75fr); align-items: center; gap: clamp(3rem,8vw,9rem); padding-block: clamp(5rem,9vw,9rem); direction: rtl; }
.service-hero__copy { max-inline-size: 48rem; }
.service-hero .breadcrumbs { margin-block-end: clamp(2rem,5vw,4rem); }
.service-hero__eyebrow { margin-block-end: 1rem; color: #8ea0ff; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; }
.service-hero h1 { max-inline-size: 15ch; margin: 0; font-size: clamp(2.7rem,5.7vw,6.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.service-hero__lead { max-inline-size: 42rem; margin-block-start: 1.8rem; color: rgba(255,255,255,.68); font-size: clamp(1rem,1.35vw,1.25rem); line-height: 1.9; }
.service-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-block-start: 2.2rem; }
.service-hero__jump { color: rgba(255,255,255,.72); font-size: .85rem; text-decoration: none; }
.service-hero__jump span { display: inline-block; margin-inline-start: .35rem; transition: transform 220ms ease; }
.service-hero__jump:hover span { transform: translateY(.3rem); }
.service-hero__visual { position: relative; justify-self: center; inline-size: min(34vw,28rem); aspect-ratio: 1; }
.service-hero__orbit { position: absolute; inset: 50% auto auto 50%; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: translate(-50%,-50%); }
.service-hero__orbit--one { inline-size: 100%; aspect-ratio: 1; }
.service-hero__orbit--two { inline-size: 72%; aspect-ratio: 1; border-color: rgba(102,122,255,.38); }
.service-hero__orbit--three { inline-size: 42%; aspect-ratio: 1; background: radial-gradient(circle at 40% 32%,#3145dc,#090a17 66%); border-color: rgba(255,255,255,.28); box-shadow: 0 0 6rem rgba(31,55,222,.4); }
.service-hero__code { position: absolute; inset: 50% auto auto 50%; z-index: 2; color: #fff; font-family: var(--font-mono); font-size: clamp(1.15rem,3vw,2.5rem); font-weight: 800; letter-spacing: .12em; transform: translate(-50%,-50%); }
.service-hero__trace { position: absolute; block-size: 1px; background: linear-gradient(90deg,transparent,#ea641f,transparent); transform-origin: right; }
.service-hero__trace::after { content:""; position:absolute; inset-block-start:-3px; inline-size:7px; block-size:7px; border-radius:50%; background:#ea641f; box-shadow:0 0 1rem #ea641f; }
.service-hero__trace--one { inset: 19% 45% auto -12%; inline-size: 64%; transform: rotate(-24deg); }
.service-hero__trace--two { inset: auto -8% 20% 44%; inline-size: 62%; transform: rotate(24deg); }
.service-facts { background: #101116; color: #fff; border-block-start: 1px solid rgba(255,255,255,.07); }
.service-facts__grid { display: grid; grid-template-columns: repeat(3,1fr); }
.service-fact { display: flex; align-items: center; gap: 1.1rem; min-block-size: 7rem; padding: 1.25rem clamp(1rem,3vw,2.5rem); border-inline-start: 1px solid rgba(255,255,255,.1); }
.service-fact:last-child { border-inline-end: 1px solid rgba(255,255,255,.1); }
.service-fact span { color: #7587ff; font-family: var(--font-mono); font-size: .72rem; }
.service-fact strong { font-size: clamp(.9rem,1.2vw,1.1rem); }
.service-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(19rem,25rem); align-items: start; gap: clamp(3rem,8vw,8rem); padding-block: clamp(5rem,10vw,10rem); }
.service-content { padding: 0; font-size: 1.08rem; }
.service-content > * { max-inline-size: none; margin-inline: 0; }
.service-content > .lead:first-child { margin-block: 0 4rem; padding: 2rem; border-inline-start: 3px solid #2842dd; background: #fff; color: #292d36; font-size: 1.2rem; }
.service-content h2 { position: relative; margin-block-start: 5rem; padding-block-start: 1.2rem; border-block-start: 1px solid #ced1d7; }
.service-content h2::before { content:""; position:absolute; inset-block-start:-2px; inset-inline-start:0; inline-size:5rem; block-size:3px; background:#2842dd; }
.service-content ul { display: grid; gap: .75rem; padding: 0; list-style: none; }
.service-content li { position: relative; padding: 1rem 3rem 1rem 1rem; background: #fff; border: 1px solid #e0e2e5; }
.service-content li::before { content:""; position:absolute; inset: 1.55rem 1.25rem auto auto; inline-size:.55rem; block-size:.55rem; border-radius:50%; background:#2842dd; box-shadow:0 0 0 .35rem rgba(40,66,221,.1); }
.service-aside { position: sticky; inset-block-start: calc(var(--header-height) + 2rem); padding: clamp(2rem,4vw,3.2rem); overflow: hidden; background: #101116; color: #fff; }
.service-aside::after { content:""; position:absolute; inline-size:14rem; aspect-ratio:1; inset:auto -5rem -6rem auto; border:1px solid rgba(111,130,255,.45); border-radius:50%; box-shadow:0 0 4rem rgba(32,56,220,.3); }
.service-aside__index { color:#7486ff; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; }
.service-aside h2 { position:relative; z-index:1; margin-block-start:1.3rem; font-size:clamp(1.5rem,2.3vw,2.2rem); line-height:1.45; }
.service-aside p { position:relative; z-index:1; margin-block-start:1rem; color:rgba(255,255,255,.62); line-height:1.85; }
.service-aside .btn { position:relative; z-index:1; margin-block-start:1.8rem; }
@media (max-width: 63.99em) {
  .service-hero { min-block-size: auto; }
  .service-hero__grid { grid-template-columns: 1fr; }
  .service-hero__visual { position:absolute; inset:50% auto auto -8rem; inline-size:26rem; opacity:.45; }
  .service-facts__grid { grid-template-columns:1fr; }
  .service-fact { border-inline:1px solid rgba(255,255,255,.1); border-block-end:1px solid rgba(255,255,255,.1); }
  .service-body { grid-template-columns:1fr; }
  .service-aside { position:relative; inset-block-start:auto; }
}
@media (max-width: 39.99em) {
  .service-hero h1 { font-size:2.7rem; }
  .service-hero__actions { align-items:stretch; flex-direction:column; }
  .service-hero__actions .btn { justify-content:center; }
}