/**
 * Home Page — Streamova IPTV
 *
 * Stylesheet for page-home1.php.
 *
 * Palette ( 3 colors total, taken from the existing theme ):
 *   1. Canvas      — existing theme background ( #ffffff / #f7f8fc panel )
 *   2. Accent      — Electric Cobalt #2545ff
 *   3. Contrast    — Ink Navy #0c1754
 * No additional accent colors, no global background change, no dark mode.
 *
 * One unified button system: .sv-btn + .sv-btn-primary / .sv-btn-secondary
 * ( .hero-btn-* aliases kept so existing theme markup keeps working ).
 * No @font-face, no @import, no external assets, minimal JS.
 *
 * Contents:
 *   0.  Spacing system
 *   1.  Design tokens
 *   2.  Hero
 *   3.  Button system
 *   4.  Eyebrow + section header
 *   5.  Benefit strip
 *   6.  Pricing
 *   7.  Showcase ( text + image )
 *   8.  Why Choose Streamova ( benefit cards )
 *   9.  Entertainment categories
 *   10. Devices
 *   11. How it works
 *   12. Internal link hubs
 *   13. Trust block
 *   14. Final CTA
 *   15. FAQ
 *   16. Floating WhatsApp button
 *   17. WordPress section wrappers
 *   18. Breakpoints
 *   19. Reduced motion
 *
 * @package cortics
 */

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

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

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

