/**
 * DentraFix Design System
 *
 * @package DentraFix_Child
 */

:root {
	/* Brand colors */
	--df-green: #70a234;
	--df-white: #ffffff;
	--df-cream: #f5f5ed;
	--df-sage: #95be76;
	--df-light-green: #b5d08c;
	--df-navy: #14324a;

	/* Legacy aliases */
	--df-color-primary: var(--df-green);
	--df-color-primary-light: var(--df-sage);
	--df-color-primary-soft: var(--df-light-green);
	--df-color-white: var(--df-white);
	--df-color-cream: var(--df-cream);
	--df-color-heading: var(--df-navy);
	--df-color-text: #2f3f4f;
	--df-color-text-muted: #5f6f7f;
	--df-color-border: rgba(20, 50, 74, 0.12);

	/* Typography */
	--df-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--df-font-heading: var(--df-font-sans);

	/* Spacing scale */
	--df-space-2xs: 0.25rem;
	--df-space-xs: 0.5rem;
	--df-space-sm: 0.75rem;
	--df-space-md: 1rem;
	--df-space-lg: 1.5rem;
	--df-space-xl: 2rem;
	--df-space-2xl: 3rem;
	--df-space-3xl: 4rem;
	--df-space-4xl: 5rem;

	/* Layout */
	--df-container-max: 72rem;
	--df-container-narrow: 42rem;
	--df-section-padding-y: clamp(3rem, 6vw, 5rem);
	--df-header-offset: 7.5rem;

	/* Radius */
	--df-radius-sm: 0.375rem;
	--df-radius-md: 0.75rem;
	--df-radius-lg: 1rem;
	--df-radius-xl: 1.5rem;
	--df-radius-pill: 999px;

	/* Shadows */
	--df-shadow-sm: 0 1px 2px rgba(20, 50, 74, 0.06);
	--df-shadow-md: 0 8px 24px rgba(20, 50, 74, 0.08);
	--df-shadow-lg: 0 18px 40px rgba(20, 50, 74, 0.12);
	--df-shadow-soft: 0 4px 20px rgba(20, 50, 74, 0.05);
	--df-shadow-medium: 0 12px 32px rgba(20, 50, 74, 0.09);
	--df-shadow-premium: 0 24px 56px rgba(20, 50, 74, 0.11), 0 2px 8px rgba(20, 50, 74, 0.04);
	--df-shadow-glow: 0 16px 40px rgba(112, 162, 52, 0.14), 0 0 0 1px rgba(112, 162, 52, 0.08);

	/* Borders */
	--df-border-soft: rgba(20, 50, 74, 0.08);
	--df-border-green: rgba(112, 162, 52, 0.22);

	/* Gradients */
	--df-gradient-cream: linear-gradient(180deg, var(--df-cream) 0%, var(--df-white) 100%);
	--df-gradient-green-soft: linear-gradient(135deg, rgba(181, 208, 140, 0.28) 0%, rgba(112, 162, 52, 0.08) 100%);
	--df-gradient-navy: linear-gradient(135deg, var(--df-navy) 0%, #1a4260 100%);
	--df-gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 237, 0.72) 100%);

	/* Section rhythm */
	--df-section-y: clamp(4rem, 8vw, 6.5rem);
	--df-section-y-sm: clamp(3rem, 6vw, 4.5rem);
	--df-gap-card: clamp(0.875rem, 2vw, 1.25rem);

	/* Measure */
	--df-measure-sm: 32rem;
	--df-measure-md: 40rem;
	--df-measure-lg: 48rem;

	/* Motion */
	--df-transition: 0.2s ease;
	--df-transition-premium: 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
	--df-ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	--df-ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
	--df-duration-base: 0.6s;
	--df-duration-slow: 0.9s;
	--df-duration-fast: 0.3s;
}

/* --------------------------------------------------------------------------
   Base & overflow safety
   -------------------------------------------------------------------------- */

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body,
body.df-body {
	overflow-x: visible;
	color: var(--df-color-text);
	font-family: var(--df-font-sans);
	font-size: 1rem;
	line-height: 1.6;
	background-color: var(--df-white);
	-webkit-font-smoothing: antialiased;
}

body.df-custom-shell .site-header,
body.df-custom-shell .site-footer,
body.df-custom-shell #masthead,
body.df-custom-shell .sidebar,
body.df-custom-shell .widget-area,
body.df-custom-shell .is-right-sidebar,
body.df-custom-shell .is-left-sidebar {
	display: none !important;
}

body.df-custom-shell .site-content,
body.df-custom-shell .content-area,
body.df-custom-shell #primary {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.df-heading {
	color: var(--df-navy);
	font-family: var(--df-font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--df-space-md);
}

p {
	margin: 0 0 var(--df-space-md);
}

a {
	color: var(--df-green);
	text-decoration: none;
	transition: color var(--df-transition);
}

a:hover,
a:focus {
	color: var(--df-navy);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

*:focus-visible {
	outline: 2px solid var(--df-green);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.df-skip-link {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 10000;
	padding: 0.75rem 1rem;
	border-radius: var(--df-radius-md);
	background: var(--df-navy);
	color: var(--df-white);
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform var(--df-transition);
}

.df-skip-link:focus {
	transform: translateY(0);
	color: var(--df-white);
}

/* --------------------------------------------------------------------------
   Logo safety
   -------------------------------------------------------------------------- */

.custom-logo,
.site-logo img,
.df-logo img,
.df-logo__image {
	max-width: 210px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.df-logo__text {
	color: var(--df-navy);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.df-logo__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.df-logo--coming-soon .custom-logo,
.df-logo--coming-soon .df-logo__image {
	max-width: 220px;
	max-height: 72px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.df-site {
	min-height: 100vh;
}

.df-landing {
	overflow-x: hidden;
}

.df-section {
	padding-block: var(--df-section-y-sm);
	position: relative;
}

.df-section--cream {
	background: var(--df-gradient-cream);
}

.df-container {
	width: min(100% - 2rem, var(--df-container-max));
	margin-inline: auto;
}

.df-container--narrow {
	width: min(100% - 2rem, var(--df-container-narrow));
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.df-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--df-space-xs);
	min-height: 3rem;
	padding: 0.875rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--df-radius-pill);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		background-color var(--df-transition-premium),
		border-color var(--df-transition-premium),
		color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-btn:hover,
.df-btn:focus {
	text-decoration: none;
	transform: translateY(-2px);
}

.df-btn--primary {
	background-color: var(--df-green);
	border-color: var(--df-green);
	color: var(--df-white);
	box-shadow: var(--df-shadow-soft);
}

.df-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.55s ease;
	pointer-events: none;
}

.df-btn--primary:hover::after,
.df-btn--primary:focus-visible::after {
	transform: translateX(120%);
}

.df-btn--primary:hover,
.df-btn--primary:focus {
	background-color: var(--df-navy);
	border-color: var(--df-navy);
	color: var(--df-white);
}

.df-btn--secondary {
	background-color: var(--df-sage);
	border-color: var(--df-sage);
	color: var(--df-navy);
}

.df-btn--secondary:hover,
.df-btn--secondary:focus {
	background-color: var(--df-light-green);
	border-color: var(--df-light-green);
	color: var(--df-navy);
}

.df-btn--outline {
	background-color: transparent;
	border-color: var(--df-green);
	color: var(--df-green);
}

.df-btn--outline:hover,
.df-btn--outline:focus {
	background-color: var(--df-green);
	color: var(--df-white);
}

.df-btn-group {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
}

/* --------------------------------------------------------------------------
   Cards & badges
   -------------------------------------------------------------------------- */

.df-card {
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	border-radius: var(--df-radius-xl);
	box-shadow: var(--df-shadow-soft);
	padding: var(--df-space-xl);
}

.df-badge {
	display: inline-block;
	padding: 0.4rem 0.95rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.1);
	border: 1px solid var(--df-border-green);
	color: var(--df-green);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   Media placeholders
   -------------------------------------------------------------------------- */

.df-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
	border: 1.5px dashed var(--df-border-green);
	border-radius: var(--df-radius-xl);
	background:
		radial-gradient(ellipse 70% 60% at 50% 35%, rgba(181, 208, 140, 0.28) 0%, transparent 68%),
		var(--df-gradient-cream);
	color: var(--df-color-text-muted);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	padding: var(--df-space-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   Announcement bar & sticky header shell
   -------------------------------------------------------------------------- */

.df-site-header {
	position: relative;
	z-index: 200;
}

.df-site-header::before {
	content: "";
	display: block;
	height: calc(var(--df-main-offset, var(--df-announcement-h, 0px)) + var(--df-header-main-h, 4.75rem));
	transition: height 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.df-site-header__main {
	position: fixed;
	top: var(--df-main-offset, var(--df-announcement-h, 0px));
	left: 0;
	right: 0;
	z-index: 201;
	width: 100%;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--df-color-border);
	backdrop-filter: blur(8px);
	box-shadow: none;
	transition:
		top 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
		box-shadow var(--df-transition-premium);
}

.df-site-header.is-bar-hidden .df-site-header__main {
	top: 0;
	box-shadow: var(--df-shadow-medium);
}

.df-announcement {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 202;
	background: var(--df-navy);
	color: var(--df-white);
	padding: 0.625rem 0;
	overflow: hidden;
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
	will-change: transform;
}

.df-site-header.is-bar-hidden .df-announcement {
	transform: translateY(-100%);
	pointer-events: none;
}

.df-announcement__text {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.df-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md);
	min-height: 4.75rem;
}

.df-logo {
	flex: 0 0 auto;
}

.df-site-header__desktop {
	display: none;
}

.df-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.5rem;
	border: 1px solid var(--df-color-border);
	border-radius: var(--df-radius-md);
	background: var(--df-white);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.df-menu-toggle:hover,
.df-menu-toggle:focus-visible {
	border-color: var(--df-green);
	outline: none;
}

.df-menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--df-navy);
	border-radius: var(--df-radius-pill);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.df-menu-open .df-menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.df-menu-open .df-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.df-menu-open .df-menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.df-site-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--df-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-site-header__menu a {
	color: var(--df-navy);
	font-weight: 500;
	font-size: 0.9375rem;
}

.df-site-header__menu a:hover,
.df-site-header__menu a:focus {
	color: var(--df-green);
}

.df-site-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-sm);
}

/* Language switcher */
.df-language-switcher {
	display: inline-flex;
	align-items: stretch;
	padding: 0.1875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.06);
	border: 1px solid rgba(20, 50, 74, 0.1);
	gap: 0.125rem;
}

