.service-page {
	--service-border: rgba(61, 121, 222, 0.3);
	--service-card: linear-gradient(145deg, rgba(10, 20, 40, 0.92), rgba(3, 8, 19, 0.96));
	--service-cyan: #08c8ff;
	--service-purple: #a145ff;
	--service-glow: 0 0 24px rgba(20, 112, 255, 0.13);
	position: relative;
	overflow: hidden;
	padding-top: var(--header-height);
	background:
		radial-gradient(circle at 75% 6%, rgba(48, 54, 175, 0.13), transparent 24rem),
		radial-gradient(circle at 5% 37%, rgba(0, 123, 255, 0.07), transparent 25rem);
}

.service-page::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image:
		linear-gradient(rgba(47, 92, 178, 0.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47, 92, 178, 0.026) 1px, transparent 1px);
	background-size: 40px 40px;
	content: "";
	pointer-events: none;
	mask-image: linear-gradient(#000, transparent 86%);
}

.service-shell {
	position: relative;
	z-index: 2;
	width: min(calc(100% - 48px), 1280px);
	margin-inline: auto;
}

.service-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--service-cyan);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.065em;
	text-transform: uppercase;
}

.service-kicker::before {
	width: 18px;
	height: 1px;
	background: var(--service-cyan);
	box-shadow: -8px 0 0 rgba(8, 200, 255, 0.25);
	content: "";
}

.service-centered-heading {
	margin-bottom: 25px;
	text-align: center;
}

.service-centered-heading .service-kicker {
	justify-content: center;
}

.service-centered-heading .service-kicker::after {
	width: 18px;
	height: 1px;
	background: var(--service-cyan);
	box-shadow: 8px 0 0 rgba(8, 200, 255, 0.25);
	content: "";
}

.service-centered-heading h2,
.service-section-heading h2 {
	font-size: clamp(1.55rem, 2.5vw, 2.2rem);
	font-weight: 550;
}

.service-hero {
	position: relative;
	min-height: 535px;
	overflow: hidden;
	border-bottom: 1px solid rgba(74, 112, 188, 0.12);
}

.service-hero-grid {
	display: grid;
	min-height: 535px;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: 58px;
	padding-block: 52px 48px;
}

.service-hero-copy {
	padding-left: 36px;
}

.service-hero-copy h1 {
	max-width: 610px;
	margin-bottom: 22px;
	font-size: clamp(2.6rem, 4.55vw, 4.3rem);
	font-weight: 540;
	line-height: 1.16;
}

.service-hero-copy h1 span,
.service-cta-copy h2 span {
	background: linear-gradient(100deg, #05c7ff, #3476ff 45%, #ad45ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.service-hero-intro {
	max-width: 570px;
	margin-bottom: 24px;
	font-size: 0.94rem;
	line-height: 1.75;
}

.service-feature-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.service-feature-pill {
	display: flex;
	min-width: 145px;
	min-height: 44px;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: 6px;
	background:
		linear-gradient(#061020, #061020) padding-box,
		linear-gradient(100deg, #08bfff, #a448ff) border-box;
	box-shadow: inset 0 0 20px rgba(43, 83, 182, 0.07);
	font-size: 0.72rem;
	font-weight: 600;
}

.service-feature-pill > .icon:first-child {
	width: 21px;
	height: 21px;
	color: var(--service-cyan);
}

.service-feature-pill .pill-check {
	width: 14px;
	height: 14px;
	margin-left: auto;
	color: #a75dff;
}

.service-hero-visual {
	position: relative;
	min-width: 0;
}

.service-circuit {
	position: absolute;
	z-index: 1;
	top: 32px;
	right: -25px;
	width: 58%;
	height: 360px;
	background:
		linear-gradient(90deg, transparent 0 9%, rgba(31, 105, 255, 0.35) 9.2% 9.5%, transparent 9.7% 100%) 0 40px / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 0 26%, rgba(31, 105, 255, 0.28) 26.2% 26.5%, transparent 26.7% 100%) 0 120px / 100% 1px no-repeat,
		linear-gradient(90deg, transparent 0 42%, rgba(140, 58, 255, 0.3) 42.2% 42.5%, transparent 42.7% 100%) 0 220px / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, transparent 0 70px, rgba(39, 106, 235, 0.13) 70px 71px) 0 0 / 100% 100%;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 20% 100%, 20% 89%, 10% 89%, 10% 74%, 0 74%, 0 20%, 12% 20%);
	content: "";
	opacity: 0.7;
	pointer-events: none;
}

