/**
 * Home Page Support Sections
 *
 * Stylesheet for pages/page-home1.php.
 *
 * Visual system: warm editorial register modeled on Workleap
 * Officevibe's composition and type language (see uploads/DESIGN.md) —
 * warm cream canvas, ink-navy + electric-cobalt two-blue system, serif
 * display headlines with an italic accent word, 16px card radius /
 * 100px pill buttons / 24px image radius, cream hairline borders
 * instead of gray. Only the layout and typographic system is borrowed;
 * no Officevibe copy, logo or imagery is used — this is Digigenius's
 * own content and PHP logic.
 *
 * Contents:
 *   0.   Fonts
 *   1.   Design tokens
 *   2.   Hero refinements
 *   2a.  Hero CTA buttons
 *   3.   Eyebrow label + italic heading accent
 *   4.   Shared section header
 *   5.   Editorial split ( text + image alternating blocks )
 *   6.   Dark statement band
 *   7.   Featured Solutions ( within editorial split )
 *   8.   Our Growth Services list ( within editorial split )
 *   9.   How It Works process list ( within editorial split )
 *   10.  AI Search Platforms tags ( within editorial split )
 *   11.  Industries We Serve ( badge strip )
 *   12.  Testimonials ( colorful card strip )
 *   13.  CTA banner
 *   14.  FAQ accordion
 *   15.  Featured Resources / Latest Articles / Categories ( wrapper only )
 *   16.  Breakpoint: tablet ( 768px )
 *   17.  Breakpoint: desktop ( 1064px )
 *   18.  Reduced motion
 *
 * @package cortics
 */

/* -----------------------------------------------------------------------
 * 0. Fonts — Inter (body/UI) + Source Serif 4 (display, substitutes the
 *    editorial humanist serif used by the reference).
 * -------------------------------------------------------------------- */