.df-language-switcher__btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--df-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.4375rem 0.75rem;
	border-radius: var(--df-radius-pill);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.df-language-switcher__btn:hover,
.df-language-switcher__btn:focus-visible {
	outline: none;
	background: rgba(112, 162, 52, 0.12);
	color: var(--df-green-dark, #5a8429);
}

.df-language-switcher__btn.is-active,
.df-language-switcher__btn[aria-pressed="true"] {
	background: var(--df-white);
	color: var(--df-navy);
	box-shadow: 0 1px 4px rgba(20, 50, 74, 0.12);
}

.df-language-switcher--mobile {
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
}

.df-language-switcher--mobile .df-language-switcher__btn {
	color: var(--df-white);
	font-size: 0.9375rem;
	padding: 0.5rem 1rem;
}

.df-language-switcher--mobile .df-language-switcher__btn.is-active,
.df-language-switcher--mobile .df-language-switcher__btn[aria-pressed="true"] {
	background: rgba(255, 255, 255, 0.95);
	color: var(--df-navy);
}

/* Premium fullscreen mobile drawer */
.df-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	pointer-events: none;
	visibility: hidden;
}

.df-mobile-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.df-mobile-drawer[hidden] {
	display: none !important;
}

.df-mobile-drawer.is-open[hidden] {
	display: flex !important;
}

.df-mobile-drawer__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(112, 162, 52, 0.35), transparent 55%),
		radial-gradient(circle at 80% 80%, rgba(112, 162, 52, 0.2), transparent 50%),
		linear-gradient(145deg, #14324a 0%, #1a4260 45%, #70a234 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.df-mobile-drawer.is-open .df-mobile-drawer__overlay {
	opacity: 1;
}

.df-mobile-drawer__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	padding: clamp(1.25rem, 4vw, 2rem);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	transform: translateY(1.5rem);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.df-mobile-drawer.is-open .df-mobile-drawer__panel {
	transform: translateY(0);
	opacity: 1;
}

.df-mobile-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md);
	margin-bottom: var(--df-space-xl);
}

.df-mobile-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--df-radius-md);
	background: rgba(255, 255, 255, 0.1);
	color: var(--df-white);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.df-mobile-drawer__close:hover,
.df-mobile-drawer__close:focus-visible {
	outline: none;
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
}

.df-mobile-drawer__label {
	margin: 0 0 var(--df-space-lg);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.df-mobile-drawer__menu {
	list-style: none;
	margin: 0 0 var(--df-space-xl);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
}

.df-mobile-drawer__menu a {
	display: block;
	padding: 0.625rem 0;
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-white);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.df-mobile-drawer__menu a:hover,
.df-mobile-drawer__menu a:focus {
	color: var(--df-light-green, #b5d08c);
	transform: translateX(0.25rem);
}

.df-mobile-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	margin-bottom: var(--df-space-xl);
}

.df-mobile-drawer__actions .df-btn {
	width: 100%;
	justify-content: center;
}

.df-btn--on-dark {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--df-white);
}

.df-btn--on-dark:hover,
.df-btn--on-dark:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--df-white);
}

.df-mobile-drawer__lang {
	margin-bottom: var(--df-space-xl);
}

.df-mobile-drawer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-sm) var(--df-space-md);
	padding-top: var(--df-space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.df-mobile-drawer__trust span {
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.df-logo--drawer img,
.df-logo--drawer .custom-logo {
	max-height: 2.5rem;
	width: auto;
}

body.df-menu-open {
	overflow: hidden;
}

/* First-visit language modal */
.df-language-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--df-space-lg);
}

.df-language-modal[hidden] {
	display: none !important;
}

.df-language-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 50, 74, 0.55);
	backdrop-filter: blur(4px);
}

.df-language-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 28rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow:
		0 24px 60px rgba(20, 50, 74, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	text-align: center;
	overflow: hidden;
}

.df-language-modal__blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.df-language-modal__blob--1 {
	width: 10rem;
	height: 10rem;
	top: -3rem;
	right: -2rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.18), transparent 70%);
}

.df-language-modal__blob--2 {
	width: 8rem;
	height: 8rem;
	bottom: -2rem;
	left: -2rem;
	background: radial-gradient(circle, rgba(20, 50, 74, 0.1), transparent 70%);
}

.df-language-modal__badge {
	margin-bottom: var(--df-space-md);
}

.df-language-modal__title {
	font-size: clamp(1.25rem, 4vw, 1.625rem);
	margin: 0 0 var(--df-space-sm);
	color: var(--df-navy);
}

.df-language-modal__urdu {
	margin: 0 0 var(--df-space-md);
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--df-navy);
}

.df-language-modal__text {
	margin: 0 0 var(--df-space-xl);
	font-size: 0.9375rem;
	color: var(--df-color-text-muted);
	line-height: 1.55;
}

.df-language-modal__actions {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	margin-bottom: var(--df-space-md);
}

.df-language-modal__actions .df-btn {
	width: 100%;
	justify-content: center;
	padding-block: 0.875rem;
	font-size: 1rem;
}

.df-language-modal__skip {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--df-color-text-muted);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
	padding: 0.25rem;
}

.df-language-modal__skip:hover,
.df-language-modal__skip:focus-visible {
	color: var(--df-navy);
	outline: none;
}

body.df-language-modal-open {
	overflow: hidden;
}

/* Urdu / RTL layout support */
html.df-lang-ur {
	font-family: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html.df-lang-ur body {
	text-align: right;
}

html.df-lang-ur .df-announcement__text,
html.df-lang-ur .df-problems__bridge,
html.df-lang-ur .df-language-modal__dialog,
html.df-lang-ur .df-coming-soon__content {
	text-align: center;
}

html.df-lang-ur .df-hero__content,
html.df-lang-ur .df-problems__intro,
html.df-lang-ur .df-problems__card-body,
html.df-lang-ur .df-intro__content {
	text-align: right;
	line-height: 1.85;
}

html.df-lang-ur .df-benefits__card-body {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-mobile-drawer__menu a:hover,
html.df-lang-ur .df-mobile-drawer__menu a:focus {
	transform: translateX(-0.25rem);
}

html.df-lang-ur .df-hero__trust,
html.df-lang-ur .df-mobile-drawer__trust {
	justify-content: flex-start;
}

html.df-lang-ur .df-logo img,
html.df-lang-ur .df-logo .custom-logo {
	transform: none;
}

html.df-lang-ur [data-df-lang-block="ur"] .df-hero__heading {
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.df-site-footer {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(112, 162, 52, 0.1) 0%, transparent 65%),
		var(--df-cream);
	border-top: 1px solid var(--df-border-green);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.df-site-footer__glow {
	position: absolute;
	inset: 0 0 auto;
	height: 6rem;
	background: linear-gradient(180deg, rgba(112, 162, 52, 0.08) 0%, transparent 100%);
	pointer-events: none;
}

.df-site-footer > .df-container {
	position: relative;
	z-index: 1;
}

.df-site-footer__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}

.df-site-footer__col {
	min-width: 0;
}

.df-site-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
}

.df-site-footer .df-logo,
.df-site-footer .df-logo__link {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.df-site-footer .df-logo img,
.df-site-footer .df-logo .custom-logo,
.df-site-footer .df-logo__image {
	max-width: 220px;
	max-height: none;
	width: auto;
	height: auto;
	object-fit: contain;
}

.df-site-footer .df-logo__text {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.df-site-footer__intro,
.df-site-footer__trust,
.df-site-footer__support-text,
.df-site-footer__legal-note,
.df-site-footer__disclaimer,
.df-site-footer__copy {
	color: var(--df-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

.df-site-footer__intro {
	max-width: 22rem;
	color: var(--df-color-text);
	font-size: 1rem;
	line-height: 1.7;
}

.df-site-footer__trust {
	color: var(--df-navy);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.55;
}

.df-site-footer__heading {
	margin: 0 0 var(--df-space-md);
	color: var(--df-navy);
	font-family: var(--df-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.df-site-footer__nav {
	display: block;
}

.df-site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-site-footer__menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0;
	color: var(--df-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	text-decoration: none;
	transition:
		color var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-site-footer__menu a::before {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 2px;
	background: var(--df-green);
	border-radius: var(--df-radius-pill);
	transition: width 0.25s ease;
}

.df-site-footer__menu a:hover,
.df-site-footer__menu a:focus-visible {
	color: var(--df-green);
	transform: translateX(0.2rem);
}

.df-site-footer__menu a:hover::before,
.df-site-footer__menu a:focus-visible::before {
	width: 0.85rem;
}

.df-site-footer__support-text {
	margin-bottom: var(--df-space-sm);
}

.df-site-footer__whatsapp-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0 0 var(--df-space-md);
	color: var(--df-color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.df-site-footer__phone {
	color: var(--df-navy);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--df-transition-premium);
}

.df-site-footer__phone:hover,
.df-site-footer__phone:focus-visible {
	color: var(--df-green);
	text-decoration: underline;
}

.df-site-footer__whatsapp-btn {
	align-self: flex-start;
	margin-top: 0.15rem;
	box-shadow: var(--df-shadow-glow);
}

.df-site-footer__legal-note {
	margin-top: var(--df-space-md);
	padding-top: var(--df-space-md);
	border-top: 1px solid var(--df-border-soft);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.df-site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--df-space-sm);
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid var(--df-border-soft);
	text-align: center;
}

.df-site-footer__disclaimer {
	max-width: 42rem;
	font-size: 0.8125rem;
	line-height: 1.6;
}

.df-site-footer__copy {
	font-size: 0.875rem;
	font-weight: 500;
}

html.df-lang-ur .df-site-footer__col {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-site-footer__intro {
	max-width: none;
}

html.df-lang-ur .df-site-footer__menu a:hover,
html.df-lang-ur .df-site-footer__menu a:focus-visible {
	transform: translateX(-0.2rem);
}

html.df-lang-ur .df-site-footer__whatsapp-line {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

html.df-lang-ur .df-site-footer__whatsapp-btn {
	align-self: flex-end;
}

html.df-lang-ur .df-site-footer__bottom {
	text-align: right;
	align-items: flex-end;
}

html.df-lang-ur .df-site-footer .df-logo,
html.df-lang-ur .df-site-footer .df-logo__link {
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */

.df-landing {
	background: var(--df-white);
}

.df-hero,
.df-problems,
.df-intro,
.df-benefits,
.df-reviews,
.df-ingredients,
.df-how-to-use,
.df-timeline,
.df-pricing,
.df-trust,
.df-faq,
.df-final-cta {
	scroll-margin-top: var(--df-header-offset);
}

.df-text-muted {
	color: var(--df-color-text-muted);
}

.df-text-center {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Coming soon page
   -------------------------------------------------------------------------- */

.df-coming-soon {
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: var(--df-space-2xl) 0;
	background:
		radial-gradient(circle at top right, rgba(181, 208, 140, 0.35), transparent 42%),
		linear-gradient(180deg, var(--df-cream) 0%, var(--df-white) 100%);
}

.df-coming-soon__grid {
	display: grid;
	gap: var(--df-space-2xl);
	align-items: center;
}

.df-coming-soon__content {
	max-width: 38rem;
}

.df-coming-soon__urdu {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--df-navy);
	margin-top: var(--df-space-md);
}

.df-coming-soon__subheading {
	font-size: 1.125rem;
	color: var(--df-navy);
}

.df-coming-soon__supporting {
	max-width: 34rem;
}

.df-coming-soon__actions {
	margin-top: var(--df-space-xl);
}

.df-coming-soon__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-sm);
	margin-top: var(--df-space-xl);
}

.df-coming-soon__trust-item {
	padding: 0.5rem 1rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.1);
	color: var(--df-navy);
	font-size: 0.8125rem;
	font-weight: 600;
}

.df-coming-soon__visual {
	width: 100%;
}

.df-coming-soon__product-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--df-space-2xl);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 237, 0.95) 100%);
	box-shadow: var(--df-shadow-lg);
}

.df-coming-soon__jar {
	position: relative;
	width: 7.5rem;
	height: 10rem;
	margin-bottom: var(--df-space-lg);
}

.df-coming-soon__jar-cap {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4.5rem;
	height: 1.25rem;
	transform: translateX(-50%);
	border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
	background: var(--df-navy);
}

.df-coming-soon__jar-body {
	position: absolute;
	top: 1rem;
	left: 50%;
	width: 6.5rem;
	height: 8.5rem;
	transform: translateX(-50%);
	border-radius: 1rem 1rem 1.25rem 1.25rem;
	background: linear-gradient(180deg, var(--df-light-green) 0%, var(--df-green) 100%);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.df-coming-soon__mockup-label {
	margin-bottom: var(--df-space-md);
	color: var(--df-navy);
	font-weight: 700;
}

.df-coming-soon__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--df-space-xs);
}

.df-coming-soon__chip {
	padding: 0.4rem 0.85rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.06);
	color: var(--df-navy);
	font-size: 0.75rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   FAQ accordion — legacy placeholder rules removed (see FAQ section block)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section frame
   -------------------------------------------------------------------------- */

.df-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 80% 55% at 92% 12%, rgba(181, 208, 140, 0.32) 0%, transparent 58%),
		radial-gradient(ellipse 60% 50% at 8% 88%, rgba(112, 162, 52, 0.1) 0%, transparent 58%),
		var(--df-gradient-cream);
}