.dg-section,
.dg-trust-strip,
.dg-pricing,
.dg-showcase,
.dg-why,
.dgp-industries,
.dg-devices,
.dg-how,
.dg-linkhub,
.dg-trustblock,
.dgp-cta,
.dg-faq,
.sv-whatsapp-float,
.dgp-featured,
.dgp-articles,
.dgp-categories {
	--dgp-accent: #2545ff;
	--dgp-accent-deep: #0c1754;
	--dgp-ink: var( --sw-text-color, #0c1754 );
	--dgp-muted: var( --sw-text-color2, #4b5675 );
	--dgp-surface: var( --sw-bg-color, #ffffff );
	--dgp-surface-alt: var( --sw-bg-color2, #f7f8fc );
	--dgp-border: var( --border-color2, #e4e7f2 );
	--dgp-tint: #eef1ff;

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

	--dgp-shadow-sm:
		0 1px 2px rgba( 12, 23, 84, 0.05 ),
		0 1px 3px -1px rgba( 12, 23, 84, 0.04 );
	--dgp-shadow-md: 0 20px 44px -18px rgba( 12, 23, 84, 0.26 );

	--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-font-display: Georgia, "Times New Roman", serif;
	--dgp-font-body: var( --main-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif );

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

/* -----------------------------------------------------------------------
 * 2. Hero — centered, no background change.
 * -------------------------------------------------------------------- */

.entry-header-wrap {
	padding-top: clamp( 32px, 4.5vw, 64px );
	padding-bottom: clamp( 32px, 4.5vw, 64px );
	font-family: var( --main-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif );
}

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

.entry-header-title h1 {
	margin: 0 0 clamp( 16px, 2vw, 22px );
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp( 2.5rem, 1.7rem + 4vw, 4.5rem );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.entry-header-title h1 em {
	font-style: italic;
	font-weight: 400;
}

.entry-header-title p {
	margin: 0 auto;
	max-width: 54ch;
	color: #4b5675;
	font-size: clamp( 1.125rem, 1.05rem + 0.5vw, 1.375rem );
	line-height: 1.6;
	text-wrap: pretty;
}

.entry-header-title .dg-eyebrow {
	margin-bottom: 14px;
}

.dg-hero-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #4b5675;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.dg-hero-trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.dg-hero-trust svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: #2545ff;
}

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

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

.marquee-item:focus-visible {
	outline: 3px solid #2545ff;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 3. Button system — one shape, one height, one hover rule.
 * -------------------------------------------------------------------- */

.sv-btn,
.hero-btn,
.dg-price-cta,
.dg-linkhub-more,
.dgp-cta-button,
.dg-faq-support-cta,
.dg-showcase-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 34px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var( --main-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif );
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		border-color 0.2s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		color 0.2s cubic-bezier( 0.22, 0.61, 0.36, 1 ),
		transform 0.2s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.sv-btn-primary,
.hero-btn-primary,
.dg-showcase-cta,
.dg-price-cta-featured {
	background-color: #2545ff;
	border-color: #2545ff;
	color: #ffffff;
}

.sv-btn-primary:hover,
.sv-btn-primary:focus,
.hero-btn-primary:hover,
.hero-btn-primary:focus,
.dg-showcase-cta:hover,
.dg-showcase-cta:focus,
.dg-price-cta-featured:hover,
.dg-price-cta-featured:focus {
	background-color: #0c1754;
	border-color: #0c1754;
	color: #ffffff;
	transform: translateY( -2px );
}

.sv-btn-secondary,
.hero-btn-secondary {
	background-color: transparent;
	border-color: #2545ff;
	color: #2545ff;
}

.sv-btn-secondary:hover,
.sv-btn-secondary:focus,
.hero-btn-secondary:hover,
.hero-btn-secondary:focus {
	background-color: #2545ff;
	border-color: #2545ff;
	color: #ffffff;
	transform: translateY( -2px );
}

/* Buttons that sit on a navy panel invert: white fill, navy label. */
.dg-price-cta {
	width: 100%;
}

.sv-btn-invert,
.dgp-cta-button {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #0c1754;
}

.sv-btn-invert:hover,
.sv-btn-invert:focus,
.dgp-cta-button:hover,
.dgp-cta-button:focus {
	background-color: var( --dgp-tint );
	border-color: var( --dgp-tint );
	color: #0c1754;
	transform: translateY( -2px );
}

.sv-btn-outline-invert {
	background-color: transparent;
	border-color: rgba( 255, 255, 255, 0.55 );
	color: #ffffff;
}

.sv-btn-outline-invert:hover,
.sv-btn-outline-invert:focus {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #0c1754;
	transform: translateY( -2px );
}

.sv-btn:focus-visible,
.hero-btn:focus-visible,
.dg-price-cta:focus-visible,
.dgp-cta-button:focus-visible,
.dg-showcase-cta:focus-visible,
.dg-faq-support-cta:focus-visible {
	outline: 3px solid #0c1754;
	outline-offset: 3px;
}

.sv-btn-invert:focus-visible,
.dgp-cta-button:focus-visible {
	outline-color: #ffffff;
}

.dg-price-card-featured .dg-price-cta:focus-visible {
	outline-color: #ffffff;
}

.hero-actions,
.sv-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: clamp( 22px, 2.6vw, 30px ) 0 18px;
}

/* -----------------------------------------------------------------------
 * 4. Eyebrow + shared section header ( centered composition )
 * -------------------------------------------------------------------- */

.dg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var( --dgp-space-sm );
	color: var( --dgp-accent-deep );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.dg-eyebrow svg {
	width: 15px;
	height: 15px;
}

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

.dg-section-header 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.875rem );
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dg-section-header h2 em {
	font-style: italic;
	font-weight: 400;
}

.dg-section-header p {
	width: 100%;
	max-width: 62ch;
	margin: 0 auto;
	color: var( --dgp-muted );
	font-size: clamp( 1.0625rem, 1rem + 0.35vw, 1.1875rem );
	line-height: 1.7;
	text-align: center;
	text-wrap: pretty;
}

.dg-section-header .dg-eyebrow,
.dg-section-header h2 {
	text-align: center;
}

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

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

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

/* -----------------------------------------------------------------------
 * 5. Benefit strip
 * -------------------------------------------------------------------- */

.dg-trust-strip {
	padding-block: var( --section-space-sm );
	background-color: var( --dgp-surface-alt );
	border-block: 1px solid var( --dgp-border );
}

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

.dg-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.dg-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var( --dgp-tint );
	color: var( --dgp-accent-deep );
}

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

.dg-trust-item h3 {
	margin: 0;
	color: var( --dgp-ink );
	font-size: 1.0625rem;
	font-weight: 700;
}

.dg-why-card,
.dgp-category-card,
.dg-step-card {
	text-align: left;
}

.dg-trust-item p {
	margin: 0;
	max-width: 32ch;
	color: var( --dgp-muted );
	font-size: 1rem;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------
 * 6. Pricing
 * -------------------------------------------------------------------- */

.dg-pricing {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface-alt );
	scroll-margin-top: 24px;
}

.dg-pricing-grid {
	margin: 0 0 var( --dgp-space-xl );
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 14px, 1.4vw, 18px );
	align-items: stretch;
}

/*
 * Plan card. Reading order matches a modern hosting table:
 * name -> description -> price -> CTA -> plan note -> rule -> features.
 */
.dg-price-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp( 24px, 2.2vw, 30px ) clamp( 20px, 1.8vw, 26px );
	border: 1px solid var( --dgp-border );
	border-radius: 16px;
	background-color: var( --dgp-surface );
	transition:
		transform 0.25s var( --dgp-ease ),
		box-shadow 0.25s var( --dgp-ease ),
		border-color 0.25s var( --dgp-ease );
}

.dg-price-card:hover {
	transform: translateY( -4px );
	border-color: color-mix( in srgb, var( --dgp-accent ) 30%, var( --dgp-border ) );
	box-shadow: 0 18px 36px -20px rgba( 12, 23, 84, 0.28 );
}

/* Recommended plan: navy panel with a cobalt bloom in the corner. */
.dg-price-card-featured {
	border-color: var( --dgp-accent-deep );
	background-color: var( --dgp-accent-deep );
	box-shadow: 0 22px 44px -20px rgba( 12, 23, 84, 0.45 );
}

.dg-price-card-featured::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -30% -25% auto auto;
	width: 80%;
	height: 90%;
	background: radial-gradient( circle, rgba( 37, 69, 255, 0.55 ) 0%, transparent 68% );
	pointer-events: none;
}

.dg-price-card-featured > * {
	position: relative;
	z-index: 1;
}

.dg-price-card-featured:hover {
	border-color: var( --dgp-accent );
	box-shadow: 0 26px 50px -20px rgba( 12, 23, 84, 0.55 );
}

/* Badge pinned to the card's top-right corner. */
.dg-price-badge {
	position: absolute;
	top: clamp( 16px, 1.4vw, 20px );
	right: clamp( 16px, 1.4vw, 20px );
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: var( --dgp-radius-pill );
	background-color: var( --dgp-accent );
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dg-price-card-name {
	margin: 0 0 8px;
	padding-right: 90px;
	color: var( --dgp-ink );
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.dg-price-card-featured .dg-price-card-name {
	color: #ffffff;
}

.dg-price-card-desc {
	margin: 0 0 clamp( 22px, 2vw, 28px );
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dg-price-card-featured .dg-price-card-desc {
	color: rgba( 255, 255, 255, 0.82 );
}

.dg-price-card-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 var( --dgp-space-md );
}

.dg-price-amount {
	color: var( --dgp-ink );
	font-family: var( --dgp-font-body );
	font-size: clamp( 2.125rem, 1.8rem + 1.1vw, 2.5rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
}

.dg-price-card-featured .dg-price-amount {
	color: #ffffff;
}

.dg-price-period {
	color: var( --dgp-muted );
	font-size: 0.9375rem;
	font-weight: 500;
}

.dg-price-card-featured .dg-price-period {
	color: rgba( 255, 255, 255, 0.72 );
}

/* CTA sits directly under the price, where the eye lands next. */
.dg-price-cta {
	width: 100%;
	min-height: 46px;
	margin-bottom: var( --dgp-space-md );
	padding-inline: var( --dgp-space-md );
	border-color: var( --dgp-accent );
	background-color: transparent;
	color: var( --dgp-accent );
	font-size: 0.9375rem;
	font-weight: 600;
}

.dg-price-cta:hover,
.dg-price-cta:focus {
	border-color: var( --dgp-accent );
	background-color: var( --dgp-accent );
	color: #ffffff;
	transform: none;
}

.dg-price-cta-featured {
	border-color: var( --dgp-accent );
	background-color: var( --dgp-accent );
	color: #ffffff;
}

.dg-price-cta-featured:hover,
.dg-price-cta-featured:focus {
	border-color: #ffffff;
	background-color: #ffffff;
	color: var( --dgp-accent-deep );
}

/* Fine print under the button, matched to the hosting-table convention. */
.dg-price-card-tagline {
	margin: 0 0 clamp( 20px, 1.8vw, 24px );
	padding-bottom: clamp( 20px, 1.8vw, 24px );
	border-bottom: 1px solid var( --dgp-border );
	color: var( --dgp-muted );
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
}

.dg-price-card-featured .dg-price-card-tagline {
	border-bottom-color: rgba( 255, 255, 255, 0.18 );
	color: rgba( 255, 255, 255, 0.68 );
}

.dg-price-card-features {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
	text-align: left;
}

.dg-price-card-features li {
	position: relative;
	padding-left: 26px;
	color: var( --dgp-ink );
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dg-price-card-featured .dg-price-card-features li {
	color: rgba( 255, 255, 255, 0.92 );
}

/* Bare cobalt check, white on the recommended card. */
.dg-price-card-features li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var( --dgp-accent );
	border-bottom: 2px solid var( --dgp-accent );
	border-radius: 1px;
	transform: rotate( -45deg );
}

.dg-price-card-featured .dg-price-card-features li::before {
	border-left-color: #ffffff;
	border-bottom-color: #ffffff;
}

.dg-payment-strip {
	max-width: 620px;
	margin: 0 auto;
	padding: var( --dgp-space-xl ) var( --dgp-space-lg );
	border: 1px solid var( --dgp-border );
	border-radius: 20px;
	background-color: var( --dgp-surface );
	text-align: center;
}

.dg-payment-strip-title {
	margin: 0 0 6px;
	color: var( --dgp-ink );
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
}

.dg-payment-strip-sub {
	max-width: 46ch;
	margin: 0 auto var( --dgp-space-lg );
	color: var( --dgp-muted );
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
}

.dg-payment-image {
	display: block;
	max-width: 100%;
	height: auto;
	aspect-ratio: 640 / 120;
	margin: var( --dgp-space-lg ) auto 0;
}

.dg-pricing-note {
	max-width: 720px;
	margin: var( --dgp-space-lg ) auto 0;
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

.dg-devices-apps,
.dg-linkhub-title {
	text-align: center;
}

/* -----------------------------------------------------------------------
 * 7. Showcase — text + image, centered heading block above on mobile.
 * -------------------------------------------------------------------- */

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

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

.dg-showcase-text {
	text-align: left;
}

.dg-showcase-text h2 {
	margin: 0 0 var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 1.75rem, 1.4rem + 1.7vw, 2.25rem );
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.dg-showcase-text h2 em {
	font-style: italic;
	font-weight: 400;
}

.dg-showcase-lede {
	margin: 0 0 var( --dgp-space-lg );
	color: var( --dgp-muted );
	font-size: clamp( 1.0625rem, 1rem + 0.35vw, 1.1875rem );
	line-height: 1.75;
}

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

.dg-showcase-list li {
	position: relative;
	padding-left: 36px;
	color: var( --dgp-ink );
	font-size: clamp( 1.0625rem, 1rem + 0.3vw, 1.125rem );
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
}

.dg-showcase-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var( --dgp-tint );
}

.dg-showcase-list li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 10px;
	height: 5px;
	border-left: 2px solid var( --dgp-accent );
	border-bottom: 2px solid var( --dgp-accent );
	transform: rotate( -45deg );
}

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

/* -----------------------------------------------------------------------
 * 8. Why Choose Streamova — benefit cards
 * -------------------------------------------------------------------- */

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

.dg-why-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 18px, 2vw, 24px );
}

.dg-why-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp( 24px, 2.2vw, 30px );
	border: 1px solid var( --dgp-border );
	border-radius: 20px;
	background-color: var( --dgp-surface );
	box-shadow: 0 1px 2px rgba( 12, 23, 84, 0.04 );
	transition:
		transform 0.25s var( --dgp-ease ),
		box-shadow 0.25s var( --dgp-ease ),
		border-color 0.25s var( --dgp-ease );
}

