*, *::before, *::after { box-sizing: border-box; }

:root {
	--gs-navy: #000D1B;
	--gs-blue: #0351FF;
	--gs-blue-mid: #23A3FE;
	--gs-yellow: #FFC837;
	--gs-white: #FFFFFF;
	--gs-muted: #717171;
	--gs-pale: #EDF3FA;
	--gs-gray: #F2F4F7;
	--gs-border: #E8EEEF;
	--gs-island: linear-gradient(180deg, #0351FF 0%, #23A3FE 50%, #0351FF 100%);
	--gs-page-x: clamp(20px, 4vw, 120px);
	--gs-max: 1312px;
	--gs-r: 8px;
	--gs-r-card: 24px;
	--gs-r-island: 16px;
}

html { scroll-behavior: smooth; }

.grade-solution-page,
.grade-solution-page *:not(svg):not(svg *) {
	font-family: "Cabin", Arial, sans-serif !important;
}
.grade-solution-page {
	background:
		radial-gradient(1200px 500px at 50% -10%, rgba(3, 81, 255, 0.06), transparent 60%),
		var(--gs-white);
	color: var(--gs-navy);
	line-height: 1.45;
	overflow-x: hidden;
}
.grade-solution-page a { text-decoration: none; color: inherit; }
.grade-solution-page h1,
.grade-solution-page h2,
.grade-solution-page h3,
.grade-solution-page p { margin: 0; }
.grade-solution-page h1,
.grade-solution-page h2,
.grade-solution-page h3 {
	text-transform: none !important;
	letter-spacing: -0.02em;
}

.gs-container {
	width: 100%;
	max-width: var(--gs-max);
	margin: 0 auto;
	padding-left: var(--gs-page-x);
	padding-right: var(--gs-page-x);
}

.gs-island {
	border-radius: var(--gs-r-island);
	background: var(--gs-island);
	position: relative;
	overflow: hidden;
	color: var(--gs-white);
}

.gs-hero-wrap { padding: 16px 16px 8px; }
.gs-cta-wrap { padding: 48px 16px; }

.gs-hero {
	padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 72px);
}

.gs-hero__glow {
	position: absolute;
	border-radius: 50%;
	background: #00A5FF;
	filter: blur(125px);
	pointer-events: none;
	z-index: 0;
}
.gs-hero__glow--left {
	width: min(800px, 70vw);
	height: 400px;
	top: -150px;
	left: -150px;
}
.gs-hero__glow--right {
	width: min(700px, 60vw);
	height: 450px;
	top: 120px;
	right: -80px;
	filter: blur(150px);
}
.gs-hero__glow--cta {
	width: min(800px, 70vw);
	height: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: blur(140px);
	opacity: 0.7;
}

.gs-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 400px);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.gs-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 640px;
}

.gs-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--gs-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.gs-pill--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.gs-hero h1 {
	color: var(--gs-white) !important;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.08;
	text-align: left;
}

.gs-hero__lead {
	color: var(--gs-pale);
	font-size: clamp(16px, 1.8vw, 18px);
	max-width: 46ch;
	line-height: 1.5;
}

.gs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.gs-hero__nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.01);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.gs-hero__nav-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--gs-white) !important;
	transition: background 0.2s ease, transform 0.2s ease;
}
.gs-hero__nav-item:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateX(4px);
}
.gs-hero__nav-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--gs-yellow);
	color: var(--gs-navy);
	font-size: 13px;
	font-weight: 700;
}
.gs-hero__nav-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}
.gs-hero__nav-arrow {
	opacity: 0.7;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.gs-hero__nav-item:hover .gs-hero__nav-arrow {
	opacity: 1;
	transform: translateX(3px);
}

.gs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 14px 24px;
	border-radius: var(--gs-r);
	font-size: 16px;
	font-weight: 700;
	border: 1.5px solid transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}
.gs-btn:hover { transform: translateY(-1px); }
.grade-solution-page a.gs-btn--yellow,
.grade-solution-page button.gs-btn--yellow,
.grade-solution-page .gs-btn--yellow {
	background: var(--gs-yellow);
	color: var(--gs-navy) !important;
}
.grade-solution-page a.gs-btn--yellow:hover,
.grade-solution-page button.gs-btn--yellow:hover,
.grade-solution-page .gs-btn--yellow:hover {
	box-shadow: 0 8px 24px rgba(255, 200, 55, 0.28);
}