/* --------------------------------------------------------------------------
   Background decorative blobs
   -------------------------------------------------------------------------- */

.df-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-hero__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-hero__bg-blob--1 {
	top: -12rem;
	right: -10rem;
	width: 48rem;
	height: 48rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.20) 0%, transparent 68%);
}

.df-hero__bg-blob--2 {
	bottom: -8rem;
	left: -14rem;
	width: 36rem;
	height: 36rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.10) 0%, transparent 68%);
}

.df-hero__bg-blob--3 {
	top: 50%;
	left: 38%;
	transform: translateY(-50%);
	width: 18rem;
	height: 18rem;
	background: radial-gradient(circle, rgba(245, 245, 237, 0.75) 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   Two-column grid
   -------------------------------------------------------------------------- */

.df-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--df-space-2xl);
	align-items: center;
}

/* --------------------------------------------------------------------------
   Content column (left)
   -------------------------------------------------------------------------- */

.df-hero__content {
	max-width: 42rem;
}

.df-hero__badge {
	margin-bottom: var(--df-space-lg);
}

.df-hero__heading {
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-hero__heading-accent {
	display: block;
	color: var(--df-green);
}

.df-hero__urdu {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	line-height: 1.75;
	color: var(--df-navy);
	opacity: 0.8;
	margin: 0 0 var(--df-space-lg);
	font-weight: 500;
}

.df-hero__description {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--df-color-text);
	margin: 0 0 var(--df-space-md);
}

.df-hero__supporting {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0 0 var(--df-space-xl);
}

/* --------------------------------------------------------------------------
   Benefit chips
   -------------------------------------------------------------------------- */

.df-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
	list-style: none;
	margin: 0 0 var(--df-space-xl);
	padding: 0;
}

.df-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.95rem;
	border-radius: var(--df-radius-pill);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--df-border-green);
	color: var(--df-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: var(--df-shadow-soft);
}

.df-hero__chip::before {
	content: '';
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--df-green);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CTA buttons
   -------------------------------------------------------------------------- */

.df-hero__actions-panel {
	padding: var(--df-space-md);
	margin-bottom: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	backdrop-filter: blur(6px);
}

.df-hero__actions {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Trust row
   -------------------------------------------------------------------------- */

.df-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--df-space-sm) var(--df-space-md);
	margin-bottom: var(--df-space-md);
}

.df-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--df-navy);
}

.df-hero__trust-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--df-green);
	flex-shrink: 0;
}

.df-hero__trust-check::after {
	content: '';
	display: block;
	width: 0.35rem;
	height: 0.2rem;
	border-left: 1.5px solid var(--df-white);
	border-bottom: 1.5px solid var(--df-white);
	transform: translateY(-0.05rem) rotate(-45deg);
}

.df-hero__trust-sep {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--df-color-border);
}

.df-hero__disclaimer {
	font-size: 0.75rem;
	color: var(--df-color-text-muted);
	line-height: 1.5;
	margin: 0;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Visual column (right)
   -------------------------------------------------------------------------- */

.df-hero__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--df-space-md);
}

/* Visual: delay so content column leads */
.df-hero__visual.df-animate {
	transition-delay: 0.15s;
}

/* --------------------------------------------------------------------------
   Media card — outer container
   -------------------------------------------------------------------------- */

.df-hero__media-card {
	width: 100%;
	border-radius: calc(var(--df-radius-xl) + 0.25rem);
	border: 1px solid var(--df-border-soft);
	background: rgba(255, 255, 255, 0.88);
	box-shadow: var(--df-shadow-premium);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(8px);
}

.df-hero__stage {
	padding: var(--df-space-md);
}

.df-hero__image-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(16rem, 38vw, 22rem);
	padding: var(--df-space-2xl);
	border-radius: var(--df-radius-xl);
	border: 1.5px dashed var(--df-border-green);
	background:
		radial-gradient(ellipse 75% 65% at 50% 30%, rgba(181, 208, 140, 0.38) 0%, transparent 68%),
		linear-gradient(165deg, var(--df-cream) 0%, rgba(255, 255, 255, 0.65) 100%);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.df-hero__ph-glow {
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.16) 0%, transparent 70%);
	pointer-events: none;
}

.df-hero__ph-frame {
	position: absolute;
	inset: 1.25rem;
	border-radius: calc(var(--df-radius-xl) - 0.25rem);
	border: 1px solid rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.df-hero__ph-text {
	position: relative;
	z-index: 1;
	max-width: 14rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--df-color-text-muted);
}

/* --------------------------------------------------------------------------
   Offer pills row — flex, never absolute
   -------------------------------------------------------------------------- */

.df-hero__offer-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
	align-items: center;
	justify-content: center;
	padding: var(--df-space-md) var(--df-space-lg) var(--df-space-lg);
	background: rgba(245, 245, 237, 0.55);
	border-top: 1px solid var(--df-border-soft);
}

.df-hero__offer-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.9rem;
	border-radius: var(--df-radius-pill);
	background: var(--df-white);
	border: 1px solid var(--df-border-green);
	color: var(--df-navy);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: var(--df-shadow-soft);
}

.df-hero__offer-pill::before {
	content: '';
	display: inline-block;
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 50%;
	background: var(--df-green);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Animation motion tokens — consolidated in :root above
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Base animation utility
   Sets the "invisible" starting state. JS adds .is-visible to trigger reveal.
   -------------------------------------------------------------------------- */

.df-animate {
	opacity: 0;
	transition:
		opacity var(--df-duration-base) var(--df-ease-out-cubic),
		transform var(--df-duration-base) var(--df-ease-out-cubic);
}

/* Direction modifiers — applied before .is-visible */

.df-animate--up {
	transform: translateY(1.75rem);
}

.df-animate--fade {
	transform: none; /* opacity-only fade, no movement */
}

.df-animate--scale {
	transform: scale(0.93);
}

.df-animate--left {
	transform: translateX(-1.75rem);
}

.df-animate--right {
	transform: translateX(1.75rem);
}

/* Visible state — JS adds this class via IntersectionObserver */

.df-animate.is-visible {
	opacity: 1;
	transform: none;
}

/* Slight delay on the visual column so content leads */
.df-coming-soon__visual.df-animate {
	transition-delay: 0.12s;
}

/* --------------------------------------------------------------------------
   Stagger — parent is observed; children animate with offset delays
   -------------------------------------------------------------------------- */

.df-animate--stagger > * {
	opacity: 0;
	transform: translateY(0.85rem);
	transition:
		opacity var(--df-duration-base) var(--df-ease-out-cubic),
		transform var(--df-duration-base) var(--df-ease-out-cubic);
}

.df-animate--stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

.df-animate--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.df-animate--stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.df-animate--stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.df-animate--stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.df-animate--stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.df-animate--stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.df-animate--stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.df-animate--stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* --------------------------------------------------------------------------
   Floating animation — applied to the product jar container
   -------------------------------------------------------------------------- */

@keyframes df-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-0.7rem); }
}

.df-floating {
	animation: df-float 4.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Soft pulse — gentle glow on the product card
   -------------------------------------------------------------------------- */

@keyframes df-pulse-soft {
	0%, 100% { box-shadow: var(--df-shadow-lg); }
	50%       { box-shadow: var(--df-shadow-lg), 0 0 0 6px rgba(112, 162, 52, 0.10); }
}

.df-pulse-soft {
	animation: df-pulse-soft 4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Hover lift — subtle elevation on interactive elements
   -------------------------------------------------------------------------- */

.df-hover-lift {
	transition:
		transform var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		border-color var(--df-transition-premium);
	will-change: transform;
}

.df-hover-lift:hover,
.df-hover-lift:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--df-shadow-medium);
}