/* Soft cobalt wash that fades up from the card foot on hover. */
.dg-why-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	height: 70%;
	background: linear-gradient( to top, var( --dgp-tint ), transparent );
	opacity: 0;
	transition: opacity 0.25s var( --dgp-ease );
}

.dg-why-card:hover {
	transform: translateY( -4px );
	border-color: color-mix( in srgb, var( --dgp-accent ) 32%, var( --dgp-border ) );
	box-shadow: 0 18px 36px -20px rgba( 12, 23, 84, 0.3 );
}

.dg-why-card:hover::after {
	opacity: 1;
}

.dg-why-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var( --dgp-space-lg );
	border: 1px solid color-mix( in srgb, var( --dgp-accent ) 22%, var( --dgp-border ) );
	border-radius: 14px;
	background-color: var( --dgp-tint );
	color: var( --dgp-accent );
	transition: background-color 0.25s var( --dgp-ease ), color 0.25s var( --dgp-ease );
}

.dg-why-card:hover .dg-why-icon {
	background-color: var( --dgp-accent );
	border-color: var( --dgp-accent );
	color: #ffffff;
}

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

.dg-why-card h3 {
	margin: 0 0 8px;
	color: var( --dgp-ink );
	font-size: 1.1875rem;
	font-weight: 600;
}