@import url( 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&display=swap' );

/* -----------------------------------------------------------------------
 * 0a. Spacing system
 * -------------------------------------------------------------------- */

:root {
	--section-space-sm: 32px;
	--section-space: 56px;
	--section-space-lg: 80px;
	--heading-space: 20px;
	--content-gap: 12px;
}

/* -----------------------------------------------------------------------
 * 1. Design tokens
 * -------------------------------------------------------------------- */

.dg-editorial-a,
.dg-editorial-c,
.dg-editorial-d,
.dg-statement-band,
.dgp-industries,
.dgp-testimonials,
.dgp-cta,
.dg-faq,
.dgp-featured,
.dgp-articles,
.dgp-categories,
.dg-cross-band,
.dgp-pricing-band {
	/* Palette — Ink Navy / Electric Cobalt / Warm Canvas / Cream Border,
	   the two-blue editorial system. Fallbacks only — parent-theme
	   variables still take precedence when set. */
	--dgp-accent: var( --main-color, #2545ff );
	--dgp-accent-deep: var( --thrd-color, #0c1754 );
	--dgp-ink: var( --sw-text-color, #171417 );
	--dgp-muted: var( --sw-text-color2, #222222 );
	--dgp-surface: var( --sw-bg-color, #ffffff );
	--dgp-surface-alt: var( --sw-bg-color2, #f9f8f6 );
	--dgp-border: var( --border-color2, #f0e9e1 );
	--dgp-lavender: #eaebf8;

	/* Shape. */
	--dgp-radius: var( --cortics-radius-md, 16px );
	--dgp-radius-lg: var( --cortics-radius-lg, 16px );
	--dgp-radius-img: 24px;
	--dgp-radius-pill: 100px;

	/* Elevation — restrained; filled buttons stay flat, the color does
	   the work, per the reference's own convention. */
	--dgp-shadow-sm:
		0 1px 2px rgba( 12, 23, 84, 0.04 ),
		0 1px 3px -1px rgba( 12, 23, 84, 0.03 );
	--dgp-shadow-md: 0 20px 44px -18px rgba( 12, 23, 84, 0.24 );

	--dgp-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );

	--dgp-space-xs: 8px;
	--dgp-space-sm: 12px;
	--dgp-space-md: 16px;
	--dgp-space-lg: 24px;
	--dgp-space-xl: 32px;
	--dgp-gap: 24px;

	--dgp-font-display: 'Source Serif 4', Georgia, "Times New Roman", serif;
	--dgp-font-body: var( --main-font, 'Inter', ui-sans-serif, system-ui, sans-serif );

	font-family: var( --dgp-font-body );
	color: var( --dgp-ink );
}

/* -----------------------------------------------------------------------
 * 2. Hero refinements
 * -------------------------------------------------------------------- */

.entry-header-wrap {
	padding-top: clamp( 48px, 7vw, 96px );
	padding-bottom: var( --section-space );
	font-family: var( --main-font, 'Inter', ui-sans-serif, system-ui, sans-serif );
}

.entry-header-title {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
	text-align: center;
}

.entry-header-title h1 {
	margin: 0 0 24px;
	font-family: 'Source Serif 4', Georgia, "Times New Roman", serif;
	font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.entry-header-title p {
	margin: 0 auto;
	max-width: 54ch;
	color: #222222;
	font-size: clamp( 1.0625rem, 1rem + 0.35vw, 1.25rem );
	line-height: 1.65;
	letter-spacing: 0.005em;
	text-wrap: pretty;
}

.marquee-item {
	transition: color 0.2s ease, border-color 0.2s ease;
}

.marquee-item:focus-visible {
	outline: 3px solid var( --main-color, #2545ff );
	outline-offset: 2px;
}

.marquee-content {
	justify-content: center;
}

/* -----------------------------------------------------------------------
 * 1a. Hero split — text left, visual card right (desktop); stacked,
 *     image first, on mobile.
 * -------------------------------------------------------------------- */

.dg-hero-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

.dg-hero-visual {
	position: relative;
	order: -1;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.dg-hero-visual-accent {
	position: absolute;
	inset: 18px -18px -18px 18px;
	border-radius: var( --dgp-radius-img, 24px );
	background-color: #0c1754;
	transform: rotate( -3deg );
	z-index: 0;
}

.dg-hero-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	border-radius: var( --dgp-radius-img, 24px );
	object-fit: cover;
	box-shadow: 0 20px 44px -18px rgba( 12, 23, 84, 0.24 );
}

@media ( min-width: 1064px ) {
	.dg-hero-split {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		text-align: left;
	}

	.dg-hero-split .entry-header-title {
		text-align: left;
		margin-inline: 0;
	}

	.dg-hero-split .entry-header-title p {
		margin-inline: 0;
	}

	.dg-hero-split .hero-actions {
		justify-content: flex-start;
	}

	.dg-hero-visual {
		order: 0;
	}
}

/* -----------------------------------------------------------------------
 * 1b. Why Choose — compact numbered step row (mirrors a 3/4-step hero
 *     follow-on band rather than a plain divided list).
 * -------------------------------------------------------------------- */

.dg-why-steps-row {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-lg );
}

.dg-why-step {
	padding: var( --dgp-space-lg );
	border: 1px solid var( --dgp-border );
	border-radius: var( --dgp-radius );
	background-color: var( --dgp-surface );
}

.dg-why-step-dark {
	background-color: var( --dgp-accent-deep );
	border-color: var( --dgp-accent-deep );
	color: #ffffff;
}

.dg-why-step-accent {
	border-color: var( --dgp-accent );
	border-width: 1.5px;
}

.dg-why-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: var( --dgp-space-md );
	border-radius: 50%;
	background-color: var( --dgp-accent );
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
}

.dg-why-step h3 {
	margin: 0 0 4px;
	color: inherit;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
}

.dg-why-step p {
	margin: 0;
	color: inherit;
	opacity: 0.82;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dg-editorial-link-wrap {
	margin: var( --dgp-space-xl ) 0 0;
	text-align: center;
}

@media ( min-width: 768px ) {
	.dg-why-steps-row {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1064px ) {
	.dg-why-steps-row {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* -----------------------------------------------------------------------
 * 1c. Cross-sell band — slim dark strip linking down to Featured
 *     Solutions.
 * -------------------------------------------------------------------- */

.dg-cross-band {
	padding-block: var( --dgp-space-lg, 24px );
	background-color: var( --dgp-accent-deep );
}

.dg-cross-band-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --dgp-space-md );
	text-align: center;
}

.dg-cross-band-inner p {
	margin: 0;
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.9375rem;
}

.dg-cross-band-link {
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -----------------------------------------------------------------------
 * 2a. Hero CTA buttons — pill shape, Electric Cobalt fill, per the
 *     reference's primary-button spec (100px radius, no shadow).
 * -------------------------------------------------------------------- */

.hero-actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 32px 0;
	flex-wrap: wrap;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 100px;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	text-decoration: none;
	transition: .25s;
}

.hero-btn-primary {
	background: #3B82F6;
	color: #fff;
}

.hero-btn-primary:hover {
	background: #0c1754;
}

.hero-btn-secondary {
	border: 1px solid #3B82F6;
	color: #3B82F6;
	background: transparent;
}

.hero-btn-secondary:hover {
	background: #3B82F6;
	color: #fff;
}

/* -----------------------------------------------------------------------
 * 3. Eyebrow label + italic heading accent
 * -------------------------------------------------------------------- */

.dg-eyebrow {
	display: inline-block;
	margin-bottom: var( --dgp-space-sm );
	color: var( --dgp-accent-deep );
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dg-eyebrow-inverted {
	color: rgba( 255, 255, 255, 0.72 );
}

.dg-section-header h2 em,
.dg-editorial-col-text h2 em,
.dg-editorial-solo-intro h2 em,
.dg-statement-text em,
.dg-faq-intro h2 em,
.entry-header-title h1 em {
	font-style: italic;
	font-weight: 400;
}

/* -----------------------------------------------------------------------
 * 4. Shared section header
 * -------------------------------------------------------------------- */

.dg-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0 auto var( --heading-space );
	max-width: 760px;
}

.dg-section-header h2,
.dg-section-header p,
.dg-section-header .dg-button {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.dg-section-header h2 {
	margin-top: 0;
	margin-bottom: var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 2rem, 1.5rem + 2.2vw, 2.75rem );
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dg-section-header p {
	margin-top: 0;
	margin-bottom: 0;
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.dg-section-content {
	width: 100%;
}

.dg-header-inverted h2 {
	color: #ffffff;
}

.dg-header-inverted p {
	color: rgba( 255, 255, 255, 0.78 );
}

/* -----------------------------------------------------------------------
 * 5. Editorial split — alternating text/image pattern.
 * -------------------------------------------------------------------- */

.dg-editorial-a,
.dg-editorial-c,
.dg-editorial-d {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface-alt );
}

.dg-editorial-c2 {
	background-color: var( --dgp-surface );
}

.dg-editorial-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-xl );
	align-items: center;
}

.dg-editorial-col-text h2 {
	margin: 0 0 var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 1.9rem, 1.5rem + 1.8vw, 2.5rem );
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.dg-editorial-lede {
	margin: 0 0 var( --dgp-space-lg );
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dg-editorial-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var( --dgp-radius-img );
	box-shadow: var( --dgp-shadow-md );
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.dg-editorial-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var( --dgp-space-sm );
	color: var( --dgp-accent-deep );
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid color-mix( in srgb, var( --dgp-accent-deep ) 35%, transparent );
	transition: border-color 0.2s var( --dgp-ease ), color 0.2s var( --dgp-ease );
}

.dg-editorial-link:hover,
.dg-editorial-link:focus {
	color: var( --dgp-accent );
	border-bottom-color: var( --dgp-accent );
}

/* -----------------------------------------------------------------------
 * 5a. Editorial solo — full-width, no-image composition ( Why Choose ).
 * -------------------------------------------------------------------- */

.dg-editorial-solo-intro {
	max-width: 640px;
	margin: 0 auto var( --dgp-space-xl );
	text-align: center;
}

.dg-editorial-solo-intro h2 {
	margin: 0 0 var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 2rem, 1.5rem + 2.2vw, 2.75rem );
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.dg-editorial-solo-intro .dg-editorial-lede {
	margin-bottom: var( --dgp-space-md );
}

.dg-editorial-solo-intro .dg-editorial-link {
	margin-top: 0;
}

.dg-why-points-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-lg );
	max-width: 900px;
	margin-inline: auto;
}

.dg-why-points-grid li {
	padding: var( --dgp-space-lg );
	border-top: 2px solid var( --dgp-border );
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.dg-why-points-grid li strong {
	display: block;
	margin-bottom: 4px;
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: 1.125rem;
	font-weight: 400;
}

/* -----------------------------------------------------------------------
 * 5b. Solutions composition — Featured Solutions, no image: a dark
 *     feature panel and a light supporting list as two columns.
 * -------------------------------------------------------------------- */

.dgp-solutions-composition {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-xl );
	align-items: stretch;
}

/* -----------------------------------------------------------------------
 * 6. Dark statement band
 * -------------------------------------------------------------------- */

.dg-statement-band {
	padding-block: var( --section-space-sm );
	background-color: var( --dgp-accent-deep );
	text-align: center;
}

.dg-statement-container {
	max-width: 760px;
}

.dg-statement-eyebrow {
	margin: 0 0 var( --dgp-space-sm );
	color: rgba( 255, 255, 255, 0.6 );
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dg-statement-text {
	margin: 0;
	color: #ffffff;
	font-family: var( --dgp-font-display );
	font-size: clamp( 1.5rem, 1.2rem + 1.6vw, 2.125rem );
	font-weight: 400;
	line-height: 1.32;
	text-wrap: balance;
}

/* -----------------------------------------------------------------------
 * 7. Featured Solutions — pricing-style card row on a gradient banner.
 * -------------------------------------------------------------------- */

.dgp-pricing-band {
	padding-block: var( --section-space );
	background: linear-gradient( 135deg, var( --dgp-accent-deep ) 0%, var( --dgp-accent ) 100% );
}

.dgp-pricing-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-lg );
}

.dgp-pricing-card {
	display: flex;
	flex-direction: column;
	padding: var( --dgp-space-lg );
	border-radius: var( --dgp-radius-lg );
	background-color: #ffffff;
	box-shadow: var( --dgp-shadow-md );
}

.dgp-pricing-card-dark {
	background-color: var( --dgp-accent-deep );
	color: #ffffff;
}

.dgp-pricing-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --dgp-space-sm );
	margin-bottom: var( --dgp-space-md );
}

.dgp-pricing-name {
	margin: 0;
	color: inherit;
	font-family: var( --dgp-font-display );
	font-size: 1.375rem;
	font-weight: 400;
}

.dgp-pricing-tag {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: var( --dgp-radius-pill );
	background-color: rgba( 255, 255, 255, 0.16 );
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dgp-pricing-features {
	flex: 1;
	margin: 0 0 var( --dgp-space-lg );
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var( --dgp-space-sm );
}

.dgp-pricing-features li {
	position: relative;
	padding-left: 26px;
	color: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dgp-pricing-card:not( .dgp-pricing-card-dark ) .dgp-pricing-features li {
	color: var( --dgp-muted );
}

.dgp-pricing-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	opacity: 0.55;
}

.dgp-pricing-features li::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 6.5px;
	width: 7px;
	height: 4px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( -45deg );
}

.dgp-pricing-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding-inline: var( --dgp-space-lg );
	border-radius: var( --dgp-radius-pill );
	background-color: #ffffff;
	color: var( --dgp-accent-deep );
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s var( --dgp-ease );
}

.dgp-pricing-cta-ghost {
	background-color: var( --dgp-surface-alt );
	color: var( --dgp-accent-deep );
}

.dgp-pricing-cta:hover,
.dgp-pricing-cta:focus {
	transform: translateY( -2px );
}

@media ( min-width: 768px ) {
	.dgp-pricing-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1064px ) {
	.dgp-pricing-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* -----------------------------------------------------------------------
 * 7a. (legacy solutions-composition markup, kept for reference only)
 * -------------------------------------------------------------------- */

.dgp-solution-feature {
	display: flex;
	flex-direction: column;
	margin-bottom: var( --dgp-space-lg );
	padding: var( --dgp-space-lg );
	border-radius: var( --dgp-radius-lg );
	background-color: var( --dgp-accent-deep );
}

.dgp-solution-badge {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: var( --dgp-space-sm );
	padding: 4px 12px;
	border-radius: var( --dgp-radius-pill );
	background-color: rgba( 255, 255, 255, 0.14 );
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dgp-solution-feature .dgp-solution-name {
	margin: 0 0 var( --dgp-space-xs );
	color: #ffffff;
	font-family: var( --dgp-font-display );
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
}

.dgp-solution-feature .dgp-solution-desc {
	margin: 0 0 var( --dgp-space-md );
	color: rgba( 255, 255, 255, 0.74 );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.dgp-solution-feature .dgp-solution-actions {
	margin: 0;
}

.dgp-solution-feature .dgp-solution-cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding-inline: var( --dgp-space-lg );
	border: none;
	border-radius: var( --dgp-radius-pill );
	background-color: #ffffff;
	color: var( --dgp-accent-deep );
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s var( --dgp-ease );
}

.dgp-solution-feature .dgp-solution-cta:hover,
.dgp-solution-feature .dgp-solution-cta:focus {
	transform: translateY( -2px );
}

.dgp-solutions-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.dgp-solution-row {
	padding-block: var( --dgp-space-md );
	border-bottom: 1px solid var( --dgp-border );
}

.dgp-solution-row:first-child {
	padding-top: 0;
}

.dgp-solution-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dgp-solution-row .dgp-solution-name {
	margin: 0 0 2px;
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
}

.dgp-solution-row .dgp-solution-desc {
	margin: 0 0 6px;
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dgp-solution-cta-text {
	color: var( --dgp-accent );
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var( --dgp-ease ), color 0.2s var( --dgp-ease );
}

.dgp-solution-cta-text:hover,
.dgp-solution-cta-text:focus {
	color: var( --dgp-accent-deep );
	border-bottom-color: currentColor;
}

/* -----------------------------------------------------------------------
 * 8. Our Growth Services list ( within editorial split )
 * -------------------------------------------------------------------- */

.dg-service-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.dg-service-list li {
	display: flex;
	align-items: flex-start;
	gap: var( --dgp-space-md );
	padding-block: var( --dgp-space-md );
	border-bottom: 1px solid var( --dgp-border );
}

.dg-service-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dg-service-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var( --dgp-radius );
	background-color: var( --dgp-lavender );
	color: var( --dgp-accent );
}

.dg-icon-svg {
	width: 18px;
	height: 18px;
}

.dg-service-list h3 {
	margin: 0 0 2px;
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
}

.dg-service-list p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* -----------------------------------------------------------------------
 * 9. How It Works process list ( within editorial split )
 * -------------------------------------------------------------------- */

.dg-process-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var( --dgp-space-lg );
}

.dg-process-list li {
	display: flex;
	align-items: flex-start;
	gap: var( --dgp-space-md );
}

.dg-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var( --dgp-accent-deep );
	color: #ffffff;
	font-family: var( --dgp-font-display );
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1;
}

.dg-process-list h3 {
	margin: 0 0 2px;
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
}

.dg-process-list p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* -----------------------------------------------------------------------
 * 10. AI Search Platforms tags ( within editorial split )
 * -------------------------------------------------------------------- */

.dg-editorial-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var( --dgp-space-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgp-platform-item {
	padding: 8px 16px;
	border: 1px solid var( --dgp-border );
	border-radius: var( --dgp-radius-pill );
	background-color: var( --dgp-surface );
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * 11. Industries We Serve — compact badge strip
 * -------------------------------------------------------------------- */

.dgp-industries {
	padding-block: var( --section-space-sm );
	background-color: var( --dgp-surface-alt );
}

.dgp-industries-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --dgp-space-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgp-industry-item {
	padding: 8px 16px;
	border: 1px solid var( --dgp-border );
	border-radius: var( --dgp-radius-pill );
	background-color: var( --dgp-surface );
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * 12. Testimonials — colorful compact card strip.
 * -------------------------------------------------------------------- */

.dgp-testimonials {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface );
}

.dgp-testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-md );
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgp-testimonial-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: var( --dgp-space-lg );
	border: 1px solid var( --dgp-border );
	border-radius: var( --dgp-radius );
	background-color: var( --dgp-surface-alt );
	box-shadow: var( --dgp-shadow-sm );
}

.dgp-testimonial-card-b {
	background-color: var( --dgp-lavender );
	border-color: color-mix( in srgb, var( --dgp-accent ) 18%, var( --dgp-border ) );
}

.dgp-testimonial-card-c {
	background-color: color-mix( in srgb, var( --dgp-accent-deep ) 6%, var( --dgp-surface ) );
	border-color: color-mix( in srgb, var( --dgp-accent-deep ) 20%, var( --dgp-border ) );
}

.dgp-testimonial-mark {
	display: block;
	margin-bottom: -0.4rem;
	color: color-mix( in srgb, var( --dgp-accent ) 32%, var( --dgp-border ) );
	font-family: var( --dgp-font-display );
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
	user-select: none;
}

.dgp-testimonial-quote {
	margin: 0 0 var( --dgp-space-md );
	padding: 0;
	border: 0;
}

.dgp-testimonial-quote p {
	margin: 0;
	color: var( --dgp-ink );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dgp-testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: auto;
}

.dgp-testimonial-name {
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
}

.dgp-testimonial-role {
	color: var( --dgp-muted );
	font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------
 * 13. CTA banner — rounded dark banner with a decorative radial arc.
 * -------------------------------------------------------------------- */

.dgp-cta {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface-alt );
}

.dgp-cta-banner {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	padding: clamp( 40px, 6vw, 72px ) clamp( 24px, 5vw, 56px );
	background-color: var( --dgp-accent-deep );
	box-shadow: var( --dgp-shadow-md );
}

.dgp-cta-banner-arc {
	position: absolute;
	top: -35%;
	right: -12%;
	width: 65%;
	height: 220%;
	background: radial-gradient( circle, color-mix( in srgb, var( --dgp-accent ) 60%, transparent ) 0%, transparent 70% );
	pointer-events: none;
}

.dgp-cta-actions {
	position: relative;
	margin: 0;
}

.dg-header-inverted {
	position: relative;
}

.dgp-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding-inline: var( --dgp-space-xl );
	border: 1px solid transparent;
	border-radius: var( --dgp-radius-pill );
	background-color: #ffffff;
	color: var( --dgp-accent-deep );
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color 0.2s var( --dgp-ease ),
		transform 0.2s var( --dgp-ease );
}

.dgp-cta-button:hover,
.dgp-cta-button:focus {
	background-color: var( --dgp-surface-alt );
	color: var( --dgp-accent-deep );
	transform: translateY( -2px );
}

.dgp-cta-button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------
 * 14. FAQ accordion — left editorial heading, right divided rows built
 *     with native <details>/<summary>. No JavaScript.
 * -------------------------------------------------------------------- */

.dg-faq {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface );
}