/* Make sure df-btn already has a base transition and hover lift doesn't fight it */
.df-btn.df-hover-lift {
	/* Override df-btn's own transform so hover-lift owns it */
	transition:
		background-color var(--df-transition),
		border-color var(--df-transition),
		color var(--df-transition),
		transform var(--df-duration-fast) var(--df-ease-out-cubic),
		box-shadow var(--df-duration-fast) var(--df-ease-out-cubic);
}

.df-btn.df-hover-lift:hover,
.df-btn.df-hover-lift:focus {
	transform: translateY(-2px);
	box-shadow: var(--df-shadow-glow);
}

/* --------------------------------------------------------------------------
   Admin preview notice
   -------------------------------------------------------------------------- */

.df-admin-notice {
	position: fixed;
	bottom: 0.625rem;
	left: 0.625rem;
	right: auto;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.5625rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--df-white);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.25;
	box-shadow: 0 6px 20px rgba(20, 50, 74, 0.18);
	backdrop-filter: blur(8px);
	max-width: min(calc(100vw - 1.25rem), 22rem);
	pointer-events: auto;
	transition:
		padding var(--df-transition-premium),
		border-radius var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		max-width var(--df-transition-premium);
}

.df-admin-notice:hover,
.df-admin-notice:focus-within {
	padding: 0.5rem 0.75rem;
	border-radius: var(--df-radius-lg);
	box-shadow: var(--df-shadow-premium);
}

.df-admin-notice__icon {
	font-size: 0.4375rem;
	color: var(--df-sage);
	flex-shrink: 0;
}

.df-admin-notice__compact {
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.df-admin-notice__expand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		max-width var(--df-transition-premium),
		opacity var(--df-transition-premium);
}

.df-admin-notice:hover .df-admin-notice__expand,
.df-admin-notice:focus-within .df-admin-notice__expand {
	max-width: 18rem;
	opacity: 1;
}

.df-admin-notice:hover .df-admin-notice__compact,
.df-admin-notice:focus-within .df-admin-notice__compact {
	display: none;
}

.df-admin-notice__text {
	flex: 1;
	min-width: 0;
	line-height: 1.35;
	font-weight: 500;
	white-space: nowrap;
}

.df-admin-notice__btn {
	flex-shrink: 0;
	padding: 0.3rem 0.65rem;
	border-radius: var(--df-radius-pill);
	background: var(--df-green);
	color: var(--df-white);
	font-size: 0.6875rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}

.df-admin-notice__btn:hover,
.df-admin-notice__btn:focus-visible {
	background: var(--df-sage);
	color: var(--df-navy);
	transform: none;
}

/* Minimal landing offset — notice is a compact pill */
body.logged-in .df-landing {
	padding-bottom: clamp(2.75rem, 5vh, 3.5rem);
}

/* ==========================================================================
   PROBLEMS SECTION
   ========================================================================== */

.df-problems {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 70% 45% at 50% 100%, rgba(181, 208, 140, 0.12) 0%, transparent 55%),
		linear-gradient(180deg, var(--df-white) 0%, var(--df-cream) 100%);
}

.df-problems__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-problems__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-problems__bg-blob--1 {
	top: -6rem;
	right: -8rem;
	width: 32rem;
	height: 32rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.22) 0%, transparent 68%);
}

.df-problems__bg-blob--2 {
	bottom: -4rem;
	left: -10rem;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-problems__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

/* Intro — centred header */
.df-problems__intro {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.df-problems__badge {
	margin-bottom: var(--df-space-md);
}

.df-problems__heading {
	font-size: clamp(1.625rem, 3.8vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-sm);
}

.df-problems__urdu {
	font-size: clamp(1rem, 2.2vw, 1.1875rem);
	line-height: 1.75;
	color: var(--df-navy);
	opacity: 0.75;
	margin: 0 0 var(--df-space-lg);
	font-weight: 500;
	text-align: right;
}

.df-problems__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0 auto;
	max-width: 36rem;
}

/* Cards grid */
.df-problems__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--df-gap-card);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-problems__card {
	min-width: 0;
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-problems__card:hover,
.df-problems__card:focus-within {
	border-color: var(--df-border-green);
	box-shadow: var(--df-shadow-medium);
}

.df-problems__card--featured,
.df-problems__card--accent {
	border-color: rgba(112, 162, 52, 0.24);
	background:
		linear-gradient(155deg, rgba(112, 162, 52, 0.08) 0%, rgba(255, 255, 255, 0.98) 45%),
		var(--df-white);
	box-shadow: var(--df-shadow-glow);
}

.df-problems__card--featured .df-problems__icon,
.df-problems__card--accent .df-problems__icon {
	background: var(--df-gradient-green-soft);
	border-color: rgba(112, 162, 52, 0.3);
	color: var(--df-navy);
}

.df-problems__card-inner {
	display: flex;
	align-items: flex-start;
	gap: var(--df-space-md);
	padding: var(--df-space-lg);
	min-height: 100%;
}

.df-problems__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.15) 100%);
	border: 1px solid rgba(112, 162, 52, 0.2);
	color: var(--df-green);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
}

.df-problems__card-body {
	flex: 1;
	min-width: 0;
}

.df-problems__card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 0.35rem;
	line-height: 1.3;
}

.df-problems__card-text {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--df-color-text-muted);
	margin: 0;
}

/* Footer: note + visual side by side */
.df-problems__footer {
	display: grid;
	gap: var(--df-space-lg);
	align-items: stretch;
}

.df-problems__note {
	display: flex;
	align-items: flex-start;
	gap: var(--df-space-md);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(135deg, rgba(245, 245, 237, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
}

.df-problems__note-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(20, 50, 74, 0.06);
	color: var(--df-navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.df-problems__note-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-xs);
}

.df-problems__note-text {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--df-color-text);
	margin: 0;
}

/* Visual placeholder — compact, not a tall sidebar */
.df-problems__visual {
	min-width: 0;
}

.df-problems__visual.df-animate {
	transition-delay: 0.1s;
}

.df-problems__visual-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--df-space-md);
	height: 100%;
	min-height: 10rem;
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	border: 1px solid rgba(112, 162, 52, 0.18);
	background:
		radial-gradient(ellipse 90% 80% at 50% 20%, rgba(181, 208, 140, 0.2) 0%, transparent 55%),
		var(--df-white);
	box-shadow: var(--df-shadow-sm);
	text-align: center;
}

.df-problems__visual-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--df-radius-lg);
	border: 1.5px dashed rgba(112, 162, 52, 0.3);
	background: rgba(245, 245, 237, 0.8);
}

.df-problems__visual-icon {
	font-size: 1.25rem;
	color: var(--df-sage);
	line-height: 1;
}

.df-problems__visual-text {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--df-color-text-muted);
	margin: 0;
	line-height: 1.45;
	max-width: 12rem;
}

/* Bridge CTA bar */
.df-problems__bridge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-lg) var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-green-soft);
	border: 1px solid var(--df-border-green);
	box-shadow: var(--df-shadow-soft);
	text-align: center;
}

.df-problems__bridge-text {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--df-navy);
	margin: 0;
}

/* ==========================================================================
   INTRO SECTION — Product Introduction
   ========================================================================== */

.df-intro {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 60% 40% at 15% 50%, rgba(112, 162, 52, 0.08) 0%, transparent 55%),
		var(--df-gradient-cream);
}

.df-intro__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-intro__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-intro__bg-blob--1 {
	top: -5rem;
	left: -6rem;
	width: 26rem;
	height: 26rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.1) 0%, transparent 68%);
}

.df-intro__bg-blob--2 {
	bottom: -6rem;
	right: -8rem;
	width: 30rem;
	height: 30rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.18) 0%, transparent 68%);
}

.df-intro__inner {
	position: relative;
	z-index: 1;
}

.df-intro__grid {
	display: grid;
	gap: var(--df-space-2xl);
	align-items: center;
}

.df-intro__content {
	max-width: var(--df-measure-md);
}

.df-intro__badge {
	margin-bottom: var(--df-space-md);
}

.df-intro__heading {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-lg);
}

.df-intro__text {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--df-color-text);
	margin: 0 0 var(--df-space-md);
}

.df-intro__list {
	list-style: none;
	margin: 0 0 var(--df-space-lg);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
}

.df-intro__list li {
	position: relative;
	padding-inline-start: 1.625rem;
	font-size: 0.9875rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--df-navy);
}

.df-intro__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--df-green) 0%, var(--df-sage) 100%);
	box-shadow: 0 0 0 3px rgba(112, 162, 52, 0.14);
}

.df-intro__routine {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-xl);
	padding: var(--df-space-md) var(--df-space-lg);
	border-radius: var(--df-radius-lg);
	background: rgba(112, 162, 52, 0.08);
	border: 1px solid rgba(112, 162, 52, 0.14);
}

.df-intro__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--df-space-sm);
	padding: 0.875rem 1.375rem;
	border-radius: var(--df-radius-pill);
	background: transparent;
	border: 2px solid var(--df-navy);
	color: var(--df-navy);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
	transition:
		background-color var(--df-transition-premium),
		border-color var(--df-transition-premium),
		color var(--df-transition-premium),
		transform var(--df-transition-premium),
		box-shadow var(--df-transition-premium);
}

.df-intro__cta:hover,
.df-intro__cta:focus-visible {
	background: var(--df-navy);
	border-color: var(--df-navy);
	color: var(--df-white);
	outline: none;
	box-shadow: var(--df-shadow-medium);
	transform: translateY(-2px);
}

.df-intro__cta-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.df-intro__cta:hover .df-intro__cta-icon,
.df-intro__cta:focus-visible .df-intro__cta-icon {
	transform: translateX(0.2rem);
}

html.df-lang-ur .df-intro__cta:hover .df-intro__cta-icon,
html.df-lang-ur .df-intro__cta:focus-visible .df-intro__cta-icon {
	transform: translateX(-0.2rem);
}

.df-intro__visual.df-animate {
	transition-delay: 0.12s;
}

.df-intro__card {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-lg);
	padding: var(--df-space-lg);
	border-radius: calc(var(--df-radius-xl) + 0.25rem);
	border: 1px solid var(--df-border-soft);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--df-shadow-premium);
	backdrop-filter: blur(10px);
}