.dg-why-card p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* -----------------------------------------------------------------------
 * 9. Entertainment categories
 * -------------------------------------------------------------------- */

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

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

.dg-categories-split .dg-showcase-visual {
	order: -1;
}

@media ( min-width: 1064px ) {
	.dg-categories-split .dg-showcase-visual {
		order: 0;
	}
}

.dgp-category-card {
	padding: 0 0 0 var( --dgp-space-lg );
	border: 0;
	border-left: 2px solid var( --dgp-accent );
	border-radius: 0;
	background-color: transparent;
}

.dgp-category-card h3 {
	margin: 0 0 8px;
	color: var( --dgp-ink );
	font-size: 1.125rem;
	font-weight: 700;
}

.dgp-category-card p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* -----------------------------------------------------------------------
 * 10. Devices
 * -------------------------------------------------------------------- */

.dg-devices {
	padding-block: var( --section-space );
	background-color: var( --dgp-accent-deep );
}

.dg-device-cards {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --dgp-space-md );
}

.dg-device-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var( --dgp-space-lg ) var( --dgp-space-md );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: var( --dgp-radius );
	background-color: rgba( 255, 255, 255, 0.05 );
	transition: border-color 0.2s var( --dgp-ease ), background-color 0.2s var( --dgp-ease );
}