.dg-faq-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-xl );
}

.dg-faq-intro h2 {
	margin: 0 0 var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 1.9rem, 1.5rem + 1.8vw, 2.5rem );
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.dg-faq-intro p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dg-faq-list {
	display: flex;
	flex-direction: column;
}

.dg-faq-item {
	padding-block: var( --dgp-space-lg );
	border-bottom: 1px solid var( --dgp-border );
}

.dg-faq-item:first-child {
	padding-top: 0;
}

.dg-faq-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dg-faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --dgp-space-md );
	color: var( --dgp-ink );
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
}

.dg-faq-item summary::-webkit-details-marker {
	display: none;
}

.dg-faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var( --dgp-lavender );
	color: var( --dgp-accent-deep );
	font-size: 1.125rem;
	line-height: 1;
	transition: transform 0.2s var( --dgp-ease );
}

.dg-faq-item[open] summary::after {
	content: "\2212";
}

.dg-faq-item p {
	margin: var( --dgp-space-sm ) 0 0;
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------
 * 15. Featured Resources / Latest Articles / Categories ( wrapper only )
 * -------------------------------------------------------------------- */

.dgp-featured {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface-alt );
}

.dgp-articles {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface-alt );
}

.dgp-categories {
	padding-block: var( --section-space-sm );
	background-color: var( --dgp-surface-alt );
}