.df-intro__image-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(12rem, 28vw, 16rem);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	border: 1.5px dashed var(--df-border-green);
	background:
		radial-gradient(ellipse 80% 70% at 50% 30%, rgba(181, 208, 140, 0.35) 0%, transparent 68%),
		linear-gradient(155deg, var(--df-cream) 0%, rgba(255, 255, 255, 0.7) 100%);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.df-intro__ph-deco {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 75% 25%, rgba(149, 190, 118, 0.18) 0%, transparent 45%),
		radial-gradient(circle at 25% 75%, rgba(112, 162, 52, 0.1) 0%, transparent 42%);
	pointer-events: none;
}

.df-intro__ph-text {
	position: relative;
	z-index: 1;
	max-width: 14rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--df-color-text-muted);
}

.df-intro__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
}

.df-intro__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.95rem;
	border-radius: var(--df-radius-pill);
	background: var(--df-white);
	border: 1px solid var(--df-border-soft);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--df-navy);
	box-shadow: var(--df-shadow-soft);
}

.df-intro__routine-card {
	padding: var(--df-space-md) var(--df-space-lg);
	border-radius: var(--df-radius-lg);
	background: var(--df-gradient-green-soft);
	border: 1px solid var(--df-border-green);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.df-intro__routine-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-sm);
}

.df-intro__routine-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xs);
}

.df-intro__routine-list li {
	position: relative;
	padding-inline-start: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--df-color-text);
}

.df-intro__routine-list li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	color: var(--df-green);
	font-weight: 700;
	font-size: 0.75rem;
}

.df-intro__note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--df-color-text-muted);
	text-align: center;
}

html.df-lang-ur .df-intro__heading,
html.df-lang-ur .df-intro__routine-title {
	line-height: 1.6;
}

html.df-lang-ur .df-intro__note {
	text-align: center;
}

html.df-lang-ur .df-intro__routine-list li,
html.df-lang-ur .df-intro__list li {
	padding-inline-start: 1.625rem;
}

/* ==========================================================================
   BENEFITS SECTION
   ========================================================================== */

.df-benefits {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 85% 55% at 50% 0%, rgba(181, 208, 140, 0.16) 0%, transparent 58%),
		linear-gradient(180deg, var(--df-white) 0%, var(--df-cream) 100%);
}

.df-benefits__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-benefits__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-benefits__bg-blob--1 {
	top: 8%;
	right: -10rem;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.1) 0%, transparent 68%);
}

.df-benefits__bg-blob--2 {
	bottom: -5rem;
	left: -8rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.16) 0%, transparent 68%);
}

.df-benefits__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-benefits__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-benefits__badge {
	margin-bottom: var(--df-space-md);
}

.df-benefits__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-benefits__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-benefits__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--df-gap-card);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-benefits__card {
	min-width: 0;
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-benefits__card:hover,
.df-benefits__card:focus-within {
	border-color: var(--df-border-green);
	box-shadow: var(--df-shadow-medium);
}

.df-benefits__card--featured {
	grid-column: 1 / -1;
	border-color: rgba(112, 162, 52, 0.3);
	background:
		linear-gradient(145deg, rgba(112, 162, 52, 0.1) 0%, rgba(255, 255, 255, 0.98) 50%),
		var(--df-white);
	box-shadow: var(--df-shadow-glow);
}

.df-benefits__card--featured .df-benefits__card-inner {
	padding: var(--df-space-xl);
}

.df-benefits__card--featured .df-benefits__card-title {
	font-size: clamp(1.125rem, 2vw, 1.25rem);
}

.df-benefits__card--featured .df-benefits__card-text {
	font-size: 0.9375rem;
}

.df-benefits__card-inner {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	padding: var(--df-space-lg);
	min-height: 100%;
}

.df-benefits__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--df-space-sm);
}

.df-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 3rem;
	height: 3rem;
	padding: 0 0.625rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.14) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-benefits__card--featured .df-benefits__icon {
	background: linear-gradient(135deg, rgba(112, 162, 52, 0.22) 0%, rgba(181, 208, 140, 0.35) 100%);
	border-color: rgba(112, 162, 52, 0.35);
	color: var(--df-navy);
}

.df-benefits__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.06);
	color: var(--df-color-text-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.df-benefits__featured-label {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	justify-self: start;
	padding: 0.25rem 0.625rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.14);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-benefits__card-body {
	flex: 1;
	min-width: 0;
}

.df-benefits__card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 0.4rem;
	line-height: 1.35;
}

.df-benefits__card-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-benefits__tag {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	justify-self: start;
	margin-top: auto;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.05);
	border: 1px solid rgba(20, 50, 74, 0.08);
	color: var(--df-navy);
	font-size: 0.6875rem;
	font-weight: 600;
}

.df-benefits__card--featured .df-benefits__tag {
	background: rgba(112, 162, 52, 0.1);
	border-color: rgba(112, 162, 52, 0.18);
	color: var(--df-green);
}

.df-benefits__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--df-shadow-premium);
	text-align: start;
}

.df-benefits__cta-text {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	color: var(--df-white);
	margin: 0;
	max-width: var(--df-measure-sm);
	line-height: 1.55;
}

.df-benefits__cta .df-btn--primary {
	flex-shrink: 0;
	box-shadow: var(--df-shadow-glow);
}

html.df-lang-ur .df-benefits__card-body {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-benefits__intro,
html.df-lang-ur .df-benefits__cta {
	text-align: center;
}

html.df-lang-ur .df-benefits__cta {
	text-align: center;
	justify-content: center;
}

html.df-lang-ur .df-benefits__heading,
html.df-lang-ur .df-benefits__card-title {
	line-height: 1.6;
}

html.df-lang-ur .df-reviews__content,
html.df-lang-ur .df-reviews__card-text,
html.df-lang-ur .df-reviews__attribution {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-reviews__trust-row--left {
	text-align: start;
}

/* ==========================================================================
   REVIEWS SECTION — Customer trust / social proof
   ========================================================================== */

.df-reviews {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 70% 50% at 85% 20%, rgba(181, 208, 140, 0.14) 0%, transparent 58%),
		radial-gradient(ellipse 55% 45% at 10% 80%, rgba(112, 162, 52, 0.08) 0%, transparent 55%),
		var(--df-gradient-cream);
}

.df-reviews__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-reviews__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-reviews__bg-blob--1 {
	top: -4rem;
	right: -6rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.2) 0%, transparent 68%);
}

.df-reviews__bg-blob--2 {
	bottom: -5rem;
	left: -8rem;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-reviews__inner {
	position: relative;
	z-index: 1;
}

.df-reviews__grid {
	display: grid;
	gap: var(--df-space-2xl);
	align-items: center;
}

.df-reviews__content {
	max-width: var(--df-measure-md);
}

.df-reviews__badge {
	margin-bottom: var(--df-space-md);
}

.df-reviews__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-reviews__intro {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text);
	margin: 0 0 var(--df-space-xl);
}

.df-reviews__cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--df-space-sm);
	margin-bottom: var(--df-space-lg);
}

.df-reviews__cta-text {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--df-navy);
	margin: 0;
	line-height: 1.5;
}

.df-reviews__trust-row {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--df-color-text-muted);
	line-height: 1.55;
	margin: 0;
}

.df-reviews__trust-row--left {
	padding-top: var(--df-space-md);
	border-top: 1px solid var(--df-border-soft);
}

@keyframes dfReviewScroll {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-50%);
	}
}

.df-reviews__slider-panel.df-animate {
	transition-delay: 0.12s;
}

.df-reviews__slider-panel {
	min-width: 0;
}

.df-reviews__slider-window {
	position: relative;
	overflow: hidden;
	max-height: clamp(21rem, 38vw, 30rem);
	border-radius: var(--df-radius-xl);
	outline: none;
}

.df-reviews__slider-window:focus-visible {
	box-shadow:
		0 0 0 2px var(--df-white),
		0 0 0 4px rgba(112, 162, 52, 0.45);
}

.df-reviews__slider-fade {
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(2.5rem, 8%, 4rem);
	z-index: 2;
	pointer-events: none;
}

.df-reviews__slider-fade--top {
	top: 0;
	background: linear-gradient(
		to bottom,
		var(--df-cream) 0%,
		rgba(245, 245, 237, 0.88) 40%,
		transparent 100%
	);
}

.df-reviews__slider-fade--bottom {
	bottom: 0;
	background: linear-gradient(
		to top,
		var(--df-cream) 0%,
		rgba(245, 245, 237, 0.88) 40%,
		transparent 100%
	);
}

.df-reviews__slider-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	animation: dfReviewScroll 29s linear infinite;
	will-change: transform;
}

.df-reviews__slider-group {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
	flex-shrink: 0;
}

.df-reviews__slider-window:hover .df-reviews__slider-track,
.df-reviews__slider-window:focus-within .df-reviews__slider-track {
	animation-play-state: paused;
}

.df-reviews__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xs);
	padding: var(--df-space-lg);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(112, 162, 52, 0.2);
	box-shadow:
		0 4px 24px rgba(5, 30, 58, 0.06),
		0 1px 3px rgba(5, 30, 58, 0.04);
	backdrop-filter: blur(8px);
}

.df-reviews__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-sm);
	margin-bottom: var(--df-space-xs);
}

.df-reviews__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--df-gradient-green-soft);
	border: 1px solid var(--df-border-green);
	color: var(--df-navy);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	flex-shrink: 0;
}

.df-reviews__stars {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: var(--df-green);
	line-height: 1;
}

.df-reviews__quote-mark {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 1rem;
	font-size: 2.5rem;
	line-height: 1;
	color: rgba(112, 162, 52, 0.18);
	font-family: Georgia, "Times New Roman", serif;
	pointer-events: none;
}

.df-reviews__card-text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-navy);
	font-style: normal;
}

.df-reviews__attribution {
	display: block;
	margin-top: var(--df-space-sm);
	font-size: 0.8125rem;
	font-weight: 600;
	font-style: normal;
	color: var(--df-color-text-muted);
}

html.df-lang-ur .df-reviews__heading {
	line-height: 1.55;
}

html.df-lang-ur .df-reviews__cta-wrap {
	align-items: flex-start;
}