.gs-btn--lg {
	padding: 18px 36px;
	font-size: 18px;
}
.grade-solution-page a.gs-btn--ghost,
.grade-solution-page .gs-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--gs-white) !important;
	font-weight: 600;
}
.grade-solution-page a.gs-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
}
.grade-solution-page a.gs-btn--navy,
.grade-solution-page .gs-btn--navy {
	background: var(--gs-navy);
	color: var(--gs-white) !important;
	margin-top: 8px;
}
.grade-solution-page a.gs-btn--navy:hover {
	background: #02162c;
	box-shadow: 0 10px 28px rgba(0, 13, 27, 0.18);
}

.gs-section {
	padding: clamp(56px, 8vw, 100px) 0;
}

.gs-catalog {
	background:
		linear-gradient(180deg, transparent 0%, rgba(237, 243, 250, 0.55) 12%, rgba(237, 243, 250, 0.55) 88%, transparent 100%);
}

.gs-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	margin-bottom: clamp(36px, 5vw, 56px);
}
.gs-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--gs-blue);
	border-radius: 100px;
	color: var(--gs-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.gs-head h2 {
	color: var(--gs-navy) !important;
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	max-width: 18ch;
}
.gs-head__sub {
	color: var(--gs-muted);
	font-size: 17px;
	max-width: 46ch;
	line-height: 1.5;
}

.gs-products {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.gs-product {
	--gs-accent: var(--gs-blue);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 40px);
	padding: clamp(28px, 4vw, 40px);
	border-radius: var(--gs-r-card);
	background: var(--gs-white);
	border: 1px solid rgba(232, 238, 239, 0.95);
	box-shadow: 0 8px 28px rgba(0, 13, 27, 0.04);
	overflow: hidden;
	animation: gs-rise 0.7s ease both;
	animation-delay: var(--gs-delay, 0s);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gs-product::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--gs-accent), var(--gs-blue-mid));
}
.gs-product:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--gs-accent) 28%, var(--gs-border));
	box-shadow: 0 18px 44px rgba(0, 13, 27, 0.09);
}

.gs-product--pm { --gs-accent: #0351FF; }
.gs-product--sales { --gs-accent: #0EA5E9; }
.gs-product--finances { --gs-accent: #10B981; }
.gs-product--hr { --gs-accent: #6366F1; }

.gs-product__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.gs-product__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.gs-product__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--gs-accent) 12%, white);
	color: var(--gs-accent);
	font-size: 15px;
	font-weight: 700;
}

.gs-product__en {
	color: var(--gs-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.gs-product h3 {
	color: var(--gs-navy) !important;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.2;
}

.gs-product__desc {
	color: var(--gs-muted);
	font-size: 16px;
	line-height: 1.55;
	max-width: 48ch;
}

.gs-product__panel {
	padding: 20px;
	border-radius: 18px;
	background: linear-gradient(180deg, var(--gs-pale) 0%, #f7fafc 100%);
	border: 1px solid rgba(3, 81, 255, 0.06);
}

.gs-product__panel-label {
	margin-bottom: 12px;
	color: var(--gs-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-product__features {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
}

.gs-product__features a {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--gs-navy);
	font-size: 15px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.gs-product__features a:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--gs-accent);
	transform: translateX(3px);
}

.gs-product__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gs-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-accent) 16%, transparent);
	flex-shrink: 0;
}

.gs-cta {
	padding: clamp(64px, 8vw, 96px) 24px;
	min-height: min(52vh, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.gs-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}
.grade-solution-page .gs-cta h2 {
	color: var(--gs-white) !important;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}
.gs-cta__lead {
	color: var(--gs-pale);
	font-size: 17px;
	max-width: 42ch;
	margin-bottom: 8px;
}

@keyframes gs-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-product {
		animation: none;
	}
	.gs-product:hover,
	.gs-hero__nav-item:hover,
	.gs-product__features a:hover,
	.gs-btn:hover {
		transform: none;
	}
}

@media (max-width: 960px) {
	.gs-hero__grid {
		grid-template-columns: 1fr;
	}
	.gs-hero__copy {
		max-width: none;
		text-align: left;
	}
	.gs-product {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.gs-hero {
		padding: 56px 0 40px;
	}
	.gs-hero__actions {
		width: 100%;
	}
	.gs-hero__actions .gs-btn {
		width: 100%;
	}
	.gs-product {
		padding: 22px;
	}
	.gs-product__panel {
		padding: 14px;
	}
	.gs-cta__inner .gs-btn {
		width: 100%;
	}
}