/* ==========================================================================
   Dent Alert – hero
   Prefix .dx-hero. Dimensiunile scalează cu înălțimea secțiunii (--dx-hero-h),
   ca să păstreze compoziția din design pe orice lățime de desktop.
   ========================================================================== */

.dx-hero,
.dx-hero * { box-sizing: border-box; }

.dx-hero {
	--dx-hero-h: clamp(500px, 40.3vw, 860px);
	--dx-hero-navy: #0b2f6e;
	--dx-hero-ink: #1b2a52;
	--dx-hero-green: #18b03a;
	position: relative;
	min-height: var(--dx-hero-h);
	overflow: hidden;
	background: #fff;
	color: var(--dx-hero-ink);
	text-align: left;
}

/* ---------- Imagine: fâșia din stânga (logo pe geam, plantă) și fotografia din dreapta.
   Ambele sunt decupaje din aceeași imagine, doar zonele fără text. ---------- */
.dx-hero-art {
	position: absolute;
	top: 0;
	bottom: 0;
	background-image: var(--dx-hero-img);
	background-repeat: no-repeat;
	background-size: auto 100%;
	pointer-events: none;
}
.dx-hero-art--left {
	left: 0;
	width: calc(var(--dx-hero-h) * .4146);
	background-position: left center;
	-webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
/* Titlul desenat în imagine se termină la x=925, deci sus se afișează de la 925 (1975-925 = 1050 din 796) */
.dx-hero-art--photo {
	right: 0;
	width: calc(var(--dx-hero-h) * 1.319);
	background-position: right center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%);
}
/* Sub titlu (de la 46% în jos) zona curată începe la x=800, ca să rămână monitorul vizibil */
.dx-hero-art--photo-low {
	top: 46%;
	right: 0;
	width: calc(var(--dx-hero-h) * 1.476);
	background-size: auto 185.2%; /* caseta are 54% din înălțime, imaginea trebuie să aibă 100% */
	background-position: right bottom;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(180deg, transparent 0, #000 14%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(180deg, transparent 0, #000 14%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Fundal curat, fără text: imaginea acoperă toată secțiunea, cu un voal alb sub text */
.dx-hero--full::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 52%);
}
.dx-hero--full .dx-hero-art--left,
.dx-hero--full .dx-hero-art--photo-low { display: none; }
.dx-hero--full .dx-hero-art--photo {
	left: 0;
	width: auto;
	background-size: cover;
	background-position: right center;
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---------- Conținut ---------- */
.dx-hero-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--dx-hero-h) * 1.05);
	margin-left: calc(var(--dx-hero-h) * .4234);
	padding: calc(var(--dx-hero-h) * .185) 0 32px;
}

.dx-hero-eyebrow {
	margin: 0;
	font-size: max(11px, calc(var(--dx-hero-h) * .0201));
	font-weight: 600;
	letter-spacing: .22em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(27, 42, 82, .88);
}
.dx-hero-eyebrow::after {
	content: "";
	display: block;
	width: calc(var(--dx-hero-h) * .078);
	height: max(3px, calc(var(--dx-hero-h) * .005));
	margin-top: calc(var(--dx-hero-h) * .015);
	border-radius: 4px;
	background: linear-gradient(90deg, #8cc63f, #4bb53c);
}

.dx-hero-title {
	margin: calc(var(--dx-hero-h) * .02) 0 0;
	padding: 0;
	font-size: max(34px, calc(var(--dx-hero-h) * .0955));
	font-weight: 800;
	line-height: .96;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--dx-hero-navy);
}
.dx-hero-title span { display: block; }
.dx-hero-title-accent {
	background: linear-gradient(90deg, #0aa83c, #25c24b);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #0aa83c;
}

.dx-hero-text {
	max-width: calc(var(--dx-hero-h) * .545);
	margin: calc(var(--dx-hero-h) * .026) 0 0;
	font-size: max(15px, calc(var(--dx-hero-h) * .0272));
	line-height: 1.28;
	color: var(--dx-hero-ink);
}

/* ---------- Beneficii ---------- */
.dx-hero-features {
	display: flex;
	gap: 0;
	margin: calc(var(--dx-hero-h) * .03) 0 0;
	padding: 0;
	list-style: none;
}
.dx-hero-features li {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(var(--dx-hero-h) * .205);
	margin: 0;
	padding: 0;
	text-align: center;
}
.dx-hero-features li::before { display: none; }
.dx-hero-feature-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(54px, calc(var(--dx-hero-h) * .093));
	height: max(54px, calc(var(--dx-hero-h) * .093));
	border-radius: 50%;
	background: #fff;
	color: #1fa047;
	box-shadow: 0 8px 22px rgba(20, 60, 110, .14), 0 0 0 1px rgba(20, 60, 110, .04);
}
.dx-hero-ico { width: 52%; height: 52%; }
.dx-hero-features strong {
	display: block;
	max-width: 8.2em;
	margin-top: calc(var(--dx-hero-h) * .014);
	font-size: max(14px, calc(var(--dx-hero-h) * .0214));
	font-weight: 700;
	line-height: 1.2;
	color: var(--dx-hero-navy);
}
.dx-hero-features small {
	display: block;
	margin-top: calc(var(--dx-hero-h) * .007);
	font-size: max(11.5px, calc(var(--dx-hero-h) * .0157));
	line-height: 1.25;
	color: #5b6475;
}

