.svc,
.svc * { box-sizing: border-box; }
.svc { position: relative; overflow: clip; padding: clamp(4.5rem, 9vw, 7rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); color: #fff; font-family: inherit; background: radial-gradient(900px 520px at 88% 0%, rgba(74,31,224,.85), transparent 62%), radial-gradient(800px 600px at 0% 100%, #2a0f86, transparent 65%), linear-gradient(180deg, #14083f, #1c0b5e 55%, #14083f); }
.svc::before { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); content: ""; pointer-events: none; }
.svc-in { position: relative; max-width: 1120px; margin: 0 auto; }
.sv-head { max-width: 40rem; margin-bottom: 3rem; }
.sv-eye { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: #b6ff3c; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.sv-eye::before { width: 26px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.sv-head h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.06; font-weight: 600; }
.sv-head h2 em { color: #b6ff3c; font-style: normal; }
.sv-head p { margin: 0; color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.6; }
.svc .stack { position: relative; }
.svc .sk { --ac: #4a1fe0; --tint: #efeaff; position: sticky; top: calc(9vh + var(--i) * 22px); display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); min-height: 470px; margin-bottom: 16vh; padding: clamp(1.4rem, 2.6vw, 2.2rem); overflow: hidden; transform: none; border-radius: 30px; background: #fff; color: #14122b; box-shadow: 0 40px 80px -40px rgba(5,0,40,.8); opacity: 1; }
.svc .sk.in { animation: svc-card-enter .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes svc-card-enter {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: none; }
}
.svc .sk:last-child { margin-bottom: 0; }
.svc .sk.t2 { --ac: #0f9d8a; --tint: #def5f1; grid-template-columns: 1.15fr .85fr; }
.svc .sk.t3 { --ac: #d9820a; --tint: #fff0d9; }
.svc .sk.t4 { --ac: #2f5bea; --tint: #e3ebff; grid-template-columns: 1.15fr .85fr; }
.svc .sk.t2 .img, .svc .sk.t4 .img { order: -1; }
.svc .bn { position: absolute; right: 1.4rem; bottom: 0.2rem; color: var(--ac); font-size: clamp(4rem, 8vw, 7rem); font-weight: 700; line-height: 1; opacity: 0.09; pointer-events: none; }
.svc .sk.t2 .bn, .svc .sk.t4 .bn { right: auto; left: 1.4rem; }
.svc .txt, .svc .img { position: relative; min-width: 0; }
.svc .tag { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ac); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.svc .tag::before { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); content: ""; }
.svc .sk h3 { margin: 0.8rem 0 1.3rem; font-size: clamp(1.55rem, 2.5vw, 2.2rem); line-height: 1.1; font-weight: 600; }
.svc .cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.7rem; padding: 0.85rem 1.45rem; border-radius: 12px; background: #b6ff3c; color: #14122b; font-weight: 600; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.svc .cta span { transition: transform .25s; }
.svc .cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(120,200,0,.7); }
.svc .cta:hover span { transform: translateX(5px); }
.svc .cta:focus-visible { outline: 3px solid #14122b; outline-offset: 4px; }
.svc .pts { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.svc .pts li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.94rem; font-weight: 500; line-height: 1.35; }
.svc .ck { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--ac); font-size: 0.82rem; }
.svc .l1, .svc .l4 { grid-template-columns: 1fr 1fr; }
.svc .l1 li, .svc .l4 li { min-height: 52px; padding: 0.65rem; border: 1px solid #ece9f8; border-radius: 13px; background: #fbfaff; font-size: 0.86rem; }
.svc .l2 li, .svc .l3 li { padding: 0.65rem 0; border-bottom: 1px solid #eeebf6; }
.svc .l3 { counter-reset: service-step; }
.svc .l3 li { counter-increment: service-step; }
.svc .l3 li::after { margin-left: auto; color: var(--ac); content: "0" counter(service-step); font-size: 0.78rem; font-weight: 700; }
.svc .shot { position: relative; width: 100%; aspect-ratio: 1.28 / 1; overflow: hidden; border-radius: 24px; background: radial-gradient(120% 75% at 50% 0%, #7a2cff, #5116e0 38%, #2b0c8c); color: #fff; font-size: clamp(7px, 1.05vw, 13px); }
.svc .shot.s2 { background: radial-gradient(70% 60% at 88% 100%, rgba(40,220,200,.5), transparent 62%), radial-gradient(120% 75% at 50% 0%, #5877ff, #4a1ee0 42%, #230a7a); }
.svc .shot.s3 { background: radial-gradient(80% 60% at 8% 100%, rgba(255,80,170,.55), transparent 62%), radial-gradient(120% 75% at 50% 0%, #8a2cff, #5a16e0 42%, #2b0c8c); }
.svc .shot.s4 { background: radial-gradient(120% 75% at 50% 0%, #4a6dff, #2a22c8 42%, #0f0a55); }
.svc .shot.s4 .win { left: 4%; top: 4%; width: 92%; height: 92%; }
.svc .win { position: absolute; left: 9%; top: 14%; width: 108%; height: 110%; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 0.9em; background: #15141b; box-shadow: 0 2em 4em -1em rgba(0,0,0,.6); opacity: 1; transform: none; }
.svc .sk.in .win { animation: svc-preview-enter 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes svc-preview-enter {
	from { opacity: 0; transform: translateY(7%); }
	to { opacity: 1; transform: none; }
}
.svc .wtop { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 1em; border-bottom: 1px solid #25242e; color: #cfcde0; font-size: 0.85em; white-space: nowrap; }
.svc .lg { width: 1.5em; height: 1.5em; border-radius: 0.45em; background: conic-gradient(from 200deg, #6a3dff, #b6ff3c, #6a3dff); }
.svc .wbody { display: grid; grid-template-columns: 27% 1fr; height: calc(100% - 3em); }
.svc .wside { display: grid; align-content: start; gap: 0.3em; padding: 1em 0.8em; border-right: 1px solid #25242e; color: #d6d4e6; font-size: 0.84em; }
.svc .srch { margin-bottom: 0.5em; padding: 0.5em; border: 1px solid #2e2d39; border-radius: 0.6em; color: #8c89a3; }
.svc .si { padding: 0.55em; border-radius: 0.6em; }
.svc .si.on { background: #4b2fb0; color: #fff; }
.svc .wmain { min-width: 0; padding: 1em 1.1em; }
.svc .wmain h4 { margin: 0 0 0.7em; font-size: 1.4em; }
.svc .grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55em; margin-bottom: 0.6em; }
.svc .tile { min-width: 0; padding: 0.75em; border: 1px solid #2b2a35; border-radius: 0.7em; background: #1b1a23; }
.svc .tile small { display: block; margin-bottom: 0.4em; color: #cfcde0; font-size: 0.78em; }
.svc .tile b { display: block; font-size: 1.25em; }
.svc .tile svg { display: block; width: 100%; height: 2.4em; }
.svc .tile svg path { fill: none; stroke: #b6ff3c; stroke-width: 2; stroke-linecap: round; }
.svc .chart { position: relative; height: 9em; overflow: hidden; }
.svc .chart-bars { display: flex; align-items: flex-end; gap: 0.45em; height: 6em; }
.svc .chart-bars i { flex: 1; height: var(--h); border-radius: 0.25em 0.25em 0 0; background: linear-gradient(#b6ff3c, #5d8f12); transform: none; transform-origin: bottom; }
.svc .sk.in .chart-bars i { animation: svc-bar-enter .8s ease both; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes svc-bar-enter {
	from { transform: scaleY(0); }
	to { transform: none; }
}
.svc .glass { position: absolute; z-index: 3; width: 56%; padding: 1.1em; border: 1px solid rgba(255,255,255,.22); border-radius: 1.2em; background: rgba(58,54,72,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2em 3.5em -1.2em rgba(0,0,0,.65); color: #fff; opacity: 1; transform: none; }
.svc .sk.in .glass { animation: svc-glass-enter 1s cubic-bezier(.2,.9,.3,1.15) .3s both; }
@keyframes svc-glass-enter {
	from { opacity: 0; transform: translateY(16%) scale(.92); }
	to { opacity: 1; transform: none; }
}
.svc .glass h5 { margin: 0 0 0.8em; font-size: 1.35em; font-weight: 500; }
.svc .g1 { left: 4%; top: 56%; }
.svc .g2 { right: 3%; bottom: 7%; }
.svc .g3 { right: 4%; top: 7%; width: 42%; }
.svc .g3 strong { display: block; color: #b6ff3c; font-size: 2.2em; }
.svc .g4 { right: 4%; bottom: 5%; width: 52%; }
.svc .gauge { display: grid; place-items: center; width: 5em; height: 5em; margin: 0 auto 0.6em; border: 0.55em solid rgba(255,255,255,.25); border-right-color: #b6ff3c; border-top-color: #b6ff3c; border-radius: 50%; color: #fff; font-size: 1.2em; }
.svc .gchips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.svc .gchips span { padding: 0.35em 0.65em; border: 1px solid rgba(182,255,60,.3); border-radius: 99px; background: rgba(182,255,60,.16); color: #d6ff8a; font-size: 0.78em; font-weight: 600; }
.svc .chat { display: grid; gap: 0.8em; padding: 1em; }
.svc .chat-head { display: flex; align-items: center; gap: 0.7em; padding-bottom: 0.8em; border-bottom: 1px solid #25242e; }
.svc .chat-head > i { width: 2.4em; height: 2.4em; border-radius: 50%; background: conic-gradient(from 200deg, #6a3dff, #b6ff3c, #6a3dff); }
.svc .chat-head b, .svc .chat-head small { display: block; }
.svc .chat-head small { margin-top: 0.2em; color: #9d9ab4; font-size: 0.78em; }
.svc .bubble { max-width: 88%; padding: 0.8em 1em; border-radius: 1em; font-size: 0.9em; line-height: 1.45; }
.svc .bubble.user { justify-self: end; background: #5a32e6; }
.svc .bubble.answer { display: grid; gap: 0.6em; background: #22212c; }
.svc .lead-row { display: flex; align-items: center; gap: 0.5em; padding: 0.55em; border: 1px solid #34323f; border-radius: 0.6em; background: #1a1922; font-size: 0.8em; }
.svc .lead-row i { width: 1em; height: 1em; border-radius: 50%; background: #8e6bff; }
.svc .lead-row b { margin-left: auto; color: #b6ff3c; font-size: 0.8em; }
.svc .input { display: flex; justify-content: space-between; padding: 0.7em 0.9em; border: 1px solid #34323f; border-radius: 0.8em; color: #8c89a3; font-size: 0.82em; }
.svc .input i { color: #b6ff3c; font-style: normal; }
.svc .steps { display: grid; gap: 0.75em; margin: 0; padding: 0; list-style: none; font-size: 0.9em; }
.svc .steps li::before { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; margin-right: 0.6em; border: 2px solid #b6ff3c; border-radius: 50%; color: #b6ff3c; content: "✓"; }
.svc .steps li.running::before { content: "•"; }
.svc .funnel { display: grid; justify-items: center; gap: 0.35em; margin-bottom: 0.6em; }
.svc .funnel div { display: flex; justify-content: space-between; width: 100%; padding: 0.55em 0.7em; border-radius: 0.4em; background: #292735; font-size: 0.78em; }
.svc .funnel div:nth-child(2) { width: 86%; }
.svc .funnel div:nth-child(3) { width: 70%; }
.svc .funnel div:nth-child(4) { width: 56%; background: #3d3a4d; }
.svc .pipeline { display: grid; grid-template-columns: 0.8fr 0.3fr 1fr 0.3fr 1fr 0.3fr 0.8fr; align-items: center; gap: 0.25em; padding: 1em 0.7em; }
.svc .source-list { display: grid; gap: 0.5em; }
.svc .source-list span, .svc .pipe-core { padding: 0.55em 0.35em; border: 1px solid #3d3b4c; border-radius: 0.5em; background: #22212c; color: #e6e4f2; font-size: 0.7em; text-align: center; }
.svc .pipe-core { background: #4b2fb0; border-color: #8e6bff; }
.svc .pipe-core.warehouse { background: #1f3a14; border-color: #b6ff3c; }
.svc .pipe-lines { display: grid; gap: 0.65em; }
.svc .pipe-lines i { height: 2px; background: #b6ff3c; box-shadow: 0 0 8px rgba(182,255,60,.7); }
.svc .pipe-lines.one i { height: 3px; }
.svc .quality { display: grid; gap: 0.5em; margin: 0 1em; padding: 0.8em; border: 1px solid #34323f; border-radius: 0.6em; background: #1b1a23; color: #cfcde0; font-size: 0.78em; }
.svc .quality b { color: #fff; }
.svc .quality span::first-letter { color: #b6ff3c; }
.svc .run { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 0.85em; }
.svc .run b { min-width: 5em; padding: 0.25em 0.5em; border-radius: 99px; background: #b6ff3c; color: #14122b; font-size: 0.72em; text-align: center; }
.svc .run b.running { background: #8e6bff; color: #fff; }
.svc .g4 small { display: block; margin-top: 0.8em; color: #aaa7bf; font-size: 0.72em; }
.svc .upt { display: flex; align-items: flex-end; gap: 0.25em; height: 2.2em; margin-top: 0.4em; }
.svc .upt i { flex: 1; height: 85%; border-radius: 0.15em; background: #b6ff3c; }

@media (max-width: 900px) {
	.svc { padding-right: 1rem; padding-left: 1rem; }
	.sv-head { margin-bottom: 2rem; }
	.svc .sk {
		position: sticky;
		top: calc(5vh + var(--i) * 12px);
		grid-template-columns: 0.88fr 1.12fr;
		gap: 0.85rem;
		min-height: 410px;
		margin-bottom: 10vh;
		padding: 1rem;
	}
	.svc .sk.t2, .svc .sk.t4 { grid-template-columns: 1.12fr 0.88fr; }
	.svc .sk h3 { margin: 0.55rem 0 0.75rem; font-size: clamp(1rem, 2.7vw, 1.5rem); }
	.svc .tag { gap: 0.35rem; font-size: 0.62rem; letter-spacing: 0.05em; }
	.svc .tag::before { width: 6px; height: 6px; }
	.svc .pts { gap: 0.3rem; }
	.svc .pts li { gap: 0.4rem; font-size: 0.72rem; }
	.svc .ck { width: 18px; height: 18px; }
	.svc .l1, .svc .l4 { grid-template-columns: 1fr; }
	.svc .l1 li, .svc .l4 li { min-height: 0; padding: 0.4rem; font-size: 0.68rem; }
	.svc .cta { gap: 0.35rem; margin-top: 0.8rem; padding: 0.6rem 0.7rem; font-size: 0.68rem; }
	.svc .shot { font-size: clamp(5px, 1.5vw, 9px); border-radius: 16px; }
	.svc .glass { padding: 0.75em; }
	.svc .glass h5 { font-size: 1em; }
}

@media (max-width: 420px) {
	.svc .sk { gap: 0.6rem; padding: 0.75rem; }
	.svc .pts li { font-size: 0.68rem; }
	.svc .cta { padding: 0.55rem; font-size: 0.64rem; }
}

@media (max-width: 620px) {
	.svc .sk.t4 { grid-template-columns: minmax(0, 1fr); }
	.svc .sk.t4 .img { order: 0; }
	.svc .shot.s4 { aspect-ratio: 1.35 / 1; font-size: clamp(8px, 2.2vw, 11px); }
}

@media (prefers-reduced-motion: reduce) {
	.svc .sk, .svc .win, .svc .glass { opacity: 1; transform: none; transition: none; animation: none !important; }
	.svc .chart-bars i { transform: none; transition: none; }
}