@media (prefers-reduced-motion: reduce) {
	.df-reviews__slider-track {
		animation: none !important;
		transform: none !important;
	}

	.df-reviews__slider-window {
		max-height: none;
		overflow: visible;
	}

	.df-reviews__slider-fade {
		display: none;
	}

	.df-reviews__slider-group[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   INGREDIENTS SECTION — Herbal formula
   ========================================================================== */

.df-ingredients {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 60% 45% at 15% 15%, rgba(181, 208, 140, 0.12) 0%, transparent 55%),
		radial-gradient(ellipse 50% 40% at 90% 85%, rgba(112, 162, 52, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, var(--df-cream) 0%, var(--df-white) 100%);
}

.df-ingredients__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-ingredients__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-ingredients__bg-blob--1 {
	top: -3rem;
	left: -6rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.18) 0%, transparent 68%);
}

.df-ingredients__bg-blob--2 {
	bottom: -4rem;
	right: -8rem;
	width: 26rem;
	height: 26rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-ingredients__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-ingredients__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-ingredients__badge {
	margin-bottom: var(--df-space-md);
}

.df-ingredients__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-ingredients__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-ingredients__layout {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-ingredients__feature {
	min-width: 0;
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(155deg, rgba(112, 162, 52, 0.1) 0%, rgba(255, 255, 255, 0.98) 52%),
		var(--df-white);
	border: 1px solid rgba(112, 162, 52, 0.24);
	box-shadow: var(--df-shadow-glow);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-ingredients__feature-inner {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-lg);
	padding: var(--df-space-xl);
}

.df-ingredients__feature-title {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-sm);
}

.df-ingredients__feature-text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0 0 var(--df-space-md);
}

.df-ingredients__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-ingredients__fact {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.1);
	border: 1px solid rgba(112, 162, 52, 0.2);
	color: var(--df-green);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
}

.df-ingredients__feature-visual {
	min-width: 0;
}

.df-ingredients__visual-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(10rem, 24vw, 14rem);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-lg);
	border: 1.5px dashed rgba(112, 162, 52, 0.32);
	background:
		radial-gradient(ellipse 80% 70% at 50% 40%, rgba(181, 208, 140, 0.16) 0%, transparent 70%),
		rgba(255, 255, 255, 0.72);
}

.df-ingredients__visual-label {
	max-width: 14rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--df-color-text-muted);
	text-align: center;
}

.df-ingredients__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--df-gap-card);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.df-ingredients__card {
	min-width: 0;
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-ingredients__card:hover,
.df-ingredients__card:focus-within {
	border-color: var(--df-border-green);
	box-shadow: var(--df-shadow-medium);
}

.df-ingredients__card--accent {
	background:
		linear-gradient(160deg, rgba(181, 208, 140, 0.14) 0%, rgba(255, 255, 255, 0.96) 100%);
	border-color: rgba(112, 162, 52, 0.18);
}

.df-ingredients__card-inner {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	padding: var(--df-space-lg);
	min-height: 100%;
}

.df-ingredients__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--df-space-sm);
}

.df-ingredients__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.12) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-ingredients__chip {
	display: inline-flex;
	align-self: flex-start;
	flex-shrink: 0;
	max-width: 55%;
	padding: 0.25rem 0.5625rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.05);
	border: 1px solid rgba(20, 50, 74, 0.08);
	color: var(--df-navy);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: start;
}

.df-ingredients__card--accent .df-ingredients__chip {
	background: rgba(112, 162, 52, 0.1);
	border-color: rgba(112, 162, 52, 0.18);
	color: var(--df-green);
}

.df-ingredients__card-body {
	flex: 1;
	min-width: 0;
}

.df-ingredients__card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 0.35rem;
	line-height: 1.35;
}

.df-ingredients__card-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-ingredients__safety {
	padding: var(--df-space-lg) var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(20, 50, 74, 0.1);
	border-inline-start: 3px solid var(--df-green);
	box-shadow: var(--df-shadow-soft);
}

.df-ingredients__safety-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-xs);
	line-height: 1.4;
}

.df-ingredients__safety-text {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-ingredients__bridge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--df-shadow-premium);
}

.df-ingredients__bridge-text {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	color: var(--df-white);
	margin: 0;
	max-width: var(--df-measure-sm);
	line-height: 1.55;
}

.df-ingredients__bridge .df-btn--primary {
	flex-shrink: 0;
	box-shadow: var(--df-shadow-glow);
}

html.df-lang-ur .df-ingredients__feature-copy,
html.df-lang-ur .df-ingredients__card-body {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-ingredients__intro,
html.df-lang-ur .df-ingredients__bridge {
	text-align: center;
}

html.df-lang-ur .df-ingredients__bridge {
	justify-content: center;
}

html.df-lang-ur .df-ingredients__heading {
	line-height: 1.55;
}

html.df-lang-ur .df-ingredients__safety {
	text-align: right;
}

/* ==========================================================================
   HOW TO USE SECTION — Guided routine
   ========================================================================== */

.df-how-to-use {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 70% 50% at 50% 100%, rgba(181, 208, 140, 0.1) 0%, transparent 55%),
		radial-gradient(ellipse 45% 35% at 8% 20%, rgba(112, 162, 52, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, var(--df-white) 0%, var(--df-cream) 100%);
}

.df-how-to-use__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-how-to-use__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-how-to-use__bg-blob--1 {
	top: 10%;
	right: -7rem;
	width: 20rem;
	height: 20rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.14) 0%, transparent 68%);
}

.df-how-to-use__bg-blob--2 {
	bottom: -4rem;
	left: -6rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.07) 0%, transparent 68%);
}

.df-how-to-use__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-how-to-use__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-how-to-use__badge {
	margin-bottom: var(--df-space-md);
}

.df-how-to-use__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-how-to-use__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-how-to-use__layout {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-how-to-use__steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 1.75rem;
	min-width: 0;
}

.df-how-to-use__steps::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.4375rem;
	top: 1.25rem;
	bottom: 1.25rem;
	width: 2px;
	border-radius: var(--df-radius-pill);
	background: linear-gradient(
		to bottom,
		rgba(112, 162, 52, 0.45) 0%,
		rgba(181, 208, 140, 0.35) 50%,
		rgba(112, 162, 52, 0.2) 100%
	);
}

.df-how-to-use__step {
	position: relative;
	min-width: 0;
}

.df-how-to-use__step::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.4375rem;
	top: 1.625rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--df-green);
	box-shadow: 0 0 0 3px rgba(112, 162, 52, 0.18);
	z-index: 1;
}

.df-how-to-use__step-card {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	padding: var(--df-space-lg);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
}

.df-how-to-use__step-card.df-hover-lift:hover,
.df-how-to-use__step-card.df-hover-lift:focus-visible {
	border-color: var(--df-border-green);
}

.df-how-to-use__step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-sm);
}

.df-how-to-use__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.12);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
}

.df-how-to-use__step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.12) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-how-to-use__step-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0;
	line-height: 1.35;
}

.df-how-to-use__step-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-how-to-use__reminder {
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(155deg, rgba(20, 50, 74, 0.04) 0%, rgba(255, 255, 255, 0.98) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	box-shadow: var(--df-shadow-glow);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium),
		transform var(--df-transition-premium);
}

.df-how-to-use__reminder-title {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-sm);
	line-height: 1.35;
}

.df-how-to-use__reminder-text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0 0 var(--df-space-md);
}

.df-how-to-use__reminder-note {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--df-navy);
	margin: 0;
	padding: var(--df-space-sm) var(--df-space-md);
	border-radius: var(--df-radius-md);
	background: rgba(112, 162, 52, 0.08);
	border: 1px solid rgba(112, 162, 52, 0.14);
}

.df-how-to-use__bridge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--df-shadow-premium);
}

.df-how-to-use__bridge-text {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	color: var(--df-white);
	margin: 0;
	max-width: var(--df-measure-sm);
	line-height: 1.55;
}

.df-how-to-use__bridge .df-btn--primary {
	flex-shrink: 0;
	box-shadow: var(--df-shadow-glow);
}

html.df-lang-ur .df-how-to-use__step-card,
html.df-lang-ur .df-how-to-use__reminder {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-how-to-use__intro,
html.df-lang-ur .df-how-to-use__bridge {
	text-align: center;
}

html.df-lang-ur .df-how-to-use__bridge {
	justify-content: center;
}

html.df-lang-ur .df-how-to-use__heading {
	line-height: 1.55;
}

/* ==========================================================================
   TIMELINE SECTION — Results progress
   ========================================================================== */

.df-timeline {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 65% 45% at 85% 15%, rgba(181, 208, 140, 0.12) 0%, transparent 55%),
		radial-gradient(ellipse 55% 40% at 12% 88%, rgba(112, 162, 52, 0.07) 0%, transparent 55%),
		linear-gradient(180deg, var(--df-cream) 0%, var(--df-white) 100%);
}

.df-timeline__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-timeline__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-timeline__bg-blob--1 {
	top: -3rem;
	right: -5rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.16) 0%, transparent 68%);
}

.df-timeline__bg-blob--2 {
	bottom: -4rem;
	left: -7rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-timeline__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-timeline__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-timeline__badge {
	margin-bottom: var(--df-space-md);
}

.df-timeline__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-timeline__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-timeline__layout {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-timeline__milestones {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 1.75rem;
	min-width: 0;
}

.df-timeline__milestones::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.4375rem;
	top: 1rem;
	bottom: 1rem;
	width: 2px;
	border-radius: var(--df-radius-pill);
	background: linear-gradient(
		to bottom,
		rgba(112, 162, 52, 0.25) 0%,
		rgba(112, 162, 52, 0.55) 50%,
		rgba(112, 162, 52, 0.85) 100%
	);
}

.df-timeline__milestone {
	position: relative;
	min-width: 0;
}

.df-timeline__milestone::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.4375rem;
	top: 1.5rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--df-green);
	box-shadow: 0 0 0 3px rgba(112, 162, 52, 0.18);
	z-index: 1;
}

.df-timeline__milestone:nth-child(2)::before {
	background: linear-gradient(135deg, var(--df-sage) 0%, var(--df-green) 100%);
}

.df-timeline__milestone:nth-child(3)::before {
	background: var(--df-green);
	box-shadow:
		0 0 0 3px rgba(112, 162, 52, 0.22),
		0 0 12px rgba(112, 162, 52, 0.28);
}

.df-timeline__card {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	padding: var(--df-space-lg);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
}

.df-timeline__card.df-hover-lift:hover,
.df-timeline__card.df-hover-lift:focus-visible {
	border-color: var(--df-border-green);
}

.df-timeline__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-sm);
}

.df-timeline__label {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.12);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.03em;
}

.df-timeline__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.12) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-timeline__card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0;
	line-height: 1.35;
}

