/* ==========================================================================
   Pagina principală
   ========================================================================== */

/* --- Hero --- */
.dt-hero {
	position: relative;
	overflow: hidden;
	background: var(--dt-charcoal);
	color: var(--dt-on-dark);
	isolation: isolate;
}

.dt-hero__bg { position: absolute; inset: 0; z-index: -2; }
.dt-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

.dt-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, var(--dt-charcoal) 0%, rgba(21, 23, 25, 0.94) 34%, rgba(21, 23, 25, 0.55) 62%, rgba(21, 23, 25, 0.3) 100%),
		radial-gradient(1100px 480px at 12% 30%, rgba(237, 28, 36, 0.09), transparent 70%);
}

.dt-hero__inner {
	display: flex;
	align-items: center;
	min-height: clamp(420px, 46vw, 560px);
	padding-block: var(--dt-8);
}

.dt-hero__content { max-width: 620px; }

.dt-eyebrow--on-dark { color: #FF6067; }

.dt-hero__title { color: #fff; margin-bottom: var(--dt-3); }

.dt-hero__text {
	max-width: 52ch;
	margin: 0 0 var(--dt-4);
	font-size: var(--dt-fs-lg);
	line-height: 1.55;
	color: var(--dt-on-dark-2);
	text-wrap: pretty;
}

.dt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.dt-hero__perks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dt-2) var(--dt-5);
	margin: var(--dt-6) 0 0;
	padding: var(--dt-3) 0 0;
	border-top: 1px solid var(--dt-on-dark-border);
	list-style: none;
}
.dt-hero__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--dt-fs-sm);
	font-weight: 600;
	color: var(--dt-on-dark-2);
}
.dt-hero__perks .dt-icon { color: #fff; opacity: 0.8; flex: none; }

@media (max-width: 780px) {
	.dt-hero__bg img { object-position: 62% center; opacity: 0.55; }
	.dt-hero::after { background: linear-gradient(180deg, rgba(21, 23, 25, 0.82), rgba(21, 23, 25, 0.95)); }
	.dt-hero__inner { min-height: 0; padding-block: var(--dt-7); }
}

/* --- Categorii după scop --- */
.dt-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--dt-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-cat { position: relative; }

.dt-cat__link {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--dt-radius);
	overflow: hidden;
	background: var(--dt-charcoal);
	text-decoration: none;
	isolation: isolate;
}

.dt-cat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dt-t-slow);
}
.dt-cat__link:hover .dt-cat__img { transform: scale(1.05); }

.dt-cat__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21, 23, 25, 0.05) 30%, rgba(21, 23, 25, 0.78) 100%);
	transition: background var(--dt-t);
}
.dt-cat:not(.has-image) .dt-cat__link::after {
	background: linear-gradient(155deg, #2A2E33 0%, #151719 100%);
}
.dt-cat__link:hover::after { background: linear-gradient(180deg, rgba(21, 23, 25, 0.12) 20%, rgba(21, 23, 25, 0.85) 100%); }

.dt-cat__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--dt-3);
	color: #fff;
}
.dt-cat__icon { display: inline-flex; flex: none; opacity: 0.9; }
.dt-cat__name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

/* --- Ghidul rapid de alegere --- */
.dt-quiz {
	display: grid;
	grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--dt-4);
	padding: var(--dt-5);
	background: var(--dt-bg);
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius-lg);
}

.dt-quiz__intro h2 { margin: 0 0 8px; }
.dt-quiz__text { margin: 0; font-size: var(--dt-fs-sm); color: var(--dt-text-2); line-height: 1.55; }

.dt-quiz__form { display: contents; }

.dt-quiz__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--dt-3);
	position: relative;
}

.dt-quiz__field { display: grid; gap: 6px; }

.dt-quiz__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--dt-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 2px;
}

.dt-quiz__submit { align-self: end; white-space: nowrap; }

.dt-quiz__result { grid-column: 1 / -1; margin-top: var(--dt-4); padding-top: var(--dt-4); border-top: 1px solid var(--dt-border); }
.dt-quiz__result[hidden] { display: none; }
.dt-quiz__result-title { margin: 0 0 var(--dt-3); font-size: var(--dt-fs-h4); font-weight: 700; }
.dt-quiz__loading,
.dt-quiz__empty { margin: 0; color: var(--dt-text-2); font-size: var(--dt-fs-sm); }

@media (max-width: 1080px) {
	.dt-quiz { grid-template-columns: minmax(0, 1fr); }
	.dt-quiz__submit { justify-self: start; }
}

