/*
 * Shell components: topbar, navbar, mega-menu, mobile menu, footer,
 * skip link, scroll-to-top.
 *
 * Copied VERBATIM from the design source, in source order, media contexts
 * preserved. The shell uses six of the source's breakpoints -- 1020, 760,
 * 680, 520, 420 and min-1600 -- and they are kept exactly as authored.
 * Consolidating breakpoints is explicitly deferred until visual parity is
 * proven (docs/implementation-architecture.md, "fidelity first").
 *
 * Source: assets/css/style.css @ sha256:60c74b97...a206
 */

body.menu-open {
	overflow: hidden;
}
.container {
	width: min(1180px, calc(100% - 40px)); margin-inline: auto;
}
.topbar {
	border-bottom: 1px solid var(--line);
	color: #617087;
	background: var(--white);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
}
.topbar-inner {
	min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.topbar-group {
	display: flex; align-items: center; gap: 28px;
}
.navbar {
	position: sticky;
	z-index: 50;
	top: 0;
	border-bottom: 1px solid rgba(232,238,246,.85);
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(16px);
}
.nav-inner {
	min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 35px;
}
.logo {
	color: transparent;
	background: var(--gradient-ink);
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 31px;
	font-weight: 900;
	letter-spacing: -0.0315em;
}
.nav-links {
	display: flex; align-items: center; gap: 29px;
}
.nav-links > a, .nav-trigger {
	position: relative;
	padding: 29px 0;
	border: 0;
	color: #283448;
	background: none;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.nav-links > a::after, .nav-trigger::after {
	position: absolute;
	right: 0;
	bottom: 19px;
	left: 0;
	height: 2px;
	content: "";
	background: var(--gradient);
	transform: scaleX(0);
	transition: transform .25s;
}
.nav-links > a:hover::after, .nav-trigger:hover::after {
	transform: scaleX(1);
}
.has-mega {
	position: static;
}
.mega {
	position: absolute;
	z-index: 60;
	top: 100%;
	right: 0;
	left: 0;
	padding: 34px 0;
	border-top: 1px solid var(--line);
	background: var(--white);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: .25s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega {
	opacity: 1; visibility: visible; transform: none;
}
.mega-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
}
.mega h4 {
	margin-bottom: 17px; color: var(--accent-ink); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.mega a {
	display: block; padding: 8px 0; color: #475569; font-size: 12px; font-weight: 700;
}
.mega a:hover {
	color: var(--blue);
}
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	border-radius: 12px;
	background: var(--soft);
}
.menu-toggle span {
	display: block; height: 2px; margin: 5px 0; background: var(--navy); transition: .25s;
}
.footer {
	padding: 90px 0 30px; color: rgba(255,255,255,.72); background: #030817;
}
.footer-grid {
	display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.05fr; gap: 55px;
}
.footer .logo {
	display: inline-block; margin-bottom: 22px;
}
.footer h4 {
	color: #70d9ee; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.footer-links {
	display: grid; gap: 13px; font-size: 13px; font-weight: 700;
}
.footer a:hover {
	color: var(--white);
}
.footer-bottom {
	margin-top: 65px; padding-top: 26px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none;
}
.scroll-top {
	position: fixed;
	z-index: 40;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	color: var(--white);
	background: var(--gradient);
	box-shadow: 0 12px 30px rgba(66, 133, 244,.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: .25s;
}
.scroll-top.visible {
	opacity: 1; visibility: visible; transform: none;
}
@media (max-width: 1020px) {
	.topbar, .nav-cta {
		display: none;
	}
	.menu-toggle {
		display: block;
	}
	.nav-links {
		position: fixed;
		top: 76px;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 25px 25px 70px;
		display: block;
		overflow-y: auto;
		background: var(--white);
		transform: translateX(100%);
		transition: transform .3s;
	}
	.nav-links.open {
		transform: none;
	}
	.nav-links > a, .nav-trigger {
		width: 100%; padding: 18px 0; display: block; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px;
	}
	.mega {
		position: static; display: none; padding: 22px 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
	}
	.has-mega.open .mega {
		display: block;
	}
	.mega-grid {
		grid-template-columns: 1fr 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 680px) {
	.container {
		width: min(100% - 28px, 1180px);
	}
	.mega-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr; gap: 35px;
	}
	.footer-bottom {
		flex-direction: column;
	}
}

.container {
	width: min(1240px, calc(100% - 56px));
}
.section-dark > .container {
	position: relative; z-index: 1;
}
.topbar {
	border: 0;
	color: rgba(255,255,255,.72);
	background: #050d1f;
}
.topbar a:hover {
	color: #75e9ff;
}
.navbar {
	border-bottom-color: rgba(228,234,244,.75);
	box-shadow: 0 8px 30px rgba(11,20,40,.035);
	transition: box-shadow .3s, background .3s;
}
body.is-scrolled .navbar {
	background: rgba(255,255,255,.97);
	box-shadow: 0 16px 45px rgba(11,20,40,.1);
}
.nav-inner {
	min-height: 84px;
}
.logo {
	position: relative;
	font-family: "Google Sans", Inter, sans-serif;
	font-size: 34px;
	text-transform: none;
	letter-spacing: -0.036em;
}
.nav-links > a,
.nav-trigger {
	padding-block: 33px;
	color: #354158;
	letter-spacing: .16em;
}
.nav-links > a.active {
	color: var(--blue);
}
.nav-links > a.active::after {
	transform: scaleX(1);
}
.nav-cta {
	min-width: 122px;
	box-shadow: 0 12px 25px rgba(5,13,31,.18);
}
.mega {
	padding: 42px 0 46px;
	border-top: 0;
	background:
	radial-gradient(circle at 80% 10%, rgba(0,194,232,.08), transparent 22rem),
	rgba(255,255,255,.98);
	box-shadow: 0 35px 80px rgba(5,13,31,.13);
}
.mega-grid {
	gap: 46px;
}
.mega h4 {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.mega a {
	padding: 9px 0;
	transition: color .2s, transform .2s;
}
.mega a:hover {
	transform: translateX(4px);
}
.footer {
	position: relative;
	padding-top: 110px;
	background:
	radial-gradient(circle at 10% 10%, rgba(40,117,255,.14), transparent 26rem),
	radial-gradient(circle at 88% 80%, rgba(0,194,232,.1), transparent 24rem),
	#030817;
}
.footer::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	content: "";
	background: var(--gradient);
}
.scroll-top {
	width: 50px;
	height: 50px;
	box-shadow: 0 16px 35px rgba(40,117,255,.4);
}
@media (max-width: 1020px) {
	.container {
		width: min(100% - 40px, 1240px);
	}
	.nav-inner {
		min-height: 78px;
	}
	.menu-toggle {
		position: relative; z-index: 75; display: block; background: #f1f5fb; box-shadow: inset 0 0 0 1px var(--line);
	}
	body.menu-open::before {
		position: fixed;
		z-index: 49;
		inset: 0;
		content: "";
		background: rgba(5,13,31,.48);
		backdrop-filter: blur(4px);
	}
	.nav-links {
		z-index: 70;
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		width: min(88vw, 410px);
		height: 100vh;
		height: 100dvh;
		padding: 105px 30px 70px;
		border-left: 1px solid var(--line);
		box-shadow: -30px 0 70px rgba(5,13,31,.18);
	}
	.nav-links > a,
  .nav-trigger {
		padding: 18px 6px;
	}
}

@media (max-width: 680px) {
	.container {
		width: min(100% - 30px, 1240px);
	}
}

.skip-link {
	position: fixed;
	z-index: 9999;
	top: 12px;
	left: 12px;
	padding: 12px 18px;
	border-radius: 12px;
	color: #fff;
	background: #071126;
	box-shadow: 0 10px 30px rgba(5,13,31,.25);
	transform: translateY(-180%);
	transition: transform .2s ease;
}
.skip-link:focus {
	transform: translateY(0);
}
.review-logo {
	width: 27px;
	height: 27px;
	padding: 5px;
	border-radius: 9px;
	object-fit: contain;
	background: #fff;
}
@media (max-width: 680px) {
	.review-logo,
  .primerjam-symbol {
		width: 24px;
		height: 24px;
	}
}

.navbar {
	border-bottom: 1px solid rgba(216,225,237,.9);
	background: rgba(255,255,255,.96);
	box-shadow: none;
}
body.is-scrolled .navbar {
	box-shadow: 0 10px 30px rgba(8,24,52,.075);
}
.nav-inner {
	min-height: 80px;
}
.nav-links > a,
.nav-trigger {
	padding-block: 31px;
}
.mega {
	border-top: 1px solid var(--line);
	background: rgba(255,255,255,.99);
	box-shadow: 0 24px 60px rgba(8,24,52,.1);
}
.footer {
	padding-top: 84px;
	background: #030817;
}
@media (max-width: 680px) {
	.footer {
		padding-top: 70px;
	}
}

.page-hero .container {
	position: relative;
	z-index: 1;
	width: min(1240px, calc(100% - 48px));
	min-height: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
	column-gap: clamp(54px, 7vw, 112px);
	align-items: end;
	overflow: visible;
	isolation: isolate;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.page-hero .container::before {
	position: absolute;
	z-index: -1;
	top: -22px;
	left: 0;
	width: 76px;
	height: 4px;
	border: 0;
	border-radius: 999px;
	content: "";
	background: linear-gradient(90deg, #00C2FF, #4285F4 50%, #5072F0);
	box-shadow: 0 8px 24px rgba(66, 133, 244, .2);
}
.page-hero .container::after {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 8px;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	content: "A";
	color: transparent;
	opacity: .34;
	background: none;
	box-shadow: none;
	font-family: "Google Sans", Inter, sans-serif;
	font-size: clamp(160px, 18vw, 260px);
	font-weight: 900;
	line-height: .75;
	letter-spacing: -0.0405em;
	-webkit-text-stroke: 1px rgba(66, 133, 244, .19);
	transform: translateY(-48%);
}
.page-hero .container > * {
	position: relative;
	z-index: 2;
}
@media (max-width: 1020px) {
	.page-hero .container {
		width: min(100% - 40px, 1240px);
		grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
		column-gap: 42px;
	}
	.page-hero .container::after {
		right: -30px;
		opacity: .23;
	}
}

@media (max-width: 760px) {
	.page-hero .container {
		width: min(100% - 36px, 1240px);
		display: block;
	}
	.page-hero .container::before {
		width: 56px;
	}
	.page-hero .container::after {
		top: -4px;
		right: -14px;
		font-size: 150px;
		opacity: .18;
		transform: none;
	}
}

@media (max-width: 420px) {
	.page-hero .container {
		width: min(100% - 30px, 1240px);
	}
}

.review-logo,
.primerjam-symbol {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.review-logo {
	padding: 4px;
}
@media (max-width: 680px) {
	.review-logo,
  .primerjam-symbol {
		width: 23px;
		height: 23px;
	}
}

@media (max-width: 1020px) {
	.nav-links {
		visibility: hidden;
		pointer-events: none;
	}
	.nav-links.open {
		visibility: visible;
		pointer-events: auto;
	}
}

.mobile-nav-contact {
	display: none;
}
@media (max-width: 1020px) {
	.nav-links > .mobile-nav-contact {
		min-height: 50px;
		margin-top: 20px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 12px;
		color: #fff;
		background: var(--gradient);
		box-shadow: 0 12px 28px rgba(66, 133, 244, .22);
		text-align: center;
	}
	.nav-links > .mobile-nav-contact::after {
		display: none;
	}
}

.nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.nav-chevron {
	width: 7px;
	height: 7px;
	display: inline-block;
	flex: 0 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.has-mega:hover .nav-chevron,
.has-mega:focus-within .nav-chevron,
.has-mega.open .nav-chevron {
	transform: translateY(2px) rotate(225deg);
}
@media (max-width: 1020px) {
	.nav-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav-chevron {
		margin-left: auto;
	}
}

@media (min-width: 1600px) {
	.testimonials-section .container {
		max-width: 1640px;
	}
}

.nav-trigger.active {
	color: var(--blue);
}
.nav-trigger.active::after {
	transform: scaleX(1);
}
@media (max-width: 680px) {
	.scroll-top {
		display: none;
	}
}

.page-hero .container {
	width: min(1040px, calc(100% - 48px));
	padding: 0;
	display: block;
	overflow: visible;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}
.page-hero .container::before,
.page-hero .container::after {
	display: none;
}
@media (max-width: 760px) {
	.page-hero .container {
		width: min(100% - 34px, 1040px);
	}
}

.logo {
	font-weight: 700;
}
.footer .logo {
	color: #fff;
	background: none;
	-webkit-text-fill-color: #fff;
}
.logo-years {
	margin-left: 9px;
	padding: 3px 8px;
	display: inline-block;
	position: relative;
	top: -2px;
	border: 1px solid rgba(var(--accent-rgb), .5);
	border-radius: 999px;
	color: var(--accent-ink);
	background: rgba(var(--accent-rgb), .16);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	vertical-align: middle;
}
@media (max-width: 520px) {
	.logo-years {
		display: none;
	}
}

.cert-logo {
	width: 58px;
	height: 44px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 12px;
	background: #fff;
}
.cert-logo img {
	max-width: 100%;
	max-height: 26px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/*
 * --topbar-h, WHICH THE SOURCE MEASURES IN JAVASCRIPT AND THIS THEME DOES NOT.
 *
 * The sticky header is two levels: `#site-header` sticks at `-topbar-h` so the
 * contact row rolls up out of view, and `.navbar` sticks at 0 inside it. The
 * design source runs measureTopbar() on load and resize and writes the
 * measured height into `--topbar-h`.
 *
 * This theme never ported that, so `calc(-1 * var(--topbar-h, 34px))` fell back
 * to 34px at EVERY width -- including the widths where `.topbar` is
 * `display: none` and the right value is 0. Measured, logged out, scrolled:
 *
 *     source   navbar.top = 0     at 1440, 1024, 783, 390
 *     theme    navbar.top = 0     at 1440, 1024
 *              navbar.top = -34   at 783 and every width below
 *
 * -- so on every mobile width the primary navigation sat 34px above the
 * viewport, with its top third cut off, from Slice 1 until now. Nothing caught
 * it: geometry parity measures `main` at scroll position 0, where a sticky
 * offset has no effect at all.
 *
 * IT IS FIXED IN CSS, NOT BY PORTING THE SCRIPT. Architecture §7 records
 * "topbar measurement: REWRITE if still necessary; prefer CSS", and there is
 * nothing here to measure: `.topbar` is hidden at exactly `max-width: 1020px`
 * and is exactly 34px tall above it -- verified across fifteen widths from
 * 320 to 1441, where the source's own measured value is only ever 34 or 0.
 * A resize listener that can only ever produce two constants is a listener
 * that should have been a media query.
 *
 * DECLARED HERE, next to the rule that consumes it and AFTER the media block
 * that hides the topbar, so the two cannot be read in the wrong order.
 */
:root {
	--topbar-h: 34px;
}
@media (max-width: 1020px) {
	:root {
		--topbar-h: 0px;
	}
}
#site-header {
	position: sticky;
	z-index: 70;
	top: calc(-1 * var(--topbar-h, 34px));
}
.navbar {
	position: sticky;
	z-index: 2;
	top: 0;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
}
body.is-scrolled .navbar .nav-inner {
	padding-block: 6px;
}
body.is-scrolled .logo-years {
	opacity: .85;
}
@media (max-width: 1020px) {
	.navbar {
		backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff;
	}
}

.hero .gradient-text,
.section-dark .gradient-text,
.problem-section .gradient-text,
.footer .gradient-text {
	background-image: var(--gradient);
}