.df-timeline__card-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-timeline__note {
	padding: var(--df-space-lg) var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(20, 50, 74, 0.1);
	border-inline-start: 3px solid rgba(112, 162, 52, 0.55);
	box-shadow: var(--df-shadow-soft);
}

.df-timeline__note-text {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-timeline__bridge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--df-shadow-premium);
}

.df-timeline__bridge-text {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	color: var(--df-white);
	margin: 0;
	max-width: var(--df-measure-sm);
	line-height: 1.55;
}

.df-timeline__bridge .df-btn--primary {
	flex-shrink: 0;
	box-shadow: var(--df-shadow-glow);
}

html.df-lang-ur .df-timeline__card,
html.df-lang-ur .df-timeline__note {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-timeline__intro,
html.df-lang-ur .df-timeline__bridge {
	text-align: center;
}

html.df-lang-ur .df-timeline__bridge {
	justify-content: center;
}

html.df-lang-ur .df-timeline__heading {
	line-height: 1.55;
}

/* ==========================================================================
   PRICING SECTION — Launch offer bundles
   ========================================================================== */

.df-pricing {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 75% 50% at 50% 0%, rgba(181, 208, 140, 0.14) 0%, transparent 58%),
		linear-gradient(180deg, var(--df-white) 0%, var(--df-cream) 100%);
}

.df-pricing__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-pricing__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-pricing__bg-blob--1 {
	top: 6%;
	left: -6rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-pricing__bg-blob--2 {
	bottom: -5rem;
	right: -8rem;
	width: 26rem;
	height: 26rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.14) 0%, transparent 68%);
}

.df-pricing__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-pricing__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-pricing__badge {
	margin-bottom: var(--df-space-md);
}

.df-pricing__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-pricing__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0 0 var(--df-space-md);
}

.df-pricing__urgency {
	display: inline-block;
	margin: 0;
	padding: 0.375rem 0.875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.1);
	border: 1px solid rgba(112, 162, 52, 0.2);
	color: var(--df-green);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.45;
}

.df-pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--df-gap-card);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch;
}

.df-pricing__card {
	min-width: 0;
}

.df-pricing__card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
	height: 100%;
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
}

.df-pricing__card-inner.df-hover-lift:hover,
.df-pricing__card-inner.df-hover-lift:focus-within {
	border-color: var(--df-border-green);
}

.df-pricing__card--featured .df-pricing__card-inner {
	border-color: rgba(112, 162, 52, 0.32);
	background:
		linear-gradient(165deg, rgba(112, 162, 52, 0.1) 0%, rgba(255, 255, 255, 0.98) 55%),
		var(--df-white);
	box-shadow: var(--df-shadow-glow);
}

.df-pricing__card--featured .df-pricing__card-inner::before {
	content: "";
	position: absolute;
	inset: -0.5rem;
	border-radius: calc(var(--df-radius-xl) + 0.5rem);
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(112, 162, 52, 0.16) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.df-pricing__card-badge {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--df-radius-pill);
	background: var(--df-green);
	color: var(--df-white);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-pricing__card--featured .df-pricing__card-badge {
	background: var(--df-navy);
}

.df-pricing__card-head {
	min-width: 0;
}

.df-pricing__card-title {
	font-size: clamp(1.125rem, 2.5vw, 1.3125rem);
	font-weight: 700;
	color: var(--df-navy);
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.df-pricing__card-subtitle {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-pricing__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--df-space-sm) var(--df-space-md);
}

.df-pricing__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--df-space-sm);
	margin: 0;
}

.df-pricing__regular {
	font-size: 0.9375rem;
	color: var(--df-color-text-muted);
}

.df-pricing__regular s {
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(95, 111, 127, 0.55);
}

.df-pricing__sale {
	font-size: clamp(1.625rem, 4vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--df-green);
	letter-spacing: -0.02em;
}

.df-pricing__savings {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.625rem;
	border-radius: var(--df-radius-pill);
	background: rgba(112, 162, 52, 0.12);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
}

.df-pricing__features {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.df-pricing__feature {
	position: relative;
	padding-inline-start: 1.125rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--df-color-text-muted);
}

.df-pricing__feature::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: var(--df-green);
	box-shadow: 0 0 0 2px rgba(112, 162, 52, 0.15);
}

.df-pricing__btn {
	width: 100%;
	justify-content: center;
	margin-top: auto;
	box-shadow: var(--df-shadow-glow);
}

.df-pricing__card--featured .df-pricing__btn {
	background: var(--df-navy);
	border-color: var(--df-navy);
}

.df-pricing__card--featured .df-pricing__btn:hover,
.df-pricing__card--featured .df-pricing__btn:focus {
	background: #1a4260;
	border-color: #1a4260;
}

.df-pricing__trust {
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	text-align: center;
}

.df-pricing__trust-list {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	list-style: none;
	margin: 0 0 var(--df-space-md);
	padding: 0;
}

.df-pricing__trust-item {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--df-navy);
}

.df-pricing__trust-item:not(:last-child)::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: var(--df-space-sm) auto 0;
	background: rgba(112, 162, 52, 0.22);
}

.df-pricing__support-note {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--df-color-text-muted);
	margin: 0;
	padding-top: var(--df-space-md);
	border-top: 1px solid var(--df-border-soft);
}

html.df-lang-ur .df-pricing__card-inner,
html.df-lang-ur .df-pricing__trust {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-pricing__intro {
	text-align: center;
}

html.df-lang-ur .df-pricing__heading {
	line-height: 1.55;
}

html.df-lang-ur .df-pricing__feature {
	padding-inline-start: 0;
	padding-inline-end: 1.125rem;
}

html.df-lang-ur .df-pricing__feature::before {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

html.df-lang-ur .df-pricing__trust {
	text-align: center;
}

/* ==========================================================================
   TRUST SECTION — Why choose DentraFix
   ========================================================================== */

.df-trust {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 60% 45% at 20% 20%, rgba(181, 208, 140, 0.11) 0%, transparent 55%),
		radial-gradient(ellipse 50% 40% at 88% 75%, rgba(112, 162, 52, 0.07) 0%, transparent 55%),
		linear-gradient(180deg, var(--df-cream) 0%, var(--df-white) 100%);
}

.df-trust__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-trust__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-trust__bg-blob--1 {
	top: -4rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.16) 0%, transparent 68%);
}

.df-trust__bg-blob--2 {
	bottom: -5rem;
	left: -7rem;
	width: 24rem;
	height: 24rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.08) 0%, transparent 68%);
}

.df-trust__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
}

.df-trust__intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.df-trust__badge {
	margin-bottom: var(--df-space-md);
}

.df-trust__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-trust__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-trust__layout {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-trust__story {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 245, 237, 0.88) 100%);
	border: 1px solid rgba(112, 162, 52, 0.18);
	box-shadow: var(--df-shadow-soft);
	backdrop-filter: blur(8px);
}

.df-trust__story.df-hover-lift:hover,
.df-trust__story.df-hover-lift:focus-within {
	border-color: var(--df-border-green);
}

.df-trust__story-title {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--df-navy);
	margin: 0;
}

.df-trust__story-text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-trust__visual {
	min-width: 0;
}

.df-trust__visual-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(10rem, 22vw, 13rem);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-lg);
	border: 1.5px dashed rgba(112, 162, 52, 0.28);
	background:
		radial-gradient(ellipse 75% 65% at 50% 45%, rgba(181, 208, 140, 0.14) 0%, transparent 70%),
		rgba(255, 255, 255, 0.72);
}

.df-trust__visual-label {
	max-width: 14rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--df-color-text-muted);
	text-align: center;
}

.df-trust__location {
	display: inline-flex;
	align-self: flex-start;
	width: fit-content;
	margin: 0;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.06);
	border: 1px solid rgba(20, 50, 74, 0.08);
	color: var(--df-navy);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
}

.df-trust__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--df-gap-card);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.df-trust__card {
	min-width: 0;
}

.df-trust__card-inner {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	height: 100%;
	padding: var(--df-space-lg);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
}

.df-trust__card-inner.df-hover-lift:hover,
.df-trust__card-inner.df-hover-lift:focus-within {
	border-color: var(--df-border-green);
}

.df-trust__card--accent .df-trust__card-inner {
	background:
		linear-gradient(160deg, rgba(181, 208, 140, 0.14) 0%, rgba(255, 255, 255, 0.96) 100%);
	border-color: rgba(112, 162, 52, 0.2);
}

.df-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: var(--df-radius-md);
	background: linear-gradient(135deg, rgba(181, 208, 140, 0.35) 0%, rgba(112, 162, 52, 0.12) 100%);
	border: 1px solid rgba(112, 162, 52, 0.22);
	color: var(--df-green);
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-trust__card--accent .df-trust__icon {
	color: var(--df-navy);
	background: linear-gradient(135deg, rgba(112, 162, 52, 0.18) 0%, rgba(181, 208, 140, 0.32) 100%);
}

.df-trust__card-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--df-navy);
	margin: 0;
	line-height: 1.35;
}

.df-trust__card-text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-trust__confidence {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--df-space-md) var(--df-space-xl);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-navy);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: var(--df-shadow-premium);
}

.df-trust__confidence-text {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	color: var(--df-white);
	margin: 0;
	max-width: var(--df-measure-sm);
	line-height: 1.55;
}

.df-trust__confidence-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-sm);
	flex-shrink: 0;
}

.df-trust__confidence .df-btn--primary {
	box-shadow: var(--df-shadow-glow);
}

.df-trust__btn-whatsapp {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.42);
	color: var(--df-white);
}

.df-trust__btn-whatsapp:hover,
.df-trust__btn-whatsapp:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--df-white);
}

html.df-lang-ur .df-trust__story,
html.df-lang-ur .df-trust__card-inner {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-trust__location {
	align-self: flex-end;
}

html.df-lang-ur .df-trust__intro,
html.df-lang-ur .df-trust__confidence {
	text-align: center;
}

html.df-lang-ur .df-trust__confidence {
	justify-content: center;
}

html.df-lang-ur .df-trust__confidence-actions {
	justify-content: center;
}

html.df-lang-ur .df-trust__heading {
	line-height: 1.55;
}

/* ==========================================================================
   FAQ SECTION — Support accordion
   ========================================================================== */

.df-faq {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(181, 208, 140, 0.12) 0%, transparent 58%),
		linear-gradient(180deg, var(--df-white) 0%, var(--df-cream) 100%);
}