/* --- Modelul promovat --- */
.dt-spotlight {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: var(--dt-5);
	padding: var(--dt-6);
	background: var(--dt-charcoal);
	border-radius: var(--dt-radius-lg);
	color: var(--dt-on-dark);
	position: relative;
	overflow: hidden;
}
.dt-spotlight::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(700px 320px at 20% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
	pointer-events: none;
}

.dt-spotlight__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dt-3);
	background: var(--dt-surface);
	border-radius: var(--dt-radius);
}
.dt-spotlight__media img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }

.dt-spotlight__body { position: relative; }
.dt-spotlight__brand { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--dt-text-3); }
.dt-spotlight__name { color: #fff; margin-bottom: var(--dt-2); }
.dt-spotlight__claim { margin: 0 0 var(--dt-4); max-width: 46ch; color: var(--dt-on-dark-2); line-height: 1.55; }

.dt-spotlight__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--dt-3);
	margin: 0 0 var(--dt-5);
	padding: 0;
	list-style: none;
}
.dt-spotlight__specs li {
	display: grid;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dt-on-dark-2);
}
.dt-spotlight__specs .dt-icon { color: #fff; opacity: 0.85; }

.dt-spotlight__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-3);
	padding-top: var(--dt-3);
	border-top: 1px solid var(--dt-on-dark-border);
}
.dt-spotlight__price { display: grid; gap: 4px; }
.dt-spotlight__price .dt-price { color: #fff; }
.dt-spotlight__price .dt-price__cur { color: var(--dt-on-dark-2); }

@media (max-width: 820px) {
	.dt-spotlight { grid-template-columns: minmax(0, 1fr); padding: var(--dt-4); }
	.dt-spotlight__media img { max-height: 220px; }
}

/* --- Tabelul de comparație pe pagina principală --- */
.dt-compare-card { padding: var(--dt-2) var(--dt-4) var(--dt-3); }
.dt-compare-card .dt-compare-table th:first-child,
.dt-compare-card .dt-compare-table td:first-child { padding-left: 0; }

/* --- De ce Detector.md --- */
.dt-why { padding: var(--dt-5); }

/* --- Accesorii --- */
.dt-acc {
	display: grid;
	gap: var(--dt-2);
	padding: var(--dt-3);
	text-decoration: none;
	color: inherit;
}
.dt-acc__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--dt-radius-sm);
	background: var(--dt-bg);
	color: var(--dt-text-3);
	overflow: hidden;
}
.dt-acc__media img { width: 100%; height: 100%; object-fit: contain; }
.dt-acc__body { display: grid; gap: 6px; }
.dt-acc__name { font-size: 1rem; font-weight: 700; color: var(--dt-text); }
.dt-acc__desc { font-size: 13px; line-height: 1.5; color: var(--dt-text-2); }
.dt-acc__cta { font-size: 13px; font-weight: 700; color: var(--dt-red); }
.dt-acc:hover .dt-acc__cta { color: var(--dt-red-hover); }

/* --- Consultanță + întrebări frecvente --- */
.dt-help-faq {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	gap: var(--dt-3);
	align-items: start;
}

.dt-consult { padding: var(--dt-4); display: grid; gap: var(--dt-2); align-content: start; }
.dt-consult__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--dt-bg);
	color: var(--dt-text-2);
	margin-bottom: 4px;
}
.dt-consult__text { margin: 0; font-size: var(--dt-fs-sm); line-height: 1.6; color: var(--dt-text-2); }
.dt-consult__contact { display: grid; gap: 10px; margin: var(--dt-1) 0 var(--dt-2); padding: 0; list-style: none; }
.dt-consult__contact li { display: flex; align-items: center; gap: 10px; font-size: var(--dt-fs-sm); font-weight: 600; }
.dt-consult__contact .dt-icon { color: var(--dt-text-3); flex: none; }
.dt-consult__contact a { color: var(--dt-text); text-decoration: none; }
.dt-consult__contact a:hover { color: var(--dt-red); }
.dt-consult .dt-btn { justify-self: start; }

.dt-faq { padding: var(--dt-4); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-lg); }
.dt-faq__title { margin-bottom: var(--dt-2); }
.dt-faq__all { margin-top: var(--dt-3); }

@media (max-width: 900px) {
	.dt-help-faq { grid-template-columns: minmax(0, 1fr); }
}

/* --- Apel final --- */
.dt-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dt-3) var(--dt-5);
	padding: var(--dt-5) var(--dt-6);
	background: var(--dt-charcoal);
	border-radius: var(--dt-radius-lg);
	color: var(--dt-on-dark);
}
.dt-cta__text h2 { color: #fff; margin: 0 0 6px; }
.dt-cta__text p { margin: 0; color: var(--dt-on-dark-2); font-size: var(--dt-fs-sm); }
.dt-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 620px) {
	.dt-cta { padding: var(--dt-4); }
}