/* ==========================================================================
   DentalMaster Elementor Addon — front-end styles
   Mobile-first. Design tokens follow the DentalMaster brand system.
   ========================================================================== */

:root {
	--dm-navy:     #0A2540;
	--dm-navy-2:   #0D3560;
	--dm-blue:     #2E90FA;
	--dm-cyan:     #00C2FF;
	--dm-white:    #FFFFFF;
	--dm-gray-50:  #F5F7FA;
	--dm-gray-200: #E4E9F0;
	--dm-gray-400: #9AA7BF;
	--dm-gray-500: #6B7A99;

	--dm-grad-hero:   linear-gradient(135deg, #0A2540 0%, #0D3560 50%, #0A2540 100%);
	--dm-grad-accent: linear-gradient(90deg, #2E90FA, #00C2FF);
	--dm-grad-glow:   radial-gradient(ellipse at 50% 0%, rgba(46,144,250,0.18) 0%, transparent 70%);

	--dm-font-display: 'Syne', system-ui, sans-serif;
	--dm-font-body:    'DM Sans', system-ui, sans-serif;
	--dm-font-mono:    'JetBrains Mono', ui-monospace, monospace;

	--dm-radius:    16px;
	--dm-radius-sm: 10px;
	--dm-shadow:    0 20px 60px rgba(10,37,64,0.15);
	--dm-ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scope reset so we don't fight themes */
[data-dm] * { box-sizing: border-box; }
[data-dm] {
	font-family: var(--dm-font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Shared atoms ---------- */
.dm-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--dm-blue);
	background: rgba(46,144,250,0.10);
	border: 1px solid rgba(46,144,250,0.25);
}

.dm-eyebrow {
	display: inline-block;
	font-family: var(--dm-font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dm-blue);
	margin-bottom: 14px;
}

.dm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: var(--dm-radius-sm);
	font-family: var(--dm-font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--dm-ease), box-shadow 0.2s var(--dm-ease), background 0.2s var(--dm-ease);
	will-change: transform;
}
.dm-btn--lg { padding: 16px 30px; font-size: 16px; }
.dm-btn--primary {
	color: #fff;
	background: var(--dm-grad-accent);
	box-shadow: 0 8px 24px rgba(46,144,250,0.28);
}
.dm-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 34px rgba(46,144,250,0.45);
}
.dm-btn--ghost {
	color: var(--dm-white);
	background: transparent;
	border: 1px solid rgba(255,255,255,0.22);
}
.dm-btn--ghost:hover {
	border-color: rgba(0,194,255,0.6);
	color: var(--dm-cyan);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.dm-hero {
	position: relative;
	overflow: hidden;
	background: var(--dm-grad-hero);
	color: var(--dm-white);
	padding: 72px 20px 64px;
	border-radius: var(--dm-radius);
	isolation: isolate;
}
.dm-hero__glow {
	position: absolute;
	inset: 0;
	background: var(--dm-grad-glow);
	pointer-events: none;
	z-index: -1;
}
.dm-hero__noise {
	position: absolute;
	inset: 0;
	opacity: 0.035;
	pointer-events: none;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dm-hero__inner {
	display: grid;
	gap: 40px;
	max-width: 1180px;
	margin: 0 auto;
}
.dm-hero__title {
	font-family: var(--dm-font-display);
	font-weight: 800;
	font-size: clamp(34px, 8vw, 76px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin: 18px 0 0;
}
.dm-hero__sub {
	font-size: clamp(16px, 2.4vw, 19px);
	color: var(--dm-gray-400);
	max-width: 36ch;
	margin: 18px 0 0;
}
.dm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}
.dm-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 18px;
	margin-top: 42px;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.10);
}
.dm-hero__stat-value {
	display: block;
	font-family: var(--dm-font-mono);
	font-weight: 500;
	font-size: clamp(22px, 5vw, 30px);
	background: var(--dm-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dm-hero__stat-label {
	display: block;
	font-size: 13px;
	color: var(--dm-gray-400);
	margin-top: 4px;
}
.dm-hero__visual img {
	width: 100%;
	height: auto;
	border-radius: var(--dm-radius);
	border: 1px solid rgba(46,144,250,0.22);
	box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

/* Vimeo embed — responsive 16:9 */
.dm-hero__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--dm-radius);
	overflow: hidden;
	border: 1px solid rgba(46,144,250,0.22);
	box-shadow: 0 30px 80px rgba(0,0,0,0.45);
	background: #0a2036;
}
.dm-hero__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Placeholder shown when no media is set */
.dm-hero__embed--ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(255,255,255,0.55);
	background:
		radial-gradient(ellipse at 50% 40%, rgba(46,144,250,0.18) 0%, transparent 70%),
		repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
		#0a2036;
}
.dm-hero__ph-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dm-grad, linear-gradient(90deg,#2E90FA,#00C2FF));
	color: #fff;
	box-shadow: 0 12px 30px rgba(46,144,250,0.4);
}
.dm-hero__ph-text {
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   STAT COUNTER
   ========================================================================== */
.dm-stat { padding: 8px 0; }
.dm-stat__value {
	font-family: var(--dm-font-mono);
	font-weight: 500;
	font-size: clamp(44px, 9vw, 64px);
	line-height: 1;
	background: var(--dm-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dm-stat__label {
	font-size: 15px;
	font-weight: 500;
	color: var(--dm-gray-500);
	margin-top: 12px;
}
.dm-stat__note {
	font-size: 12px;
	color: var(--dm-gray-400);
	margin-top: 4px;
}

/* ==========================================================================
   FEATURE GRID
   ========================================================================== */
.dm-features {
	padding: 64px 20px;
	border-radius: var(--dm-radius);
}
.dm-features--light { background: var(--dm-white); }
.dm-features--dark  { background: var(--dm-grad-hero); }
.dm-features__head {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
}
.dm-features__title {
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: clamp(26px, 5vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}
.dm-features--light .dm-features__title { color: var(--dm-navy); }
.dm-features--dark  .dm-features__title { color: var(--dm-white); }
.dm-features__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
}
.dm-feature {
	padding: 26px;
	border-radius: var(--dm-radius);
	transition: transform 0.25s var(--dm-ease), box-shadow 0.25s var(--dm-ease);
}
.dm-features--light .dm-feature {
	background: var(--dm-gray-50);
	border: 1px solid var(--dm-gray-200);
}
.dm-features--light .dm-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--dm-shadow);
}
.dm-features--dark .dm-feature {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(46,144,250,0.15);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.dm-features--dark .dm-feature:hover {
	transform: translateY(-4px);
	border-color: rgba(0,194,255,0.4);
}
.dm-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	margin-bottom: 18px;
	font-size: 20px;
	color: var(--dm-blue);
	background: rgba(46,144,250,0.14);
}
.dm-feature__icon svg { width: 22px; height: 22px; fill: currentColor; }
.dm-feature__title {
	font-family: var(--dm-font-display);
	font-weight: 600;
	font-size: 19px;
	margin: 0 0 8px;
}
.dm-features--light .dm-feature__title { color: var(--dm-navy); }
.dm-features--dark  .dm-feature__title { color: var(--dm-white); }
.dm-feature__desc {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}
.dm-features--light .dm-feature__desc { color: var(--dm-gray-500); }
.dm-features--dark  .dm-feature__desc { color: var(--dm-gray-400); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.dm-quotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 1080px;
	margin: 0 auto;
}
.dm-quote {
	margin: 0;
	padding: 28px;
	border-radius: var(--dm-radius);
}
.dm-quotes--light .dm-quote {
	background: var(--dm-white);
	border: 1px solid var(--dm-gray-200);
	box-shadow: var(--dm-shadow);
}
.dm-quotes--dark .dm-quote {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(46,144,250,0.15);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.dm-quote__text {
	font-family: var(--dm-font-display);
	font-weight: 600;
	font-size: clamp(18px, 3vw, 22px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
}
.dm-quotes--light .dm-quote__text { color: var(--dm-navy); }
.dm-quotes--dark  .dm-quote__text { color: var(--dm-white); }
.dm-quote__by {
	display: flex;
	align-items: center;
	gap: 14px;
}
.dm-quote__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.dm-quote__avatar--ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dm-font-display);
	font-weight: 700;
	color: #fff;
	background: var(--dm-grad-accent);
}
.dm-quote__meta { display: flex; flex-direction: column; }
.dm-quote__name { font-weight: 600; font-size: 15px; }
.dm-quotes--light .dm-quote__name { color: var(--dm-navy); }
.dm-quotes--dark  .dm-quote__name { color: var(--dm-white); }
.dm-quote__role { font-size: 13px; color: var(--dm-gray-500); }
.dm-quotes--dark .dm-quote__role { color: var(--dm-gray-400); }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.dm-cta {
	position: relative;
	overflow: hidden;
	background: var(--dm-grad-hero);
	border-radius: var(--dm-radius);
	padding: 64px 20px;
	text-align: center;
	isolation: isolate;
}
.dm-cta__glow {
	position: absolute;
	inset: 0;
	background: var(--dm-grad-glow);
	z-index: -1;
	pointer-events: none;
}
.dm-cta__inner { max-width: 760px; margin: 0 auto; }
.dm-cta__title {
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: clamp(26px, 5.5vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--dm-white);
	margin: 0 0 28px;
}
.dm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}
.dm-cta__wa {
	color: var(--dm-cyan);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
}
.dm-cta__wa:hover { text-decoration: underline; }
.dm-cta__sub {
	font-size: 13px;
	color: var(--dm-gray-400);
	margin: 20px 0 0;
}

/* ==========================================================================
   ANIMATION INITIAL STATES (revealed by JS / GSAP)
   ========================================================================== */
.dm-js [data-dm-anim],
.dm-js [data-dm-card] {
	opacity: 0;
	transform: translateY(24px);
}
/* When JS is absent or reduced motion is on, everything stays visible. */

/* Elementor editor: NEVER hide content. Animations only run on the live page,
   so inside the editor the text must always be visible while editing. */
.elementor-editor-active [data-dm-anim],
.elementor-editor-active [data-dm-card],
.elementor-editor-preview [data-dm-anim],
.elementor-editor-preview [data-dm-card] {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   RESPONSIVE — tablet & up
   ========================================================================== */
@media (min-width: 768px) {
	.dm-hero { padding: 96px 40px 84px; }
	.dm-hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
		gap: 56px;
	}
	.dm-hero__stats { grid-template-columns: repeat(4, 1fr); }
	.dm-features  { padding: 88px 40px; }
	.dm-cta       { padding: 88px 40px; }
}

/* ==========================================================================
   ACCESSIBILITY — reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dm-js [data-dm-anim],
	.dm-js [data-dm-card] {
		opacity: 1 !important;
		transform: none !important;
	}
	.dm-btn, .dm-feature { transition: none !important; }
}

/* ==========================================================================
   JOURNEY RIBBON  (DM Journey Ribbon)
   ========================================================================== */
.dm-journey { background: var(--dm-g50, #F5F7FA); padding: 74px 20px; }
.dm-journey__head { max-width: 1180px; margin: 0 auto 32px; }
.dm-journey__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800;
	font-size: clamp(26px, 5vw, 42px); color: var(--dm-navy, #0A2540); margin-top: 12px; letter-spacing: -.02em; }
.dm-ribbon { max-width: 1180px; margin: 0 auto; display: grid; gap: 16px; }
@media (min-width: 820px) { .dm-ribbon { grid-template-columns: repeat(3, 1fr); } }
.dm-phase { position: relative; background: #fff; border: 1px solid var(--dm-g200, #E3E8F0);
	border-radius: var(--dm-radius, 16px); padding: 24px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.dm-phase:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(10,37,64,.12); border-color: rgba(46,144,250,.4); }
.dm-phase__step { font-family: var(--dm-fm, monospace); font-size: 11px; letter-spacing: .14em; color: var(--dm-blue, #2E90FA); text-transform: uppercase; }
.dm-phase h3 { font-family: var(--dm-fd, 'Syne', sans-serif); font-size: 20px; margin: 8px 0 6px; color: var(--dm-navy, #0A2540); }
.dm-phase p { font-size: 14px; color: var(--dm-g500, #6B7A99); margin: 0 0 14px; }
.dm-phase__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-tag { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(46,144,250,.1); color: var(--dm-blue, #2E90FA); }
.dm-tag--live { background: rgba(0,194,255,.14); color: #0093c2; }
.dm-tag--new { background: linear-gradient(90deg,#2E90FA,#00C2FF); color: #fff; }
@media (min-width: 820px) {
	.dm-phase:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%;
		transform: translateY(-50%); color: var(--dm-g400, #9AA7BF); font-size: 20px; z-index: 2; }
}

/* ==========================================================================
   DENTALCOMMUNICATION  (DM DentalCommunication)
   ========================================================================== */
.dm-dc { background: var(--dm-g50, #F5F7FA); padding: 84px 20px; }
.dm-dc__inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dm-dc__inner { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.dm-dc__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(28px, 5vw, 44px); color: var(--dm-navy, #0A2540); margin: 14px 0 16px; line-height: 1.08; }
.dm-dc__lead { color: var(--dm-g500, #6B7A99); font-size: 17px; max-width: 46ch; margin: 0 0 22px; }
.dm-dc__feat { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.dm-dc__feat li { display: flex; gap: 12px; font-size: 14.5px; color: var(--dm-g500, #6B7A99); }
.dm-dc__ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
	background: linear-gradient(90deg,#2E90FA,#00C2FF); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.dm-dc__visual img { width: 100%; height: auto; border-radius: var(--dm-radius, 16px); box-shadow: 0 30px 80px rgba(10,37,64,.18); }
.dm-dc__embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--dm-radius, 16px);
	overflow: hidden; box-shadow: 0 30px 80px rgba(10,37,64,.18); background: #0a2036; }
.dm-dc__embed--v { aspect-ratio: 9/16; max-width: 380px; margin: 0 auto; background: transparent; }
.dm-dc__embed--s { aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; background: transparent; }
.dm-dc__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dm-dc__embed--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.55); }
/* QR card */
.dm-dc__qr { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dm-dc__qr-frame { width: min(260px, 70%); aspect-ratio: 1; background: #fff; border-radius: 20px;
	padding: 18px; box-shadow: 0 30px 70px rgba(10,37,64,.18); display: grid; place-items: center; }
.dm-dc__qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.dm-dc__qr-ph { color: var(--dm-navy, #0A2540); opacity: .35; }
.dm-dc__qr-cap { font-family: var(--dm-fm, monospace); font-size: 12px; letter-spacing: .16em;
	color: var(--dm-blue, #2E90FA); text-transform: uppercase; }

/* ==========================================================================
   ECOSYSTEM  (DM Ecosystem)
   ========================================================================== */
.dm-eco { background: #fff; padding: 84px 20px; }
.dm-eco__head { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.dm-eco__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(26px, 5vw, 42px); color: var(--dm-navy, #0A2540); margin-top: 12px; }
.dm-eco__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dm-eco__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .dm-eco__grid { grid-template-columns: repeat(3, 1fr); } }
.dm-eco-card { background: var(--dm-g50, #F5F7FA); border: 1px solid var(--dm-g200, #E3E8F0);
	border-radius: var(--dm-radius, 16px); padding: 24px; transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.dm-eco-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(10,37,64,.12); }
.dm-eco-card__ic { font-size: 26px; margin-bottom: 12px; }
.dm-eco-card h3 { font-family: var(--dm-fd, 'Syne', sans-serif); font-size: 18px; color: var(--dm-navy, #0A2540);
	margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.dm-eco-card p { font-size: 14px; color: var(--dm-g500, #6B7A99); margin: 0 0 14px; flex: 1 1 auto; }
.dm-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
	background: linear-gradient(90deg,#2E90FA,#00C2FF); color: #fff; letter-spacing: .04em; }
.dm-eco-card__link { align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--dm-blue, #2E90FA);
	text-decoration: none; transition: gap .2s, color .2s; }
.dm-eco-card__link:hover { color: var(--dm-cyan, #00C2FF); }

/* ==========================================================================
   PRICING  (DM Pricing) — tiered terms
   ========================================================================== */
.dm-pricing { background: var(--dm-hero, linear-gradient(135deg,#0A2540,#0D3560,#0A2540)); color: #fff;
	padding: 84px 20px; position: relative; isolation: isolate; overflow: hidden; }
.dm-pricing::before { content: ""; position: absolute; inset: 0;
	background: var(--dm-glow, radial-gradient(ellipse at 50% 0%, rgba(46,144,250,.18) 0%, transparent 70%)); z-index: -1; }
.dm-pricing__head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.dm-pricing__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(28px, 5vw, 44px); color: #fff; margin: 12px 0 14px; }
.dm-pricing__sub { color: var(--dm-g400, #9AA7BF); font-size: 16px; margin: 0; }
.dm-pricing__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 720px)  { .dm-pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .dm-pricing__grid { grid-template-columns: repeat(3, 1fr); } }

.dm-plan { position: relative; display: flex; flex-direction: column; background: rgba(255,255,255,.04);
	border: 1px solid rgba(46,144,250,.18); border-radius: var(--dm-radius, 16px); padding: 30px 24px;
	transition: transform .25s, box-shadow .25s, border-color .25s; }
.dm-plan:hover { transform: translateY(-5px); border-color: rgba(46,144,250,.5); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.dm-plan--featured { border: 2px solid transparent; background:
	linear-gradient(rgba(13,40,80,.92), rgba(13,40,80,.92)) padding-box,
	linear-gradient(135deg,#2E90FA,#00C2FF) border-box; box-shadow: 0 30px 80px rgba(46,144,250,.28); }
@media (min-width: 1080px) { .dm-plan--featured { transform: scale(1.03); } .dm-plan--featured:hover { transform: scale(1.03) translateY(-5px); } }

.dm-plan__badge { display: inline-block; align-self: flex-start; font-family: var(--dm-fm, monospace);
	font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
	background: linear-gradient(90deg,#2E90FA,#00C2FF); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.dm-plan__name { font-family: var(--dm-fd, 'Syne', sans-serif); font-size: 21px; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.dm-plan__desc { font-size: 13.5px; color: var(--dm-g400, #9AA7BF); margin: 0 0 12px; }
.dm-plan__highlight { font-size: 12.5px; color: var(--dm-cyan, #00C2FF); margin: 0 0 18px; font-style: italic; }

.dm-plan__terms { display: grid; gap: 12px; margin-bottom: 22px; }
.dm-term { border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.02); }
.dm-term__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dm-term__label { font-weight: 600; font-size: 14px; color: #fff; }
.dm-term__amt { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dm-term__reg { font-size: 13px; color: var(--dm-g500, #6B7A99); }
.dm-term__price { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; font-size: 22px; color: #fff; }
.dm-term__save { font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,194,255,.18);
	border: 1px solid rgba(0,194,255,.4); padding: 2px 8px; border-radius: 999px; }
.dm-term__eff { font-size: 12px; color: var(--dm-g400, #9AA7BF); margin: 6px 0 10px; }
.dm-term__cta { width: 100%; justify-content: center; padding: 10px 16px; font-size: 13.5px; }

.dm-plan__feat { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1 1 auto; }
.dm-plan__feat li { display: flex; gap: 10px; font-size: 13.5px; color: var(--dm-g400, #9AA7BF); }
.dm-plan__ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
	background: linear-gradient(90deg,#2E90FA,#00C2FF); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.dm-plan__foot { margin-top: auto; font-weight: 600; font-size: 13.5px; color: var(--dm-blue, #2E90FA); text-decoration: none; }
.dm-plan__foot:hover { color: var(--dm-cyan, #00C2FF); }
.dm-btn--ghost-dark { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.22); }
.dm-btn--ghost-dark:hover { border-color: rgba(0,194,255,.6); color: var(--dm-cyan, #00C2FF); }

/* ==========================================================================
   ROI SECTION  (DM ROI Section)
   ========================================================================== */
.dm-roi { padding: 80px 20px; background: var(--dm-navy, #0A2540); }
.dm-roi__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .dm-roi__grid { grid-template-columns: 0.9fr 1.1fr; } }
.dm-roi__metrics { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .dm-roi__metrics { grid-template-columns: 1fr 1fr; } }

.dm-roi__card { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.045);
	border-radius: 28px; padding: 28px; }
.dm-roi__intro { display: flex; flex-direction: column; justify-content: center; }
.dm-roi__eyebrow { color: var(--dm-cyan, #00C2FF); font-family: var(--dm-fm, monospace);
	font-size: 12px; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 12px; }
.dm-roi__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(26px, 4vw, 36px); color: #fff; margin: 4px 0 14px; line-height: 1.12; }
.dm-roi__text { color: rgba(255,255,255,.58); line-height: 1.6; margin: 0; }
.dm-roi__val { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800;
	font-size: clamp(32px, 4.5vw, 42px); color: #fff; margin-bottom: 10px; line-height: 1; }
.dm-roi__desc { color: rgba(255,255,255,.58); line-height: 1.6; margin: 0; }
.dm-roi__quote { grid-column: 1 / -1; }
.dm-roi__qtext { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 600;
	font-size: clamp(20px, 3vw, 24px); line-height: 1.3; color: #fff; margin: 0 0 10px; }
.dm-roi__qauthor { font-size: 13px; color: var(--dm-blue, #2E90FA); font-style: normal; }
.dm-roi__card { transition: transform .25s, border-color .25s; }
.dm-roi__card:hover { transform: translateY(-4px); border-color: rgba(46,144,250,.4); }

/* ==========================================================================
   DENTPLAN3D  (DM DentPlan3D — the engine block)
   ========================================================================== */
.dm-dp { background: var(--dm-hero, linear-gradient(135deg,#0A2540,#0D3560,#0A2540)); color: #fff;
	padding: 84px 20px; position: relative; isolation: isolate; overflow: hidden; }
.dm-dp::before { content: ""; position: absolute; inset: 0;
	background: var(--dm-glow, radial-gradient(ellipse at 50% 0%, rgba(46,144,250,.18) 0%, transparent 70%)); z-index: -1; }
.dm-dp__intro { max-width: 880px; margin: 0 auto 40px; text-align: center; }
.dm-dp__eyebrow { font-family: var(--dm-fm, monospace); font-size: 12px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--dm-blue, #2E90FA); }
.dm-dp__title { font-family: var(--dm-fd, 'Syne', sans-serif); font-weight: 800; letter-spacing: -.02em;
	font-size: clamp(28px, 5vw, 46px); color: #fff; margin: 14px 0 22px; line-height: 1.1; }
.dm-dp__intro .dm-btn { margin: 6px auto 0; }

.dm-dp__visual { max-width: 980px; margin: 0 auto 44px; }
.dm-dp__visual img { width: 100%; height: auto; border-radius: var(--dm-radius, 16px);
	border: 1px solid rgba(46,144,250,.22); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.dm-dp__embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--dm-radius, 16px);
	overflow: hidden; border: 1px solid rgba(46,144,250,.22); box-shadow: 0 30px 80px rgba(0,0,0,.45); background: #0a2036; }
.dm-dp__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dm-dp__grid { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.dm-dp__card { flex: 1 1 300px; max-width: 380px; background: rgba(255,255,255,.04); border: 1px solid rgba(46,144,250,.18);
	border-radius: var(--dm-radius, 16px); padding: 28px 24px; transition: transform .25s, border-color .25s; }
.dm-dp__embed--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.5); }
.dm-dp__ph-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
	background: var(--dm-grad, linear-gradient(90deg,#2E90FA,#00C2FF)); color: #fff; box-shadow: 0 12px 30px rgba(46,144,250,.4); }
.dm-dp__ph-text { font-size: 13px; letter-spacing: .02em; }
.dm-dp__card:hover { transform: translateY(-5px); border-color: rgba(46,144,250,.5); }
.dm-dp__q { font-family: var(--dm-fd, 'Syne', sans-serif); font-size: 19px; color: #fff; margin: 0 0 12px; }
.dm-dp__a p { font-size: 14px; line-height: 1.65; color: var(--dm-g400, #9AA7BF); margin: 0 0 12px; }
.dm-dp__a p:last-child { margin-bottom: 0; }

/* DentPlan3D — visual beside the Q&A */
.dm-dp__split { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .dm-dp__split { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.dm-dp__col-text { display: flex; flex-direction: column; gap: 18px; }
.dm-dp__col-media { display: flex; }
.dm-dp__col-media .dm-dp__visual { max-width: none; margin: 0; width: 100%; }