@layer gins.tokens, gins.base, gins.components, gins.pages, gins.utilities;

@layer gins.tokens {
	:root {
		--bg: var(--gi-bg, #f5f5f7);
		--surface: var(--gi-surface, #ffffff);
		--surface-2: var(--gi-surface-soft, #f6f6f8);
		--text: var(--gi-ink, #0c0c20);
		--muted: var(--gi-text-soft, #767676);
		--border: var(--gi-border, rgba(12, 12, 32, 0.1));
		--accent: var(--gi-accent, #5423e7);
		--accent-2: var(--gi-teal, #7eedff);
		--success: var(--gi-success, #3da108);
		--warning: var(--gi-gold, #d78942);
		--shadow: var(--gi-shadow-sm, 0 18px 40px rgba(12, 12, 32, 0.11));
		--radius: var(--gi-radius-md, 24px);
		--container: var(--gi-shell, min(1280px, calc(100vw - 1.5rem)));
		--section-space: clamp(3.8rem, 6.3vw, 6.2rem);
		--hero-space: clamp(6rem, 10vw, 9rem);
		--font-display: clamp(2.4rem, 4.8vw, 4.8rem);
		--font-h1: clamp(2.1rem, 3.7vw, 3.8rem);
		--font-h2: clamp(1.6rem, 2.6vw, 2.4rem);
		--font-h3: clamp(1.15rem, 1.5vw, 1.45rem);
		--space-2xs: 0.4rem;
		--space-xs: 0.6rem;
		--space-sm: 0.85rem;
		--space-md: 1.15rem;
		--space-lg: 1.55rem;
		--space-xl: 2.4rem;
		--space-2xl: clamp(2.8rem, 4.5vw, 4.2rem);
	}
}

@layer gins.base {
	html {
		scroll-padding-top: 5.8rem;
	}

	body {
		background:
			radial-gradient(circle at 8% 0%, rgba(84, 35, 231, 0.12), transparent 34%),
			radial-gradient(circle at 92% 8%, rgba(126, 237, 255, 0.14), transparent 25%),
			linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--bg) 94%, #edf1ff) 100%);
		color: var(--text);
	}

	.site-main--page,
	.site-main--service,
	.site-main--front {
		overflow-x: clip;
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page) {
		display: grid;
		gap: 0;
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page > section, .lp-page > .gi-section, .lp-page > .wp-block-group.gi-section) {
		padding-block: var(--section-space);
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page p) {
		max-width: 68ch;
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page h1) {
		font-size: var(--font-display);
		letter-spacing: -0.04em;
		line-height: 1.03;
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page h2) {
		font-size: var(--font-h2);
		letter-spacing: -0.03em;
	}

	:where(.entry-content--page, .entry-content--service, .entry-content--front) :where(.lp-page h3) {
		font-size: var(--font-h3);
		letter-spacing: -0.02em;
	}

	:focus-visible {
		outline: 3px solid color-mix(in srgb, var(--accent) 46%, #ffffff);
		outline-offset: 2px;
	}
}

@layer gins.components {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		backdrop-filter: none;
		background: transparent;
		border-bottom: 0;
		transition: box-shadow 0.2s ease;
	}

	.site-header.is-scrolled {
		box-shadow: none;
		background: transparent;
	}

	.site-header__inner {
		min-height: 5.2rem;
		gap: clamp(0.65rem, 1.3vw, 1.25rem);
	}

	.site-navigation .site-menu {
		gap: 0.4rem;
	}

	.site-menu > li > a {
		font-size: 0.92rem;
		font-weight: 600;
		letter-spacing: 0;
	}

	.site-menu--fallback {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.site-menu--fallback > li > a {
		display: inline-flex;
		align-items: center;
		min-height: 2.35rem;
		padding: 0.46rem 0.74rem;
		border-radius: 12px;
		text-decoration: none;
		color: color-mix(in srgb, var(--text) 92%, #1f2138);
		font-size: 0.9rem;
		font-weight: 600;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.site-menu--fallback > li > a:hover,
	.site-menu--fallback > li > a[aria-current="page"] {
		background: color-mix(in srgb, var(--accent) 14%, #ffffff);
		color: color-mix(in srgb, var(--accent) 90%, #2a1864);
	}

	.site-header__actions {
		display: none;
		align-items: center;
		gap: 0.55rem;
	}

	.site-header__actions .site-header__secondary-link,
	.site-header__actions .site-header__cta {
		min-height: 2.9rem;
		padding: 0.75rem 1.16rem;
	}

	.site-header__secondary-link {
		border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
		background: color-mix(in srgb, var(--surface) 92%, #f4f6ff);
		color: var(--text);
		font-weight: 600;
	}

	.site-header__secondary-link:hover {
		border-color: color-mix(in srgb, var(--accent) 30%, #ffffff);
		color: var(--text);
	}

	.site-header__cta {
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #ffffff), color-mix(in srgb, var(--accent) 72%, #26155a));
		border: 1px solid color-mix(in srgb, var(--accent) 38%, #ffffff);
	}

	.mobile-menu__cta-group {
		gap: 0.72rem;
	}

	.mobile-menu__list--fallback {
		list-style: none;
		display: grid;
		gap: 0.34rem;
		margin: 0;
		padding: 0;
	}

	.mobile-menu__list--fallback > li > a {
		display: inline-flex;
		align-items: center;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.7rem 0.8rem;
		border-radius: 12px;
		text-decoration: none;
		font-weight: 600;
		color: color-mix(in srgb, var(--text) 92%, #1f2138);
		background: color-mix(in srgb, #ffffff 96%, #f5f7ff);
		border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
	}

	.mobile-menu__list--fallback > li > a[aria-current="page"] {
		border-color: color-mix(in srgb, var(--accent) 34%, #ffffff);
		background: color-mix(in srgb, var(--accent) 10%, #ffffff);
		color: color-mix(in srgb, var(--accent) 90%, #2a1864);
	}

	.mobile-menu__cta-group .site-header__secondary-link,
	.mobile-menu__cta-group .site-header__cta {
		width: 100%;
	}

	.gi-section-heading {
		gap: var(--space-sm);
		max-width: 48rem;
		margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
	}

	.gi-section-heading p {
		font-size: 1.02rem;
		line-height: 1.7;
		color: color-mix(in srgb, var(--muted) 90%, #31313f);
	}

	.gi-button-row,
	.wp-block-buttons {
		gap: 0.72rem;
	}

	.gi-button-row .site-header__cta,
	.gi-button-row .site-header__secondary-link,
	.wp-block-buttons .wp-block-button__link {
		min-height: 3.2rem;
	}

	.gi-link-dot {
		display: inline-flex;
		width: 0.94rem;
		height: 0.94rem;
		flex: 0 0 auto;
		border-radius: 999px;
		position: relative;
		vertical-align: middle;
		margin-inline: 0.14rem;
		border: 1px solid color-mix(in srgb, var(--accent) 22%, #ffffff);
		background: color-mix(in srgb, var(--accent) 14%, #f5f6ff);
		box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 16%, transparent);
	}

	.gi-link-dot::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 0.42rem;
		height: 0.42rem;
		border-radius: 999px;
		transform: translate(-50%, -50%);
		background: color-mix(in srgb, var(--accent) 88%, #5c66ff);
	}

	.gi-reveal,
	[data-gi-animate] {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	.gi-reveal.is-visible,
	[data-gi-animate].is-visible {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.lp-page .gi-list-cards {
		list-style: none;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: 0.75rem;
	}

	.lp-page .gi-list-cards > li {
		margin: 0;
		padding: 0.95rem 1rem;
		border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
		border-radius: 14px;
		background: color-mix(in srgb, var(--surface) 95%, #f6f8ff);
		box-shadow: 0 12px 28px rgba(13, 14, 38, 0.09);
	}

	.lp-page details.gi-premium-faq-item {
		border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
		border-radius: 16px;
		padding: 0.18rem 0.95rem;
		background: color-mix(in srgb, #ffffff 92%, #f8f8ff);
		box-shadow: 0 10px 24px rgba(12, 12, 32, 0.09);
	}

	.lp-page details.gi-premium-faq-item + details.gi-premium-faq-item {
		margin-top: 0.7rem;
	}

	.lp-page details.gi-premium-faq-item summary {
		cursor: pointer;
		padding: 1rem 0;
		font-weight: 600;
		list-style: none;
	}

	.lp-page details.gi-premium-faq-item summary::-webkit-details-marker {
		display: none;
	}

	.lp-page details.gi-premium-faq-item > p,
	.lp-page details.gi-premium-faq-item > div {
		padding: 0 0 1rem;
	}

	.gi-trust-strip {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		gap: 0.68rem;
		margin-top: 1rem;
	}

	.gi-trust-strip__item {
		border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
		border-radius: 14px;
		padding: 0.72rem 0.82rem;
		font-size: 0.87rem;
		background: color-mix(in srgb, var(--surface) 94%, #f7f8ff);
		color: color-mix(in srgb, var(--text) 88%, #3f4258);
	}

	.gi-cta-banner {
		display: grid;
		gap: 0.85rem;
		padding: clamp(1.15rem, 2.8vw, 1.8rem);
		border-radius: 20px;
		background:
			radial-gradient(circle at 12% 12%, rgba(126, 237, 255, 0.24), transparent 34%),
			linear-gradient(140deg, color-mix(in srgb, var(--accent) 90%, #1f103f), #090a14);
		color: #f2f5ff;
		box-shadow: 0 20px 34px rgba(6, 6, 18, 0.25);
	}

	.gi-cta-banner a {
		color: #ffffff;
	}

	.gi-process-timeline {
		display: grid;
		gap: 0.85rem;
	}

	.gi-process-timeline__item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.8rem;
		padding: 0.9rem 0.95rem;
		border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
		border-radius: 14px;
		background: color-mix(in srgb, #ffffff 96%, #f8f9ff);
		box-shadow: 0 12px 26px rgba(12, 14, 34, 0.08);
	}

	.gi-process-timeline__idx {
		inline-size: 1.8rem;
		block-size: 1.8rem;
		display: inline-grid;
		place-items: center;
		border-radius: 999px;
		background: color-mix(in srgb, var(--accent) 20%, #ffffff);
		color: color-mix(in srgb, var(--accent) 82%, #251453);
		font-size: 0.79rem;
		font-weight: 700;
	}

	.gi-capability-matrix {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: 0.72rem;
	}

	.gi-capability-matrix__card {
		border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
		border-radius: 16px;
		background: color-mix(in srgb, #ffffff 95%, #f7f8ff);
		padding: 0.96rem;
		display: grid;
		gap: 0.5rem;
		box-shadow: 0 12px 26px rgba(12, 14, 34, 0.08);
	}

	.gi-pricing-teaser {
		display: grid;
		gap: 0.78rem;
		padding: 1rem;
		border-radius: 16px;
		border: 1px solid color-mix(in srgb, var(--accent) 25%, #ffffff);
		background: color-mix(in srgb, var(--accent) 7%, #ffffff);
		box-shadow: 0 14px 30px rgba(16, 18, 40, 0.09);
	}

	.gi-estimate-logic {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
		gap: 0.6rem;
	}

	.gi-estimate-logic__factor {
		padding: 0.78rem;
		border-radius: 12px;
		border: 1px dashed color-mix(in srgb, var(--accent) 35%, #ffffff);
		background: color-mix(in srgb, #ffffff 94%, #f6f8ff);
		font-size: 0.88rem;
		box-shadow: 0 10px 24px rgba(12, 16, 35, 0.08);
	}

	.gi-ui-scene {
		position: relative;
		display: grid;
		gap: 0.7rem;
		padding: clamp(1rem, 2.1vw, 1.5rem);
		border: 1px solid color-mix(in srgb, var(--accent) 24%, #ffffff);
		border-radius: 20px;
		background:
			radial-gradient(circle at 85% 14%, rgba(126, 237, 255, 0.18), transparent 28%),
			linear-gradient(180deg, #fcfcff 0%, #f3f4fb 100%);
		box-shadow: var(--shadow);
		overflow: hidden;
	}

	.gi-ui-scene__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.8rem;
		font-size: 0.82rem;
		color: color-mix(in srgb, var(--muted) 88%, #44475c);
	}

	.gi-ui-scene__title {
		font-weight: 700;
		letter-spacing: -0.01em;
		color: color-mix(in srgb, var(--text) 92%, #292d45);
	}

	.gi-ui-scene__grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 0.56rem;
	}

	.gi-ui-scene__card {
		grid-column: span 6;
		border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
		border-radius: 12px;
		padding: 0.72rem;
		background: color-mix(in srgb, #ffffff 96%, #f7f9ff);
	}

	.gi-ui-scene__line {
		height: 0.44rem;
		border-radius: 999px;
		background: rgba(139, 149, 182, 0.26);
		overflow: hidden;
	}

	.gi-ui-scene__line > span {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 88%, #ffffff), color-mix(in srgb, var(--accent) 86%, #1f1047));
		transform-origin: left;
	}

	.gi-ui-scene__line.is-w30 > span { width: 30%; }
	.gi-ui-scene__line.is-w45 > span { width: 45%; }
	.gi-ui-scene__line.is-w60 > span { width: 60%; }
	.gi-ui-scene__line.is-w75 > span { width: 75%; }
	.gi-ui-scene__line.is-w90 > span { width: 90%; }

	.gi-ui-scene--workflow .gi-ui-scene__card,
	.gi-ui-scene--pipeline .gi-ui-scene__card,
	.gi-ui-scene--portal .gi-ui-scene__card {
		grid-column: span 4;
	}

	.gi-ui-scene--audit .gi-ui-scene__card,
	.gi-ui-scene--integration .gi-ui-scene__card {
		grid-column: span 12;
	}

	.gi-mobile-intent-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 130;
		padding: 0.55rem 0.72rem calc(0.55rem + env(safe-area-inset-bottom));
		background: color-mix(in srgb, #ffffff 92%, #eef1fb);
		border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
		box-shadow: 0 -10px 22px rgba(10, 11, 26, 0.14);
	}

	.gi-mobile-intent-bar[hidden] {
		display: none;
	}

	.gi-mobile-intent-bar__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 0.48rem;
		max-width: min(48rem, 100%);
		margin-inline: auto;
	}

	.gi-mobile-intent-bar__secondary,
	.gi-mobile-intent-bar__primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.95rem;
		border-radius: 999px;
		font-size: 0.9rem;
		font-weight: 700;
		text-align: center;
		padding: 0.72rem 0.9rem;
	}

	.gi-mobile-intent-bar__secondary {
		border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
		background: color-mix(in srgb, #ffffff 94%, #f4f6ff);
		color: var(--text);
	}

	.gi-mobile-intent-bar__primary {
		border: 1px solid color-mix(in srgb, var(--accent) 34%, #ffffff);
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #ffffff), color-mix(in srgb, var(--accent) 72%, #26155a));
		color: #ffffff;
	}

	.site-footer {
		background: linear-gradient(180deg, #05050b 0%, #080913 100%);
	}

	.site-footer__inner {
		padding-top: clamp(2.4rem, 4.5vw, 3.4rem);
	}

	.site-footer__statement {
		color: rgba(225, 226, 239, 0.82);
		max-width: 38ch;
	}

	:where(.lp-page form, .lp-page .wpcf7 form) {
		display: grid;
		gap: 0.8rem;
		padding: clamp(1rem, 2vw, 1.4rem);
		border-radius: 18px;
		border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
		background: color-mix(in srgb, #ffffff 94%, #f8f9ff);
		box-shadow: 0 10px 28px rgba(10, 12, 34, 0.06);
	}

	:where(.lp-page input, .lp-page textarea, .lp-page select) {
		width: 100%;
		min-height: 3rem;
		padding: 0.72rem 0.84rem;
		border-radius: 12px;
		border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
		background: #ffffff;
	}

	:where(.lp-page textarea) {
		min-height: 8rem;
		resize: vertical;
	}

	:where(.lp-page input:focus-visible, .lp-page textarea:focus-visible, .lp-page select:focus-visible) {
		outline: 2px solid color-mix(in srgb, var(--accent) 40%, #ffffff);
		outline-offset: 1px;
	}
}

@layer gins.pages {
	.lp-page .lp-hero {
		border-radius: clamp(24px, 2.4vw, 36px);
		background-color: #16074f;
		background:
			radial-gradient(circle at 15% 10%, rgba(122, 91, 246, 0.3), transparent 42%),
			radial-gradient(circle at 88% 14%, rgba(126, 237, 255, 0.2), transparent 34%),
			linear-gradient(180deg, #120548 0%, #32118c 54%, #5c37dd 100%);
		color: #f1f4ff;
		box-shadow: 0 30px 64px rgba(8, 10, 28, 0.32);
	}

	.lp-page .lp-hero :is(h1, h2, h3) {
		color: #f8faff;
	}

	.lp-page .lp-hero p {
		color: rgba(229, 236, 255, 0.86);
	}

	.lp-page .lp-hero .gi-button-row,
	.lp-page .lp-hero .wp-block-buttons {
		margin-top: clamp(1rem, 2.2vw, 1.6rem);
	}

	body:is(.gi-scope-home, .gi-scope-about, .gi-scope-process, .gi-scope-services-hub) .lp-page .lp-hero {
		padding-top: var(--hero-space);
	}

	body:is(.gi-scope-home, .gi-scope-services-hub, .gi-scope-pricing-hub) .lp-page .lp-final {
		position: relative;
		overflow: clip;
	}

	body:is(.gi-scope-home, .gi-scope-services-hub, .gi-scope-pricing-hub) .lp-page .lp-final::before {
		content: "";
		position: absolute;
		inset: -8% -5% auto;
		height: 88%;
		background:
			radial-gradient(circle at 16% 16%, rgba(84, 35, 231, 0.14), transparent 44%),
			radial-gradient(circle at 84% 10%, rgba(126, 237, 255, 0.14), transparent 30%);
		pointer-events: none;
	}

	body.gi-scope-blog .site-main--blog .gi-blog-hero {
		padding-top: clamp(5.6rem, 9vw, 8rem);
	}

	body.gi-scope-blog .featured-post__card {
		background: linear-gradient(170deg, #ffffff 0%, #f4f6ff 100%);
		border-color: color-mix(in srgb, var(--accent) 22%, #ffffff);
	}

	body:is(.gi-scope-webdev-main, .gi-scope-webdev-corporate, .gi-scope-webdev-landing, .gi-scope-webdev-redesign, .gi-scope-webdev-wordpress, .gi-scope-webdev-support) {
		--accent: #4c29d8;
	}

	body:is(.gi-scope-seo-main, .gi-scope-seo-poland, .gi-scope-seo-b2b, .gi-scope-seo-audit, .gi-scope-seo-technical, .gi-scope-seo-local) {
		--accent: #4a2fd0;
		--accent-2: #72e8ff;
	}

	body:is(.gi-scope-systems-main, .gi-scope-systems-crm, .gi-scope-systems-workflow, .gi-scope-systems-integration, .gi-scope-systems-dashboard, .gi-scope-systems-portal) {
		--accent: #3a2aa8;
		--accent-2: #8cf0e8;
	}

	body:is(.gi-scope-pricing-hub, .gi-scope-pricing-web, .gi-scope-pricing-seo, .gi-scope-pricing-systems) .lp-page .lp-pricing {
		background: color-mix(in srgb, var(--accent) 4%, #ffffff);
	}

	body:is(.gi-scope-pricing-hub, .gi-scope-pricing-web, .gi-scope-pricing-seo, .gi-scope-pricing-systems) .lp-page .gi-card,
	body:is(.gi-scope-pricing-hub, .gi-scope-pricing-web, .gi-scope-pricing-seo, .gi-scope-pricing-systems) .lp-page .lp-price-card {
		border-color: color-mix(in srgb, var(--accent) 22%, #ffffff);
		box-shadow: 0 16px 34px rgba(12, 12, 32, 0.08);
	}

	body.gi-scope-contact .lp-page .lp-hero {
		padding-bottom: clamp(2rem, 3.5vw, 3rem);
	}

	body.gi-scope-contact .lp-page .lp-contact-grid,
	body.gi-scope-contact .lp-page .lp-contact-shell {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	}

	.lp-page :is(.lp-surface-white, .lp-surface-soft, .lp-pricing, .lp-approach, .lp-services, .lp-process) :is(
		.gi-card,
		.lp-service-card,
		.lp-price-card,
		.gi-cta-card,
		.gi-proof-card,
		.gi-benefit-card,
		.gi-process-step
	) {
		border-color: color-mix(in srgb, var(--border) 80%, #d7deef);
		background:
			radial-gradient(circle at 12% 10%, rgba(114, 82, 242, 0.08), transparent 32%),
			linear-gradient(180deg, color-mix(in srgb, #ffffff 95%, #f4f7ff), color-mix(in srgb, #ffffff 88%, #edf2ff));
		box-shadow: 0 18px 40px rgba(12, 14, 34, 0.12);
	}

	.lp-page :is(.lp-surface-soft, .lp-approach, .lp-services, .lp-process) {
		position: relative;
		background: linear-gradient(180deg, #f7f8fd 0%, #f4f6fc 100%);
	}

	.lp-page :is(.lp-surface-soft, .lp-approach, .lp-services, .lp-process)::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at 8% 0%, rgba(84, 35, 231, 0.1), transparent 34%),
			radial-gradient(circle at 88% 100%, rgba(126, 237, 255, 0.12), transparent 30%);
		pointer-events: none;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse) {
		position: relative;
		background:
			radial-gradient(circle at 15% 14%, rgba(89, 66, 226, 0.26), transparent 38%),
			radial-gradient(circle at 86% 20%, rgba(126, 237, 255, 0.16), transparent 30%),
			linear-gradient(180deg, #0a1029 0%, #070a18 58%, #000000 100%);
		color: rgba(240, 245, 255, 0.96);
	}

	.lp-page .lp-final {
		position: relative;
		background: #000000;
		color: rgba(240, 245, 255, 0.96);
	}

	.lp-page .lp-final::before,
	.lp-page .lp-final::after {
		display: none;
	}

	/* Non-hero dark sections must keep internal surfaces in dark mode. */
	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-card,
		.lp-service-card,
		.lp-price-card,
		.gi-cta-card,
		.gi-proof-card,
		.gi-benefit-card,
		.gi-process-step,
		.lp-stepper-grid > *,
		.lp-bento-grid > *
	) {
		background:
			radial-gradient(circle at 14% 10%, rgba(124, 196, 255, 0.08), transparent 50%),
			linear-gradient(165deg, rgba(13, 22, 48, 0.92), rgba(9, 15, 34, 0.92));
		border-color: color-mix(in srgb, #b5ccff 24%, transparent);
		box-shadow: 0 14px 32px rgba(2, 6, 19, 0.34);
		color: rgba(241, 246, 255, 0.96);
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-card,
		.lp-service-card,
		.lp-price-card,
		.gi-cta-card,
		.gi-proof-card,
		.gi-benefit-card,
		.gi-process-step,
		.lp-stepper-grid > *,
		.lp-bento-grid > *
	) :is(h2, h3, h4, strong, b) {
		color: rgba(247, 250, 255, 0.98);
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-card,
		.lp-service-card,
		.lp-price-card,
		.gi-cta-card,
		.gi-proof-card,
		.gi-benefit-card,
		.gi-process-step,
		.lp-stepper-grid > *,
		.lp-bento-grid > *
	) :is(p, li, span, small) {
		color: rgba(213, 224, 248, 0.92);
	}

	/* Non-hero dark sections: list-like points should be transparent rows. */
	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-list-cards > li,
		.lp-warning-list > li,
		.lp-dense-checklist > li,
		.gi-feature-list > li,
		.gi-check-list > li,
		.gi-service-card__list > li
	) {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		border-width: 0 0 1px;
		border-style: solid;
		border-color: color-mix(in srgb, #b8ccff 18%, transparent);
		padding-inline: 0;
		color: rgba(239, 245, 255, 0.96) !important;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-list-cards > li,
		.lp-warning-list > li,
		.lp-dense-checklist > li,
		.gi-feature-list > li,
		.gi-check-list > li,
		.gi-service-card__list > li
	):last-child {
		border-bottom-color: transparent;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-list-cards > li,
		.lp-warning-list > li,
		.lp-dense-checklist > li,
		.gi-feature-list > li,
		.gi-check-list > li,
		.gi-service-card__list > li
	) :is(h3, h4, strong, b) {
		color: rgba(248, 251, 255, 0.98) !important;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-list-cards > li,
		.lp-warning-list > li,
		.lp-dense-checklist > li,
		.gi-feature-list > li,
		.gi-check-list > li,
		.gi-service-card__list > li
	) :is(p, span, small) {
		color: rgba(210, 224, 248, 0.92) !important;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.gi-list-cards > li,
		.lp-warning-list > li,
		.lp-dense-checklist > li,
		.gi-feature-list > li,
		.gi-check-list > li,
		.gi-service-card__list > li
	) a {
		color: rgba(226, 238, 255, 0.96) !important;
	}

	.lp-page :is(section, .gi-section, .wp-block-group):is(.lp-surface-dark, .lp-heading-inverse, .lp-final):not(.lp-hero) :is(
		.lp-btn-inverse,
		.lp-btn-ghost-dark,
		.site-header__secondary-link.lp-btn-ghost-dark
	) {
		background: linear-gradient(160deg, rgba(57, 92, 204, 0.38), rgba(38, 65, 156, 0.34));
		border-color: color-mix(in srgb, #8fb6ff 34%, transparent);
		color: rgba(246, 250, 255, 0.98);
	}
}

@layer gins.utilities {
	/* Normalize six-card service grids to a stable 3x2 desktop layout. */
	body:is(
		.gi-scope-webdev-main,
		.gi-scope-webdev-corporate,
		.gi-scope-webdev-landing,
		.gi-scope-webdev-redesign,
		.gi-scope-webdev-wordpress,
		.gi-scope-webdev-support,
		.gi-scope-seo-main,
		.gi-scope-seo-poland,
		.gi-scope-seo-b2b,
		.gi-scope-seo-audit,
		.gi-scope-seo-technical,
		.gi-scope-seo-local,
		.gi-scope-systems-main,
		.gi-scope-systems-crm,
		.gi-scope-systems-workflow,
		.gi-scope-systems-integration,
		.gi-scope-systems-dashboard,
		.gi-scope-systems-portal
	) .lp-page :is(.gi-grid-3, .lp-stepper-grid, .lp-bento-grid, .lp-warning-list.gi-list-cards, .lp-dense-checklist.gi-list-cards):has(> :nth-child(6):last-child) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(0.85rem, 1.6vw, 1.22rem);
	}

	@media (max-width: 1180px) {
		.site-navigation {
			display: none;
		}

		.site-header__actions {
			display: none;
		}

		body:is(
			.gi-scope-webdev-main,
			.gi-scope-webdev-corporate,
			.gi-scope-webdev-landing,
			.gi-scope-webdev-redesign,
			.gi-scope-webdev-wordpress,
			.gi-scope-webdev-support,
			.gi-scope-seo-main,
			.gi-scope-seo-poland,
			.gi-scope-seo-b2b,
			.gi-scope-seo-audit,
			.gi-scope-seo-technical,
			.gi-scope-seo-local,
			.gi-scope-systems-main,
			.gi-scope-systems-crm,
			.gi-scope-systems-workflow,
			.gi-scope-systems-integration,
			.gi-scope-systems-dashboard,
			.gi-scope-systems-portal
		) .lp-page :is(.gi-grid-3, .lp-stepper-grid, .lp-bento-grid, .lp-warning-list.gi-list-cards, .lp-dense-checklist.gi-list-cards):has(> :nth-child(6):last-child) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1181px) {
		.site-header__actions {
			display: inline-flex;
		}

		.site-nav-toggle {
			display: none;
		}
	}

	@media (max-width: 781px) {
		html {
			scroll-padding-top: 4.8rem;
		}

		.gi-shell,
		.alignwide > .wp-block-group__inner-container,
		.alignwide.wp-block-group,
		.alignwide.wp-block-columns {
			width: min(100%, calc(100vw - 1rem));
		}

		.lp-page .gi-list-cards {
			grid-template-columns: minmax(0, 1fr);
		}

		.lp-page :is(.lp-hero, .gi-hero, .lp-final) :is(.wp-block-buttons, .gi-button-row, .lp-button-row) {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			width: 100%;
			margin-inline: auto;
		}

		.lp-page :is(.lp-hero, .gi-hero, .lp-final) :is(.wp-block-button, .site-header__cta, .lp-btn, .lp-btn-primary, .wp-block-button__link) {
			margin-inline: auto;
		}

		.gi-ui-scene__card,
		.gi-ui-scene--workflow .gi-ui-scene__card,
		.gi-ui-scene--pipeline .gi-ui-scene__card,
		.gi-ui-scene--portal .gi-ui-scene__card {
			grid-column: span 12;
		}

		.site-main,
		.site-footer {
			padding-bottom: 0;
		}

		.gi-mobile-intent-bar,
		.gi-mobile-intent-bar__inner,
		.gi-mobile-intent-bar__secondary,
		.gi-mobile-intent-bar__primary {
			display: none !important;
		}

		body:is(
			.gi-scope-webdev-main,
			.gi-scope-webdev-corporate,
			.gi-scope-webdev-landing,
			.gi-scope-webdev-redesign,
			.gi-scope-webdev-wordpress,
			.gi-scope-webdev-support,
			.gi-scope-seo-main,
			.gi-scope-seo-poland,
			.gi-scope-seo-b2b,
			.gi-scope-seo-audit,
			.gi-scope-seo-technical,
			.gi-scope-seo-local,
			.gi-scope-systems-main,
			.gi-scope-systems-crm,
			.gi-scope-systems-workflow,
			.gi-scope-systems-integration,
			.gi-scope-systems-dashboard,
			.gi-scope-systems-portal
		) .lp-page :is(.gi-grid-3, .lp-stepper-grid, .lp-bento-grid, .lp-warning-list.gi-list-cards, .lp-dense-checklist.gi-list-cards):has(> :nth-child(6):last-child) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		.gi-reveal,
		[data-gi-animate],
		.gi-ui-scene__line > span,
		.site-header,
		.site-header__cta,
		.site-header__secondary-link,
		.site-menu > li > a,
		.gi-card,
		.gix-ui {
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transform: none !important;
			opacity: 1 !important;
		}
	}
}