.dg-device-card:hover {
	border-color: rgba( 255, 255, 255, 0.3 );
	background-color: rgba( 255, 255, 255, 0.09 );
}

.dg-device-card img {
	max-width: 100%;
	width: auto;
	height: 30px;
	object-fit: contain;
}

.dg-device-card span {
	color: rgba( 255, 255, 255, 0.88 );
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
}

.dg-devices-apps {
	max-width: 660px;
	margin: var( --dgp-space-xl ) auto 0;
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 1.0625rem;
	line-height: 1.7;
	text-align: center;
}

/* -----------------------------------------------------------------------
 * 11. How it works
 * -------------------------------------------------------------------- */

.dg-how {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface );
	scroll-margin-top: 24px;
}

.dg-step-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 14px, 1.4vw, 18px );
	align-items: stretch;
}

/* Flat tinted panels — no borders or shadows, so the row reads as one band. */
.dg-step-card {
	display: flex;
	flex-direction: column;
	padding: clamp( 22px, 2vw, 28px ) clamp( 20px, 1.8vw, 24px );
	border: 0;
	border-radius: 14px;
	background-color: var( --dgp-tint );
	transition: transform 0.25s var( --dgp-ease );
}

.dg-step-card:hover {
	transform: translateY( -3px );
}

/* Four pastel panel tints, matched to the reference row. */
.dg-step-card-1 { background-color: #e8effb; }
.dg-step-card-2 { background-color: #f3e9fb; }
.dg-step-card-3 { background-color: #e5f6ea; }
.dg-step-card-4 { background-color: #fdeee0; }

.dg-step-eyebrow {
	display: block;
	margin-bottom: var( --dgp-space-md );
	color: var( --dgp-accent );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dg-step-card h3 {
	margin: 0 0 12px;
	color: var( --dgp-accent-deep );
	font-size: clamp( 1.1875rem, 1.05rem + 0.5vw, 1.375rem );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.dg-step-card p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: 1rem;
	line-height: 1.6;
}

.dg-how .sv-actions {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * 12. Internal link hubs
 * -------------------------------------------------------------------- */

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

.dg-linkhub-group + .dg-linkhub-group {
	margin-top: clamp( 36px, 4vw, 56px );
}

.dg-linkhub-title {
	margin: 0 0 var( --dgp-space-md );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: 1.375rem;
	font-weight: 400;
	text-align: center;
}

.dg-country-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 14px, 1.6vw, 20px );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* SaaS-style destination cards: white panel, hairline border, arrow affordance. */
.dg-country-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --dgp-space-md );
	height: 100%;
	padding: clamp( 20px, 1.8vw, 24px );
	border: 1px solid var( --dgp-border );
	border-radius: 18px;
	background-color: var( --dgp-surface );
	box-shadow: 0 1px 2px rgba( 12, 23, 84, 0.04 );
	color: var( --dgp-ink );
	text-decoration: none;
	transition:
		transform 0.25s var( --dgp-ease ),
		box-shadow 0.25s var( --dgp-ease ),
		border-color 0.25s var( --dgp-ease );
}

.dg-country-list a:hover,
.dg-country-list a:focus {
	transform: translateY( -4px );
	border-color: color-mix( in srgb, var( --dgp-accent ) 34%, var( --dgp-border ) );
	box-shadow: 0 18px 36px -20px rgba( 12, 23, 84, 0.3 );
	color: var( --dgp-ink );
}

.dg-country-list a:focus-visible {
	outline: 3px solid var( --dgp-accent );
	outline-offset: 3px;
}

.dg-country-flag-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 24px;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba( 12, 23, 84, 0.12 );
}

.dg-country-flag {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.dg-country-name {
	flex: 1;
	font-family: var( --dgp-font-display );
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.2;
}

.dg-country-note {
	color: var( --dgp-muted );
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.25s var( --dgp-ease );
}

.dg-country-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var( --dgp-tint );
	color: var( --dgp-accent );
	font-size: 1rem;
	line-height: 1;
	transition:
		background-color 0.25s var( --dgp-ease ),
		color 0.25s var( --dgp-ease ),
		transform 0.25s var( --dgp-ease );
}

.dg-country-list a:hover .dg-country-arrow,
.dg-country-list a:focus .dg-country-arrow {
	background-color: var( --dgp-accent );
	color: #ffffff;
	transform: translateX( 3px );
}

.dg-country-list a:hover .dg-country-note,
.dg-country-list a:focus .dg-country-note {
	color: var( --dgp-accent );
}

.dg-guide-list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: clamp( 14px, 1.6vw, 20px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-guide-list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	height: 100%;
	padding: clamp( 20px, 1.8vw, 26px ) var( --dgp-space-md );
	border: 1px solid var( --dgp-border );
	border-radius: 18px;
	background-color: var( --dgp-surface );
	box-shadow: 0 1px 2px rgba( 12, 23, 84, 0.04 );
	color: var( --dgp-ink );
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition:
		transform 0.25s var( --dgp-ease ),
		box-shadow 0.25s var( --dgp-ease ),
		border-color 0.25s var( --dgp-ease ),
		color 0.25s var( --dgp-ease );
}

.dg-guide-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background-color: var( --dgp-tint );
	color: var( --dgp-accent );
	transition: background-color 0.25s var( --dgp-ease ), color 0.25s var( --dgp-ease );
}

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

.dg-guide-list a:hover,
.dg-guide-list a:focus {
	transform: translateY( -4px );
	border-color: color-mix( in srgb, var( --dgp-accent ) 34%, var( --dgp-border ) );
	box-shadow: 0 18px 36px -20px rgba( 12, 23, 84, 0.3 );
	color: var( --dgp-accent-deep );
}

.dg-guide-list a:focus-visible {
	outline: 3px solid var( --dgp-accent );
	outline-offset: 3px;
}

.dg-guide-list a:hover .dg-guide-icon,
.dg-guide-list a:focus .dg-guide-icon {
	background-color: var( --dgp-accent );
	color: #ffffff;
}

/* -----------------------------------------------------------------------
 * 13. Trust block
 * -------------------------------------------------------------------- */

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

.dg-trustblock-grid {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dgp-space-lg ) clamp( 24px, 3vw, 48px );
	max-width: 820px;
}