/* SEO dashboard visual */
.seo-dashboard {
	position: relative;
	width: min(100%, 635px);
	margin-left: auto;
	padding: 15px;
}

.dashboard-heading {
	display: flex;
	height: 39px;
	align-items: center;
	gap: 5px;
	padding: 0 15px;
	border: 1px solid var(--service-border);
	border-bottom: 0;
	border-radius: 9px 9px 0 0;
	background: rgba(8, 16, 34, 0.93);
}

.dashboard-heading span {
	margin-right: auto;
	color: #d7e1f5;
	font-size: 0.58rem;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.dashboard-heading i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #3b5b8e;
}

.dashboard-chart {
	position: relative;
	height: 225px;
	overflow: hidden;
	border: 1px solid var(--service-border);
	background:
		linear-gradient(135deg, rgba(10, 25, 53, 0.88), rgba(5, 9, 22, 0.95));
	box-shadow: var(--service-glow);
}

.chart-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(81, 122, 192, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(81, 122, 192, 0.08) 1px, transparent 1px);
	background-size: 48px 36px;
}

.dashboard-chart svg {
	position: absolute;
	right: 18px;
	bottom: 2px;
	left: 18px;
	width: calc(100% - 36px);
	height: calc(100% - 16px);
}

.chart-badge {
	position: absolute;
	top: 26px;
	right: 26px;
	display: flex;
	min-width: 112px;
	flex-direction: column;
	padding: 12px 14px;
	border: 1px solid #3697ff;
	border-radius: 5px;
	background: rgba(5, 13, 31, 0.9);
}

.chart-badge strong {
	font-size: 1rem;
	font-weight: 500;
}

.chart-badge span {
	color: #c0cbdd;
	font-size: 0.57rem;
	text-transform: uppercase;
}

.dashboard-metrics {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: -6px -22px 0;
}