/* -----------------------------------------------------------------------
 * 16. Breakpoint: tablet ( 768px )
 * -------------------------------------------------------------------- */

@media ( min-width: 768px ) {

	:root {
		--section-space-sm: 44px;
		--section-space: 72px;
		--section-space-lg: 96px;
		--heading-space: 28px;
		--content-gap: 16px;
	}

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

	.dg-why-points-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 0;
	}

	.dg-why-points-grid li:nth-child( odd ) {
		border-right: 1px solid var( --dgp-border );
	}
}

/* -----------------------------------------------------------------------
 * 17. Breakpoint: desktop ( 1064px )
 * -------------------------------------------------------------------- */

@media ( min-width: 1064px ) {

	:root {
		--section-space-sm: 56px;
		--section-space: 80px;
		--section-space-lg: 112px;
		--heading-space: 32px;
		--content-gap: 20px;
	}

	.dg-editorial-split {
		grid-template-columns: 1fr 1fr;
		gap: var( --dgp-space-xl );
	}

	.dg-editorial-split-reverse .dg-editorial-col-text {
		order: 1;
	}

	.dg-editorial-split-reverse .dg-editorial-col-visual {
		order: 2;
	}

	.dg-faq-split {
		grid-template-columns: 0.8fr 1.2fr;
		gap: var( --dgp-space-xl );
	}

	.dg-faq-intro {
		position: sticky;
		top: 96px;
		align-self: start;
	}

	.dgp-solutions-composition {
		grid-template-columns: 1fr 1fr;
	}
}

/* -----------------------------------------------------------------------
 * 18. Reduced motion
 * -------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.marquee-item,
	.dgp-solution-feature .dgp-solution-cta,
	.dgp-cta-button,
	.dg-editorial-link,
	.dg-hero-btn {
		transition: none;
	}
}
</content>
</invoke>