.dg-trustblock-grid li {
	position: relative;
	padding: 0 0 0 34px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var( --dgp-ink );
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.6;
	text-align: left;
}

.dg-trustblock-grid-last {
	margin-bottom: 0;
}

.dg-trustblock-grid li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 13px;
	height: 8px;
	border-left: 2px solid var( --dgp-accent );
	border-bottom: 2px solid var( --dgp-accent );
	transform: rotate( -45deg );
}

.dg-policy-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-policy-links a {
	color: var( --dgp-accent );
	font-size: 0.9375rem;
	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 );
}

.dg-policy-links a:hover,
.dg-policy-links a:focus {
	color: var( --dgp-accent-deep );
	border-bottom-color: currentColor;
}

/* -----------------------------------------------------------------------
 * 14. Final CTA
 * -------------------------------------------------------------------- */

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

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

.dgp-cta-banner-arc {
	position: absolute;
	top: -35%;
	right: -12%;
	width: 62%;
	height: 210%;
	background: radial-gradient( circle, rgba( 37, 69, 255, 0.55 ) 0%, transparent 70% );
	pointer-events: none;
}

.dgp-cta-banner .dg-section-header,
.dgp-cta-banner .sv-actions {
	position: relative;
}

.dgp-cta-banner .sv-actions {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * 15. FAQ — support card left, heading + accordion right.
 * -------------------------------------------------------------------- */

.dg-faq {
	padding-block: var( --section-space );
	background-color: var( --dgp-surface );
	scroll-margin-top: 24px;
}

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

.dg-faq-intro {
	min-width: 0;
}

.dg-faq-support {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: clamp( 24px, 2.2vw, 32px );
	border: 1px solid var( --dgp-border );
	border-radius: 20px;
	background-color: var( --dgp-surface-alt );
	text-align: left;
}

.dg-faq-support img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto var( --dgp-space-lg );
	object-fit: contain;
}