/* ---------- Buton telefon ---------- */
.dx-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--dx-hero-h) * .022);
	min-width: calc(var(--dx-hero-h) * .416);
	min-height: max(66px, calc(var(--dx-hero-h) * .11));
	margin-top: calc(var(--dx-hero-h) * .036);
	padding: 0 calc(var(--dx-hero-h) * .03) 0 calc(var(--dx-hero-h) * .044);
	border-radius: 999px;
	background: linear-gradient(135deg, #1fc23c 0%, #0fa23a 55%, #08842f 100%);
	color: #fff !important;
	text-decoration: none;
	box-shadow: 0 14px 30px rgba(16, 150, 55, .32);
	transition: transform .2s ease, box-shadow .2s ease;
}
.dx-hero-cta:hover,
.dx-hero-cta:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 20px 36px rgba(16, 150, 55, .4);
}
.dx-hero-cta:focus-visible { outline: 3px solid rgba(43, 114, 240, .55); outline-offset: 3px; }
.dx-hero-cta-ico .dx-ico { width: max(26px, calc(var(--dx-hero-h) * .043)); height: max(26px, calc(var(--dx-hero-h) * .043)); color: #fff; }
.dx-hero-cta-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.dx-hero-cta-text small {
	font-size: max(12px, calc(var(--dx-hero-h) * .019));
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.dx-hero-cta-text strong {
	font-size: max(19px, calc(var(--dx-hero-h) * .0302));
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
}
.dx-hero-cta-arrow .dx-ico { width: 18px; height: 18px; color: #fff; }

/* ---------- Headerul plutește peste imagine: imaginea începe de sus ---------- */
body.dx-has-hero .dx-header-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
/* Textul coboară sub header (aprox. înălțimea lui peste cât are deja) */
body.dx-has-hero .dx-hero { padding-top: 36px; }

/* ---------- Tabletă și mobil: fotografia sus, textul dedesubt ---------- */
@media (max-width: 1199px) {
	body.dx-has-hero .dx-hero { padding-top: 0; }
	.dx-hero {
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 36px;
	}
	.dx-hero-art--left,
	.dx-hero-art--photo-low { display: none; }
	.dx-hero-art--photo,
	.dx-hero--full .dx-hero-art--photo {
		position: relative;
		inset: auto;
		right: auto;
		width: min(100%, 640px);
		margin: 0 auto;
		aspect-ratio: 1050 / 796;
		background-size: calc(100% * 1975 / 1050) auto;
		background-position: right center;
		-webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
	}
	.dx-hero--full::before { display: none; }
	.dx-hero--full .dx-hero-art--photo { width: 100%; background-size: cover; aspect-ratio: 16 / 10; }
	.dx-hero-inner {
		max-width: 640px;
		width: 100%;
		margin: -28px auto 0;
		padding: 0 20px;
	}
	.dx-hero-eyebrow { font-size: 12px; }
	.dx-hero-eyebrow::after { width: 56px; height: 4px; margin-top: 10px; }
	.dx-hero-title { margin-top: 14px; font-size: clamp(36px, 9.5vw, 60px); }
	.dx-hero-text { max-width: none; margin-top: 16px; font-size: 17px; }
	.dx-hero-features { margin-top: 24px; }
	.dx-hero-features li { width: 33.333%; }
	.dx-hero-feature-ico { width: 62px; height: 62px; }
	.dx-hero-features strong { margin-top: 10px; font-size: 14px; }
	.dx-hero-features small { margin-top: 4px; font-size: 12px; }
	.dx-hero-cta { display: flex; margin-top: 26px; min-height: 72px; padding: 0 22px 0 26px; }
	.dx-hero-cta-text strong { font-size: 21px; }
}

@media (max-width: 380px) {
	.dx-hero-features strong { font-size: 13px; }
	.dx-hero-cta-text strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.dx-hero * { transition: none !important; }
}
/* Desktop composition matched to the supplied 1971 x 798 reference. */
@media (min-width: 1200px) {
 .dx-hero { --dx-hero-h: clamp(600px, 40.49vw, 860px); }
 .dx-hero--full::before { background: linear-gradient(90deg,rgba(255,255,255,.08),transparent 55%); }
 .dx-hero-inner { margin-left: 13.6%; padding-top: calc(var(--dx-hero-h) * .302); max-width: calc(var(--dx-hero-h) * .65); }
 .dx-hero-eyebrow { font-size: max(12px,calc(var(--dx-hero-h) * .0163)); color: #073477; letter-spacing: .28em; font-weight: 700; }
 .dx-hero-eyebrow::after { width: calc(var(--dx-hero-h) * .067); margin-top: calc(var(--dx-hero-h) * .017); }
 .dx-hero-title { font-size: calc(var(--dx-hero-h) * .08); line-height: 1.02; margin-top: calc(var(--dx-hero-h) * .016); }
 .dx-hero-text { font-size: calc(var(--dx-hero-h) * .024); max-width: calc(var(--dx-hero-h) * .53); margin-top: calc(var(--dx-hero-h) * .014); color: #073477; }
 .dx-hero-features { margin-top: calc(var(--dx-hero-h) * .016); }
 .dx-hero-features li { width: calc(var(--dx-hero-h) * .185); }
 .dx-hero-feature-ico { width: calc(var(--dx-hero-h) * .096); height: calc(var(--dx-hero-h) * .096); color: #00be43; }
 .dx-hero-ico { width: 62%; height: 62%; }
 .dx-hero-features strong { font-size: calc(var(--dx-hero-h) * .019); }
 .dx-hero-features small { font-size: calc(var(--dx-hero-h) * .016); margin-top: 3px; }
 .dx-hero-cta { margin-top: calc(var(--dx-hero-h) * .029); margin-left: calc(var(--dx-hero-h) * .012); min-width: calc(var(--dx-hero-h) * .378); min-height: calc(var(--dx-hero-h) * .098); background: linear-gradient(135deg,#00d53d,#00b63d 55%,#008b39); }
 .dx-hero-cta-text small { font-size: calc(var(--dx-hero-h) * .0165); }
 .dx-hero-cta-text strong { font-size: calc(var(--dx-hero-h) * .0265); }
}
/* Compact mobile hero: photo, readable copy and a complete call button. */
@media (max-width: 640px) {
 .dx-hero {
  --dx-hero-navy: #073477;
  padding-bottom: 24px;
  background: linear-gradient(180deg,#f0f8ff 0,#fff 62%);
 }
 .dx-hero-art--photo,
 .dx-hero--full .dx-hero-art--photo {
  width: 100%;
  margin: 0;
  aspect-ratio: 2.45 / 1;
  background-position: right 58%;
  -webkit-mask-image: linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image: linear-gradient(180deg,#000 72%,transparent 100%);
 }
 .dx-hero-inner {
  width: 100%;
  max-width: 480px;
  margin: -4px auto 0;
  padding: 0 20px;
 }
 .dx-hero-eyebrow { font-size: 10px; line-height: 1.4; letter-spacing: .2em; color: #073477; }
 .dx-hero-eyebrow::after { width: 42px; height: 3px; margin-top: 8px; }
 .dx-hero-title { margin-top: 12px; font-size: clamp(28px,8vw,42px); line-height: 1.05; letter-spacing: -.025em; }
 .dx-hero-text { margin-top: 12px; font-size: 15px; line-height: 1.45; color: #274569; }
 .dx-hero-features { margin-top: 18px; gap: 8px; }
 .dx-hero-features li { flex: 1 1 0; min-width: 0; width: auto; }
 .dx-hero-feature-ico { width: 48px; height: 48px; box-shadow: 0 4px 14px rgba(20,60,110,.1); }
 .dx-hero-ico { width: 60%; height: 60%; }
 .dx-hero-features strong { margin-top: 8px; font-size: 12px; line-height: 1.25; }
 .dx-hero-features small { margin-top: 3px; font-size: 10px; line-height: 1.3; color: #567098; }
 .dx-hero-cta { min-width: 0; min-height: 60px; width: 100%; margin: 20px 0 0; padding: 10px 20px; gap: 14px; box-shadow: 0 7px 18px rgba(0,170,60,.22); }
 .dx-hero-cta-text small { font-size: 11px; }
 .dx-hero-cta-text strong { font-size: 20px; }
 .dx-hero-cta-ico .dx-ico { width: 28px; height: 28px; }
}
/* Modern reference typography and frosted feature cards. */
.dx-hero--modern .dx-hero-eyebrow {
 display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px;
 border: 1px solid rgba(255,255,255,.95); border-radius: 999px;
 background: rgba(255,255,255,.72); box-shadow: 0 5px 22px rgba(0,159,231,.12);
 backdrop-filter: blur(12px); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #123e78;
}
.dx-hero--modern .dx-hero-eyebrow::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #00d63a; box-shadow: 0 0 0 5px rgba(0,214,58,.1); animation: dx-status-glow 2.5s ease-in-out infinite; }
.dx-hero--modern .dx-hero-eyebrow::after { display: none; }
.dx-hero--modern .dx-hero-title { margin-top: 24px; font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
.dx-hero--modern .dx-hero-title-accent { background-image: linear-gradient(100deg,#009b23 5%,#00a843 48%,#0076b6 95%); }
.dx-hero--modern .dx-hero-title::after { content: ''; display: block; width: 160px; height: 4px; border-radius: 4px; margin-top: 13px; background: linear-gradient(90deg,#11d62d,#0098ff); }
.dx-hero--modern .dx-hero-text { max-width: 100%; margin-top: 15px; color: #214f83; line-height: 1.4; }
.dx-hero--modern .dx-hero-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.dx-hero--modern .dx-hero-features li {
 width: auto; min-width: 0; align-items: flex-start; text-align: left; padding: 20px 17px;
 border: 1px solid rgba(255,255,255,.9); border-radius: 25px;
 background: linear-gradient(135deg,rgba(255,255,255,.78),rgba(218,241,255,.6));
 backdrop-filter: blur(14px); box-shadow: inset 0 2px 3px rgba(255,255,255,.9),0 12px 28px rgba(0,133,215,.1);
 transition: transform .25s ease,box-shadow .25s ease;
}
.dx-hero--modern .dx-hero-features li:hover { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(0,133,215,.19); }
.dx-hero--modern .dx-hero-feature-ico { width: 62px; height: 62px; align-self: center; border-radius: 0; background: transparent; color: #008bd7; box-shadow: none; }
.dx-hero--modern .dx-hero-ico { width: 100%; height: 100%; }
.dx-hero--modern .dx-hero-features strong { max-width: none; margin-top: 15px; font-size: 16px; line-height: 1.2; color: #073477; }
.dx-hero--modern .dx-hero-features strong::after { content: ''; display: block; width: 28px; height: 3px; margin-top: 13px; border-radius: 3px; background: #00c340; }
.dx-hero--modern .dx-hero-features small { margin-top: 12px; font-size: 13px; line-height: 1.4; color: #315b86; }
.dx-hero--modern .dx-hero-cta { margin-left: 0; margin-top: 26px; }
.dx-hero--modern .dx-hero-inner { animation: dx-hero-reveal .65s ease-out both; }
@keyframes dx-status-glow { 50% { box-shadow: 0 0 0 8px rgba(0,214,58,0); } }
@keyframes dx-hero-reveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1200px) {
 .dx-hero--modern { min-height: 820px; }
 .dx-hero--modern .dx-hero-inner { width: 560px; max-width: 43%; margin-left: 9%; padding: 165px 0 40px; }
 .dx-hero--modern .dx-hero-title { font-size: clamp(44px,3.35vw,68px); }
 .dx-hero--modern .dx-hero-text { font-size: 20px; }
}
@media (max-width: 1199px) {
 .dx-hero--modern .dx-hero-inner { max-width: 640px; }
 .dx-hero--modern .dx-hero-title { font-size: clamp(32px,7vw,56px); }
}
@media (max-width: 640px) {
 .dx-hero--modern .dx-hero-inner { padding: 0 18px; }
 .dx-hero--modern .dx-hero-eyebrow { padding: 9px 12px; gap: 8px; font-size: 9px; letter-spacing: .07em; }
 .dx-hero--modern .dx-hero-eyebrow::before { width: 7px; height: 7px; }
 .dx-hero--modern .dx-hero-title { margin-top: 18px; font-size: clamp(28px,8vw,44px); }
 .dx-hero--modern .dx-hero-title::after { width: 110px; margin-top: 10px; height: 3px; }
 .dx-hero--modern .dx-hero-text { font-size: 15px; }
 .dx-hero--modern .dx-hero-features { gap: 8px; margin-top: 18px; }
 .dx-hero--modern .dx-hero-features li { padding: 14px 9px; border-radius: 17px; }
 .dx-hero--modern .dx-hero-feature-ico { width: 42px; height: 42px; }
 .dx-hero--modern .dx-hero-features strong { font-size: 12px; margin-top: 12px; }
 .dx-hero--modern .dx-hero-features small { font-size: 11px; margin-top: 10px; }
 .dx-hero--modern .dx-hero-features strong::after { margin-top: 10px; width: 23px; }
}
@media (prefers-reduced-motion: reduce) {
 .dx-hero--modern .dx-hero-inner,.dx-hero--modern .dx-hero-eyebrow::before { animation: none; }
 .dx-hero--modern .dx-hero-features li:hover { transform: none; }
}