.dashboard-metrics > div {
	display: flex;
	min-height: 124px;
	flex-direction: column;
	justify-content: center;
	padding: 17px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	background:
		linear-gradient(145deg, #071329, #060a18) padding-box,
		linear-gradient(115deg, #087fff, #9f42ff) border-box;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.dashboard-metrics span {
	color: #a6b1c7;
	font-size: 0.58rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dashboard-metrics strong {
	margin: 5px 0 2px;
	color: #3ce0c4;
	font-size: 1.5rem;
	font-weight: 500;
}

.dashboard-metrics small {
	color: #9aa6bb;
	font-size: 0.58rem;
}

.score-metric {
	align-items: center;
	text-align: center;
}

.score-metric b {
	display: grid;
	width: 64px;
	height: 50px;
	margin: 3px auto 0;
	border-top: 8px solid #268dff;
	border-right: 8px solid #9850ff;
	border-radius: 50%;
	font-size: 1.35rem;
	font-weight: 500;
	place-items: center;
}

/* Web development hero visual */
.web-visual {
	position: relative;
	width: min(100%, 650px);
	height: 390px;
	margin-left: auto;
	perspective: 900px;
}

.web-laptop {
	position: absolute;
	top: 60px;
	right: 32px;
	width: 520px;
	filter: drop-shadow(0 28px 34px rgba(22, 38, 154, 0.36));
}

.laptop-screen {
	position: relative;
	height: 260px;
	overflow: hidden;
	border: 2px solid #4777ff;
	border-radius: 13px 13px 5px 5px;
	background:
		linear-gradient(rgba(30, 68, 148, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(30, 68, 148, 0.12) 1px, transparent 1px),
		#06122b;
	background-size: 32px 28px;
	box-shadow: inset 0 0 50px rgba(37, 79, 255, 0.12), 0 0 32px rgba(38, 89, 255, 0.18);
	transform: rotateX(-2deg);
}

.laptop-screen::before {
	position: absolute;
	top: 12px;
	right: 12px;
	left: 12px;
	height: 13px;
	border-radius: 7px;
	background: #101e42;
	content: "";
}

.code-lines {
	position: absolute;
	top: 58px;
	left: 40px;
	display: grid;
	width: 210px;
	gap: 12px;
}

.code-lines i {
	height: 5px;
	border-radius: 5px;
	background: linear-gradient(90deg, #08bfff 0 20%, #c14dff 20% 33%, #3974ff 33% 68%, transparent 68%);
}

.code-lines i:nth-child(2n) {
	margin-left: 22px;
	background: linear-gradient(90deg, #ff5e8a 0 16%, #0dc6ff 16% 42%, #8b52ff 42% 78%, transparent 78%);
}

.screen-window {
	position: absolute;
	right: 33px;
	bottom: 31px;
	width: 165px;
	height: 112px;
	border: 1px solid #7165ff;
	border-radius: 8px;
	background: rgba(9, 18, 44, 0.96);
	box-shadow: 0 0 24px rgba(60, 63, 255, 0.2);
}

.screen-window div {
	position: absolute;
	inset: 26px 18px 22px;
	background: linear-gradient(135deg, transparent 35%, #4d83ff 36% 60%, #8c4dff 61%);
	clip-path: polygon(0 100%, 0 56%, 28% 29%, 49% 54%, 67% 18%, 100% 72%, 100% 100%);
}

.screen-window span {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #5579c7;
	box-shadow: 10px 0 #5579c7, 20px 0 #5579c7;
}

.laptop-base {
	width: 570px;
	height: 28px;
	margin-left: -25px;
	border: 1px solid #4866ee;
	border-radius: 2px 2px 50% 50%;
	background: linear-gradient(#101c49, #060d27);
	transform: perspective(200px) rotateX(40deg);
}

.web-code-icon {
	position: absolute;
	z-index: 3;
	top: 30px;
	left: 13px;
	display: grid;
	width: 82px;
	height: 82px;
	border: 1px solid #3f91ff;
	border-radius: 8px;
	background: rgba(7, 18, 44, 0.95);
	color: var(--service-cyan);
	box-shadow: 0 0 24px rgba(43, 107, 255, 0.2);
	place-items: center;
}

.web-code-icon .icon {
	width: 48px;
	height: 48px;
}

.performance-card {
	position: absolute;
	z-index: 4;
	right: -5px;
	bottom: 12px;
	display: grid;
	width: 215px;
	height: 143px;
	grid-template-columns: 1fr 65px;
	padding: 17px;
	border: 1px solid #3f83ff;
	border-radius: 8px;
	background: rgba(7, 15, 35, 0.95);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.performance-card > span {
	grid-column: 1 / -1;
	color: #bdc9dd;
	font-size: 0.58rem;
	text-transform: uppercase;
}

.performance-ring {
	display: grid;
	width: 74px;
	height: 74px;
	border: 8px solid #387fff;
	border-right-color: #9e51ff;
	border-radius: 50%;
	place-items: center;
}

.performance-ring strong {
	font-size: 1.55rem;
	font-weight: 500;
}

.performance-bars {
	display: flex;
	align-items: end;
	gap: 5px;
	padding-bottom: 7px;
}

.performance-bars i {
	width: 8px;
	height: 22px;
	background: #1a65ff;
}

.performance-bars i:nth-child(2) { height: 39px; background: #8f4cff; }
.performance-bars i:nth-child(3) { height: 31px; background: #2c8cff; }
.performance-bars i:nth-child(4) { height: 52px; background: #0dc7ff; }

/* Framed sections */
.service-panel {
	position: relative;
	z-index: 2;
	margin-top: 12px;
}

.service-panel > .service-shell {
	padding: 27px 38px 32px;
	border: 1px solid rgba(60, 113, 207, 0.24);
	border-radius: 14px;
	background:
		linear-gradient(135deg, rgba(5, 12, 28, 0.8), rgba(2, 7, 17, 0.9));
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.015);
}

.service-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 24px;
}

.service-section-heading > p {
	max-width: 410px;
	margin-bottom: 4px;
	font-size: 0.75rem;
	line-height: 1.65;
}

.service-offer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.service-offer-card {
	position: relative;
	display: flex;
	min-height: 260px;
	flex-direction: column;
	padding: 25px 24px 22px;
	border: 1px solid var(--service-border);
	border-radius: 13px;
	background: var(--service-card);
	box-shadow: inset 0 0 30px rgba(32, 75, 171, 0.05);
	transition: 180ms ease;
}

.service-offer-card:hover,
.service-why-card:hover {
	border-color: rgba(112, 71, 255, 0.65);
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34), 0 0 25px rgba(62, 78, 255, 0.08);
	transform: translateY(-3px);
}

.service-neon-icon {
	display: grid;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	background:
		linear-gradient(#0a1831, #071126) padding-box,
		linear-gradient(135deg, #05c8ff, #a846ff) border-box;
	color: #15bfff;
	box-shadow: inset 0 0 16px rgba(48, 93, 255, 0.15), 0 0 16px rgba(62, 68, 255, 0.12);
	place-items: center;
}

.service-neon-icon .icon {
	width: 34px;
	height: 34px;
	filter: drop-shadow(0 0 6px currentColor);
}

.service-offer-card:nth-child(2n) .service-neon-icon,
.service-why-card:nth-child(2n) .service-neon-icon {
	color: #a54dff;
}

.service-offer-card h3 {
	margin-bottom: 9px;
	font-size: 1rem;
}

.service-offer-card p {
	margin-bottom: 15px;
	font-size: 0.75rem;
	line-height: 1.65;
}

.service-offer-card a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--service-cyan);
	font-size: 0.72rem;
}

.service-offer-card a .icon {
	width: 13px;
	transition: transform 160ms ease;
}

.service-offer-card a:hover .icon {
	transform: translateX(4px);
}

/* Process */
.service-process-panel > .service-shell {
	padding-bottom: 25px;
}

.service-process-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.service-process-list::before {
	position: absolute;
	top: 38px;
	right: 8%;
	left: 8%;
	border-top: 2px dotted rgba(34, 127, 255, 0.6);
	content: "";
}

.service-process-list li {
	position: relative;
	z-index: 2;
	padding: 0 13px;
	text-align: center;
}

.service-process-icon {
	position: relative;
	display: grid;
	width: 76px;
	height: 76px;
	margin: 0 auto 14px;
	border: 1px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(#050b18, #050b18) padding-box,
		linear-gradient(135deg, #05c8ff, #a846ff) border-box;
	color: #17bdff;
	box-shadow: 0 0 25px rgba(54, 69, 255, 0.16);
	place-items: center;
}

.service-process-icon .icon {
	width: 38px;
	height: 38px;
	filter: drop-shadow(0 0 6px currentColor);
}

.service-process-icon span {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	width: 26px;
	height: 26px;
	border: 1px solid #8951ff;
	border-radius: 50%;
	background: #071025;
	color: #c8b5ff;
	font-size: 0.58rem;
	place-items: center;
}

.service-process-list h3 {
	margin-bottom: 9px;
	font-size: 0.88rem;
}

.service-process-list p {
	max-width: 200px;
	margin: 0 auto;
	font-size: 0.68rem;
	line-height: 1.55;
}

/* Tools */
.service-tools-panel > .service-shell {
	padding-bottom: 27px;
}

.service-tools-grid {
	display: grid;
	gap: 10px;
}

.service-tools-seo {
	grid-template-columns: repeat(5, 1fr);
}

.service-tools-web {
	grid-template-columns: repeat(10, 1fr);
}

.service-tool {
	display: flex;
	min-height: 72px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px;
	border: 1px solid rgba(58, 106, 190, 0.32);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(9, 20, 41, 0.88), rgba(3, 8, 19, 0.95));
	text-align: center;
	transition: 160ms ease;
}

.service-tool:hover {
	border-color: #387cff;
	transform: translateY(-2px);
}

.service-tool strong {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.service-tool span {
	color: #afb9cc;
	font-size: 0.65rem;
}

.service-tools-web .service-tool {
	min-height: 94px;
	flex-direction: column;
}

.service-tools-web .service-tool strong {
	display: grid;
	width: 45px;
	height: 45px;
	border-radius: 8px;
	background: #101a31;
	color: #47a2ff;
	font-size: 0.8rem;
	place-items: center;
}

.service-tool-html strong { background: #e9572b !important; color: white !important; }
.service-tool-css strong { background: #2674e8 !important; color: white !important; }
.service-tool-javascript strong { background: #f3d31b !important; color: #151515 !important; }
.service-tool-react strong { color: #54d2ff !important; font-size: 0.68rem !important; border: 1px solid #54d2ff; border-radius: 50% !important; }
.service-tool-next strong { background: #090909 !important; color: #fff !important; border: 1px solid #777; border-radius: 50% !important; }
.service-tool-node strong { color: #76d32a !important; border: 1px solid #76d32a; }
.service-tool-php strong { width: 52px !important; height: 34px !important; border-radius: 50% !important; background: #5863a8 !important; color: #fff !important; }
.service-tool-wordpress strong { border: 1px solid #7cc8ff; border-radius: 50% !important; color: #7cc8ff !important; }
.service-tool-webflow strong { color: #4e82ff !important; font-size: 1.2rem !important; font-style: italic; }
.service-tool-mysql strong { color: #6ebcff !important; font-size: 0.65rem !important; }

.service-tool-google strong { color: #58a5ff; }
.service-tool-ga4 strong { color: #ff9a1f; }
.service-tool-semrush strong { color: #ff6b10; }
.service-tool-ahrefs strong { color: #4ca0ff; }
.service-tool-frog strong { color: #8cd42e; font-size: 0.78rem; }
.service-tool-pagespeed strong { color: #d8e8ff; }
.service-tool-gtmetrix strong { color: #71c8ff; }
.service-tool-moz strong { color: #28a7e8; font-size: 1.25rem; }

/* Why choose */
.service-why-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.service-why-card {
	position: relative;
	display: flex;
	min-height: 145px;
	gap: 12px;
	padding: 20px 16px;
	border: 1px solid var(--service-border);
	border-radius: 9px;
	background: var(--service-card);
	transition: 180ms ease;
}

.service-why-card .service-neon-icon {
	width: 43px;
	height: 43px;
	flex: 0 0 43px;
	margin: 0;
}

.service-why-card .service-neon-icon .icon {
	width: 25px;
	height: 25px;
}

.service-why-card h3 {
	margin: 1px 0 6px;
	font-size: 0.78rem;
}

.service-why-card p {
	margin: 0;
	font-size: 0.64rem;
	line-height: 1.5;
}

.why-check {
	display: none;
}

/* CTA */
.service-cta-section {
	position: relative;
	z-index: 2;
	padding: 16px 0 24px;
}

.service-cta-card {
	display: grid;
	min-height: 138px;
	grid-template-columns: 82px 1fr minmax(300px, 0.65fr);
	align-items: center;
	gap: 28px;
	padding: 22px 30px;
	border: 1px solid transparent;
	border-radius: 12px;
	background:
		linear-gradient(105deg, rgba(5, 12, 31, 0.98), rgba(30, 10, 66, 0.94)) padding-box,
		linear-gradient(100deg, #0d95ff, #a33fff) border-box;
	box-shadow: inset 0 0 60px rgba(80, 40, 200, 0.08);
}

.service-cta-icon {
	display: grid;
	width: 68px;
	height: 68px;
	border: 1px solid transparent;
	border-radius: 12px;
	background:
		linear-gradient(#0b1834, #081127) padding-box,
		linear-gradient(130deg, #0bc6ff, #a448ff) border-box;
	color: #31baff;
	place-items: center;
}

.service-cta-icon .icon {
	width: 39px;
	height: 39px;
}

.service-cta-copy > p {
	margin-bottom: 5px;
	color: #c2ccdd;
	font-size: 0.88rem;
}

.service-cta-copy h2 {
	max-width: 610px;
	margin: 0;
	font-size: clamp(1.45rem, 2.3vw, 2.05rem);
	font-weight: 500;
	line-height: 1.35;
}

.service-cta-action .button {
	width: 100%;
}

.service-cta-action ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 22px;
	margin: 11px 0 0;
	padding: 0;
	list-style: none;
}

.service-cta-action li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #b4bed0;
	font-size: 0.63rem;
}

.service-cta-action li .icon {
	width: 14px;
	height: 14px;
	padding: 2px;
	border: 1px solid var(--service-cyan);
	border-radius: 50%;
	color: var(--service-cyan);
}

/* Service-page footer adjustments */
.single-services .site-footer {
	position: relative;
	z-index: 2;
	padding-top: 14px;
}

.single-services .site-navigation .current-menu-item > a,
.single-services .site-navigation a[href*="#services"] {
	color: #fff;
}

.single-services .site-navigation a[href*="#services"]::after {
	right: 0;
	left: 0;
}

@media (max-width: 1080px) {
	.service-hero-grid {
		gap: 30px;
	}

	.service-hero-copy {
		padding-left: 0;
	}

	.web-laptop {
		right: 5px;
		width: 450px;
	}

	.laptop-base {
		width: 500px;
	}

	.service-tools-web {
		grid-template-columns: repeat(5, 1fr);
	}

	.service-why-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.service-shell {
		width: min(calc(100% - 32px), 760px);
	}

	.service-hero-grid {
		grid-template-columns: 1fr;
		padding-top: 42px;
	}

	.service-hero-copy {
		max-width: 670px;
	}

	.service-hero-visual {
		width: 100%;
	}

	.seo-dashboard {
		margin-inline: auto;
	}

	.web-visual {
		margin-inline: auto;
	}

	.service-offer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-process-list {
		grid-template-columns: 1fr;
		margin-top: 18px;
	}

	.service-process-list::before {
		top: 34px;
		bottom: 42px;
		left: 38px;
		width: 0;
		border-top: 0;
		border-left: 2px dotted rgba(34, 127, 255, 0.6);
	}

	.service-process-list li {
		display: grid;
		grid-template-columns: 76px 1fr;
		align-items: center;
		gap: 22px;
		padding: 0 0 14px;
		text-align: left;
	}

	.service-process-icon {
		margin: 0;
	}

	.service-process-list p {
		max-width: none;
		margin: 0;
	}

	.service-tools-seo {
		grid-template-columns: repeat(3, 1fr);
	}

	.service-cta-card {
		grid-template-columns: 68px 1fr;
	}

	.service-cta-action {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.service-page {
		padding-top: var(--header-height);
	}

	.service-shell {
		width: min(calc(100% - 28px), 470px);
	}

	.service-kicker {
		font-size: 0.62rem;
	}

	.service-hero {
		min-height: 0;
	}

	.service-hero-grid {
		min-height: 0;
		gap: 20px;
		padding: 29px 0 24px;
	}

	.service-hero-copy h1 {
		margin-bottom: 18px;
		font-size: clamp(2.15rem, 10.3vw, 3.15rem);
		line-height: 1.15;
	}

	.service-hero-intro {
		margin-bottom: 20px;
		font-size: 0.8rem;
		line-height: 1.65;
	}

	.service-feature-pills {
		display: grid;
	}

	.service-feature-pill {
		min-height: 48px;
	}

	.service-circuit {
		top: 300px;
		right: -120px;
		width: 520px;
		height: 320px;
		opacity: 0.45;
	}

	.seo-dashboard {
		padding: 7px 0 0;
	}

	.dashboard-chart {
		height: 180px;
		border-radius: 8px;
	}

	.dashboard-heading {
		display: none;
	}

	.chart-badge {
		top: 14px;
		right: 13px;
		min-width: 97px;
		padding: 8px 10px;
	}

	.dashboard-metrics {
		gap: 7px;
		margin: 8px 0 0;
	}

	.dashboard-metrics > div {
		min-height: 112px;
		padding: 12px 7px;
		text-align: center;
	}

	.dashboard-metrics span {
		font-size: 0.48rem;
	}

	.dashboard-metrics strong {
		font-size: 1.12rem;
	}

	.dashboard-metrics small {
		font-size: 0.48rem;
	}

	.score-metric b {
		width: 54px;
		height: 43px;
		border-width: 6px;
		font-size: 1.1rem;
	}

	.web-visual {
		height: 315px;
	}

	.web-laptop {
		top: 52px;
		right: -31px;
		width: 395px;
	}

	.laptop-screen {
		height: 215px;
	}

	.laptop-base {
		width: 430px;
	}

	.web-code-icon {
		top: 27px;
		left: 5px;
		width: 62px;
		height: 62px;
	}

	.web-code-icon .icon {
		width: 37px;
		height: 37px;
	}

	.performance-card {
		right: 0;
		bottom: -3px;
		width: 170px;
		height: 117px;
		padding: 12px;
	}

	.performance-ring {
		width: 58px;
		height: 58px;
		border-width: 6px;
	}

	.performance-ring strong {
		font-size: 1.22rem;
	}

	.service-panel {
		margin-top: 8px;
	}

	.service-panel > .service-shell {
		width: min(calc(100% - 18px), 500px);
		padding: 24px 10px 26px;
		border-radius: 12px;
	}

	.service-section-heading {
		display: block;
		margin-bottom: 19px;
		text-align: center;
	}

	.service-section-heading .service-kicker {
		justify-content: center;
	}

	.service-section-heading > p {
		display: none;
	}

	.service-section-heading h2,
	.service-centered-heading h2 {
		font-size: 1.42rem;
	}

	.service-offer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.service-offer-card {
		min-height: 245px;
		padding: 15px 12px 13px;
		border-radius: 10px;
	}

	.service-neon-icon {
		width: 49px;
		height: 49px;
		margin-bottom: 12px;
	}

	.service-neon-icon .icon {
		width: 29px;
		height: 29px;
	}

	.service-offer-card h3 {
		font-size: 0.82rem;
		line-height: 1.32;
	}

	.service-offer-card p {
		font-size: 0.62rem;
		line-height: 1.55;
	}

	.service-offer-card a {
		align-self: flex-end;
		display: grid;
		width: 28px;
		height: 28px;
		border: 1px solid var(--service-cyan);
		border-radius: 50%;
		place-items: center;
	}

	.service-offer-card a .desktop-link {
		display: none;
	}

	.service-process-panel > .service-shell {
		padding-inline: 18px;
	}

	.service-process-list::before {
		left: 25px;
	}

	.service-process-list li {
		grid-template-columns: 52px 1fr;
		gap: 13px;
		padding-bottom: 9px;
	}

	.service-process-icon {
		width: 52px;
		height: 52px;
	}

	.service-process-icon .icon {
		width: 24px;
		height: 24px;
	}

	.service-process-icon span {
		top: -5px;
		right: -5px;
		bottom: auto;
		width: 20px;
		height: 20px;
		font-size: 0.48rem;
	}

	.service-process-list li > div:last-child {
		padding: 12px;
		border: 1px solid rgba(55, 108, 203, 0.28);
		border-radius: 8px;
		background: rgba(7, 16, 33, 0.72);
	}

	.service-process-list h3 {
		margin-bottom: 4px;
		font-size: 0.76rem;
	}

	.service-process-list p {
		font-size: 0.58rem;
		line-height: 1.5;
	}

	.service-tools-panel > .service-shell {
		padding-inline: 10px;
	}

	.service-tools-seo,
	.service-tools-web {
		grid-template-columns: repeat(2, 1fr);
		gap: 7px;
	}

	.service-tool {
		min-height: 68px;
	}

	.service-tools-web .service-tool {
		min-height: 92px;
	}

	.service-why-panel > .service-shell {
		padding-inline: 10px;
	}

	.service-why-grid {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.service-why-card {
		min-height: 0;
		align-items: center;
		padding: 13px 11px;
	}

	.service-why-card .service-neon-icon {
		width: 48px;
		height: 48px;
		flex-basis: 48px;
	}

	.service-why-card h3 {
		font-size: 0.75rem;
	}

	.service-why-card p {
		font-size: 0.59rem;
	}

	.why-check {
		display: block;
		width: 17px;
		height: 17px;
		margin-left: auto;
		padding: 2px;
		border: 1px solid #a450ff;
		border-radius: 50%;
		color: #b563ff;
	}

	.service-cta-section {
		padding: 10px 0 25px;
	}

	.service-cta-card {
		display: block;
		padding: 24px 20px;
	}

	.service-cta-icon {
		display: none;
	}

	.service-cta-copy > p {
		font-size: 0.72rem;
	}

	.service-cta-copy h2 {
		margin-bottom: 18px;
		font-size: 1.55rem;
	}

	.service-cta-action ul {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
}

@media (max-width: 370px) {
	.service-offer-card {
		min-height: 265px;
	}

	.service-offer-card h3 {
		font-size: 0.76rem;
	}
}