.dg-faq-support-title {
	margin: 0 0 10px;
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
}

.dg-faq-support-title em {
	font-style: italic;
	font-weight: 400;
}

.dg-faq-support p {
	margin: 0 0 var( --dgp-space-lg );
	color: var( --dgp-muted );
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
}

.dg-support-points {
	width: 100%;
	margin: 0 0 var( --dgp-space-lg );
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dg-support-points li {
	position: relative;
	padding-left: 32px;
	color: var( --dgp-ink );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.55;
}

.dg-support-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: var( --dgp-tint );
}

.dg-support-points li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 7px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var( --dgp-accent );
	border-bottom: 2px solid var( --dgp-accent );
	transform: rotate( -45deg );
}

.dg-faq-support-cta {
	width: 100%;
}

.dg-faq-heading {
	margin-bottom: var( --dgp-space-lg );
	text-align: center;
}

.dg-faq-heading h2 {
	margin: 0 0 var( --content-gap );
	color: var( --dgp-ink );
	font-family: var( --dgp-font-display );
	font-size: clamp( 1.75rem, 1.4rem + 1.7vw, 2.25rem );
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.dg-faq-heading h2 em {
	font-style: italic;
	font-weight: 400;
}

.dg-faq-heading p {
	margin: 0;
	color: var( --dgp-muted );
	font-size: clamp( 1.0625rem, 1rem + 0.35vw, 1.1875rem );
	line-height: 1.7;
}

.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: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-size: 1.125rem;
	font-weight: 600;
	line-height: 1.45;
}

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

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

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