.df-faq__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-faq__bg-blob {
	position: absolute;
	border-radius: 50%;
}

.df-faq__bg-blob--1 {
	top: 8%;
	left: -7rem;
	width: 20rem;
	height: 20rem;
	background: radial-gradient(circle, rgba(181, 208, 140, 0.14) 0%, transparent 68%);
}

.df-faq__bg-blob--2 {
	bottom: -4rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	background: radial-gradient(circle, rgba(112, 162, 52, 0.07) 0%, transparent 68%);
}

.df-faq__inner {
	position: relative;
	z-index: 1;
}

.df-faq__layout {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-2xl);
	min-width: 0;
}

.df-faq__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-faq__badge {
	margin-bottom: var(--df-space-md);
}

.df-faq__heading {
	font-size: clamp(1.625rem, 4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--df-navy);
	margin: 0 0 var(--df-space-md);
}

.df-faq__intro-text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-faq__support {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(155deg, rgba(112, 162, 52, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
	border: 1px solid rgba(112, 162, 52, 0.2);
	box-shadow: var(--df-shadow-soft);
}

.df-faq__support.df-hover-lift:hover,
.df-faq__support.df-hover-lift:focus-within {
	border-color: var(--df-border-green);
}

.df-faq__support-title {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 700;
	color: var(--df-navy);
	margin: 0;
	line-height: 1.35;
}

.df-faq__support-text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
	margin: 0;
}

.df-faq__support-btn {
	align-self: flex-start;
	box-shadow: var(--df-shadow-glow);
}

.df-faq__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-faq__chip {
	display: inline-flex;
	padding: 0.3125rem 0.625rem;
	border-radius: var(--df-radius-pill);
	background: rgba(20, 50, 74, 0.05);
	border: 1px solid rgba(20, 50, 74, 0.08);
	color: var(--df-navy);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.35;
}

.df-faq__accordion {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-sm);
	min-width: 0;
}

.df-faq__item {
	overflow: hidden;
	border-radius: var(--df-radius-xl);
	background: var(--df-gradient-card);
	border: 1px solid var(--df-border-soft);
	box-shadow: var(--df-shadow-soft);
	transition:
		border-color var(--df-transition-premium),
		box-shadow var(--df-transition-premium);
}

.df-faq__item.is-open {
	border-color: rgba(112, 162, 52, 0.28);
	box-shadow: var(--df-shadow-medium);
}

.df-faq__item:hover {
	border-color: var(--df-border-green);
}

.df-faq__question-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.df-faq__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--df-space-md);
	width: 100%;
	padding: var(--df-space-lg);
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--df-navy);
	font: inherit;
	text-align: start;
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--df-transition-premium);
}

.df-faq__item:not(.is-open) .df-faq__trigger {
	border-radius: var(--df-radius-xl);
}

.df-faq__item.is-open .df-faq__trigger {
	background-color: rgba(112, 162, 52, 0.08);
}

.df-faq__trigger:hover {
	background-color: rgba(181, 208, 140, 0.18);
	color: var(--df-navy);
}

.df-faq__trigger:focus {
	outline: none;
	background-color: transparent;
	color: var(--df-navy);
	box-shadow: none;
}

.df-faq__item.is-open .df-faq__trigger:focus {
	background-color: rgba(112, 162, 52, 0.08);
}

.df-faq__trigger:focus-visible {
	outline: 2px solid var(--df-green);
	outline-offset: -3px;
	background-color: rgba(181, 208, 140, 0.14);
	color: var(--df-navy);
}

.df-faq__item.is-open .df-faq__trigger:focus-visible {
	background-color: rgba(112, 162, 52, 0.12);
}

.df-faq__trigger:active {
	background-color: rgba(112, 162, 52, 0.12);
	color: var(--df-navy);
}

.df-faq__question {
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
}

.df-faq__toggle-icon {
	position: relative;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 50%;
	background: rgba(112, 162, 52, 0.12);
	border: 1px solid rgba(112, 162, 52, 0.22);
}

.df-faq__toggle-icon::before,
.df-faq__toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--df-green);
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition:
		transform var(--df-transition-premium),
		opacity var(--df-transition-premium);
}

.df-faq__toggle-icon::before {
	width: 0.5rem;
	height: 2px;
}

.df-faq__toggle-icon::after {
	width: 2px;
	height: 0.5rem;
}

.df-faq__item.is-open .df-faq__toggle-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

.df-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.df-faq__panel[hidden] {
	display: none;
}

.df-faq__item.is-open .df-faq__panel {
	grid-template-rows: 1fr;
}

.df-faq__panel[aria-hidden="true"] {
	pointer-events: none;
}

.df-faq__panel-inner {
	overflow: hidden;
	min-height: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0;
	transform: translateY(-0.35rem);
}

.df-faq__item.is-open .df-faq__panel-inner {
	opacity: 1;
	transform: translateY(0);
	padding: 0 var(--df-space-lg) var(--df-space-lg);
}

.df-faq__answer {
	margin: 0;
	padding-top: var(--df-space-md);
	border-top: 1px solid var(--df-border-soft);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--df-color-text-muted);
}

html.df-lang-ur .df-faq__sidebar,
html.df-lang-ur .df-faq__answer {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-faq__trigger {
	text-align: right;
}

html.df-lang-ur .df-faq__support-btn {
	align-self: flex-end;
}

html.df-lang-ur .df-faq__heading {
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.df-faq__panel {
		transition: none;
	}

	.df-faq__panel-inner {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.df-faq__toggle-icon::before,
	.df-faq__toggle-icon::after {
		transition: none;
	}
}

/* ==========================================================================
   FINAL CTA SECTION — Closing conversion panel
   ========================================================================== */

.df-final-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--df-section-y);
	background:
		radial-gradient(ellipse 80% 55% at 50% 100%, rgba(112, 162, 52, 0.1) 0%, transparent 58%),
		linear-gradient(180deg, var(--df-cream) 0%, rgba(245, 245, 237, 0.4) 100%);
}

.df-final-cta__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.df-final-cta__bg-glow {
	position: absolute;
	border-radius: 50%;
}

.df-final-cta__bg-glow--1 {
	top: -6rem;
	left: 50%;
	width: 36rem;
	height: 18rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(112, 162, 52, 0.12) 0%, transparent 70%);
}

.df-final-cta__bg-glow--2 {
	bottom: -8rem;
	right: -10rem;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(circle, rgba(20, 50, 74, 0.06) 0%, transparent 68%);
}

.df-final-cta__inner {
	position: relative;
	z-index: 1;
}

.df-final-cta__panel {
	border-radius: var(--df-radius-xl);
	background:
		linear-gradient(145deg, var(--df-navy) 0%, #1a4260 52%, rgba(26, 66, 96, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--df-shadow-premium);
	overflow: hidden;
}

.df-final-cta__panel.df-hover-lift:hover,
.df-final-cta__panel.df-hover-lift:focus-within {
	box-shadow:
		var(--df-shadow-premium),
		0 0 0 1px rgba(112, 162, 52, 0.15);
}

.df-final-cta__grid {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-xl);
	min-width: 0;
}

.df-final-cta__content {
	display: flex;
	flex-direction: column;
	gap: var(--df-space-md);
	padding: var(--df-space-xl);
	min-width: 0;
}

.df-final-cta__badge {
	align-self: flex-start;
	background: rgba(112, 162, 52, 0.18);
	border-color: rgba(181, 208, 140, 0.35);
	color: var(--df-light-green);
}

.df-final-cta__heading {
	font-size: clamp(1.75rem, 4.5vw, 2.625rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--df-white);
	margin: 0;
}

.df-final-cta__subheading {
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 36rem;
}

.df-final-cta__support-line {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(181, 208, 140, 0.95);
	margin: 0;
	font-weight: 600;
}

.df-final-cta__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-final-cta__chip {
	display: inline-flex;
	padding: 0.3125rem 0.6875rem;
	border-radius: var(--df-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.35;
}

.df-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--df-space-sm);
	margin-top: var(--df-space-xs);
}

.df-final-cta__actions .df-btn--primary {
	box-shadow: var(--df-shadow-glow);
}

.df-final-cta__btn-whatsapp {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.42);
	color: var(--df-white);
}

.df-final-cta__btn-whatsapp:hover,
.df-final-cta__btn-whatsapp:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.65);
	color: var(--df-white);
}

.df-final-cta__disclaimer {
	font-size: 0.75rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	margin: var(--df-space-sm) 0 0;
	padding-top: var(--df-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-width: 38rem;
}

.df-final-cta__visual {
	padding: 0 var(--df-space-xl) var(--df-space-xl);
	min-width: 0;
}

.df-final-cta__visual-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(12rem, 28vw, 18rem);
	padding: var(--df-space-xl);
	border-radius: var(--df-radius-lg);
	border: 1.5px dashed rgba(181, 208, 140, 0.35);
	background:
		radial-gradient(ellipse 75% 65% at 50% 40%, rgba(112, 162, 52, 0.14) 0%, transparent 70%),
		rgba(255, 255, 255, 0.06);
}

.df-final-cta__visual-label {
	max-width: 14rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
}

html.df-lang-ur .df-final-cta__content {
	text-align: right;
	line-height: 1.75;
}

html.df-lang-ur .df-final-cta__badge {
	align-self: flex-end;
}

html.df-lang-ur .df-final-cta__actions {
	justify-content: flex-start;
}

html.df-lang-ur .df-final-cta__heading {
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.df-admin-notice,
	.df-admin-notice__expand {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — disable all animations for users who prefer it
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.df-animate,
	.df-animate--stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.df-animate.is-visible,
	.df-animate--stagger.is-visible > * {
		opacity: 1;
		transform: none;
	}

	.df-floating {
		animation: none !important;
	}

	.df-pulse-soft {
		animation: none !important;
	}

	.df-hover-lift,
	.df-btn.df-hover-lift {
		transition: none !important;
	}

	.df-hover-lift:hover,
	.df-hover-lift:focus-visible,
	.df-btn.df-hover-lift:hover,
	.df-btn.df-hover-lift:focus {
		transform: none !important;
	}

	.df-mobile-drawer__overlay,
	.df-mobile-drawer__panel,
	.df-language-modal__dialog,
	.df-menu-toggle__bar {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.df-announcement {
		transition: none !important;
	}

	.df-site-header::before {
		transition: none !important;
	}

	.df-site-header__main {
		transition: none !important;
	}

	.df-site-header.is-bar-hidden .df-announcement {
		transform: translateY(-100%);
	}
}