.dg-faq-item summary:focus-visible {
	outline: 3px solid var( --dgp-accent );
	outline-offset: 3px;
	border-radius: 4px;
}

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

/* -----------------------------------------------------------------------
 * 16. Floating WhatsApp button
 * -------------------------------------------------------------------- */

.sv-whatsapp-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var( --dgp-radius-pill );
	background-color: var( --dgp-accent-deep );
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px rgba( 12, 23, 84, 0.6 );
	transition: background-color 0.2s var( --dgp-ease );
}

.sv-whatsapp-float:hover,
.sv-whatsapp-float:focus {
	background-color: var( --dgp-accent );
	color: #ffffff;
}

.sv-whatsapp-float:focus-visible {
	outline: 3px solid var( --dgp-accent-deep );
	outline-offset: 3px;
}

.sv-whatsapp-float svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.sv-whatsapp-float-label {
	display: none;
}

/* -----------------------------------------------------------------------
 * 17. WordPress section wrappers
 * -------------------------------------------------------------------- */

.dgp-featured,
.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 );
}

/* -----------------------------------------------------------------------
 * 18. Breakpoints
 * -------------------------------------------------------------------- */

@media ( min-width: 560px ) {

	.dg-device-cards {
		grid-template-columns: repeat( 3, 1fr );
	}

	.sv-whatsapp-float-label {
		display: inline;
	}
}

@media ( min-width: 768px ) {

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

	.dg-trust-grid,
	.dg-why-grid,
	.dg-step-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.dg-country-list {
		grid-template-columns: repeat( 2, 1fr );
	}

	.dg-guide-list {
		grid-template-columns: repeat( 3, 1fr );
	}

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

	.dg-device-cards {
		grid-template-columns: repeat( 4, 1fr );
	}

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

	.dg-faq-split {
		grid-template-columns: 0.85fr 1.15fr;
	}

	.sv-whatsapp-float {
		right: 24px;
		bottom: 24px;
	}
}

@media ( min-width: 1064px ) {

	:root {
		--section-space-sm: 52px;
		--section-space: 88px;
		--heading-space: 40px;
		--content-gap: 18px;
	}

	.dg-trust-grid {
		grid-template-columns: repeat( 4, 1fr );
	}

	.dg-pricing-grid {
		grid-template-columns: repeat( 4, 1fr );
	}

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

	.dg-step-grid {
		grid-template-columns: repeat( 4, 1fr );
	}

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

	.dg-country-list {
		grid-template-columns: repeat( 3, 1fr );
	}

	.dg-guide-list {
		grid-template-columns: repeat( 5, 1fr );
	}

	.dg-device-cards {
		grid-template-columns: repeat( 6, 1fr );
	}

	.dg-showcase-split {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

/* -----------------------------------------------------------------------
 * 19. Reduced motion
 * -------------------------------------------------------------------- */

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

	.sv-btn,
	.hero-btn,
	.dg-price-cta,
	.dg-price-card,
	.dg-price-card-featured::after,
	.dg-why-card,
	.dg-why-card::after,
	.dg-why-icon,
	.dg-step-card,
	.dgp-category-card,
	.dg-device-card,
	.dg-country-list a,
	.dg-country-arrow,
	.dg-country-note,
	.dg-guide-list a,
	.dg-guide-icon,
	.dgp-cta-button,
	.dg-showcase-cta,
	.dg-faq-support-cta,
	.sv-whatsapp-float,
	.marquee-item {
		transition: none;
	}
}