/* ============================================
   VitaReset UI v3 — Visual Polish Layer
   ============================================ */

:root {
	--surface: #fdfbfe;
	--surface-warm: #faf6f8;
	--surface-elevated: #ffffff;
	--surface-muted: #f3eef6;
	--brand-rose-light: #f5e8f3;
	--brand-rose-mid: #d4a5c8;
	--gradient-hero: linear-gradient(135deg, #7a4f82 0%, #5c3868 40%, #2a1f32 100%);
	--gradient-gold: linear-gradient(120deg, #c9a227 0%, #f5d76e 45%, #d4af37 100%);
	--gradient-shine: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
}

body {
	background-color: var(--surface) !important;
	background-image:
		radial-gradient(ellipse 90% 60% at 50% -30%, rgba(212, 165, 200, 0.14), transparent),
		radial-gradient(ellipse 50% 40% at 0% 50%, rgba(176, 156, 191, 0.08), transparent),
		radial-gradient(ellipse 40% 35% at 100% 80%, rgba(212, 175, 55, 0.05), transparent) !important;
}

/* ── Header accent line ── */
.today-header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-gold), var(--brand-primary), transparent);
	opacity: 0.5;
}

/* ── Hero typography ── */
.hero-content h1 {
	font-weight: 600;
	line-height: 1.32;
}

.hero-highlight {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	white-space: nowrap;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	padding: 1rem;
	background: var(--surface-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}

.hero-stat {
	text-align: center;
	padding: 0.25rem 0.5rem;
	position: relative;
}

.hero-stat:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: var(--border-subtle);
}

.hero-stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 700;
	color: var(--brand-secondary);
	line-height: 1.2;
}

.hero-stat span {
	display: block;
	font-size: 0.6875rem;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0.125rem;
}

.hero-content .breaking-news-badge {
	background: linear-gradient(135deg, var(--brand-rose-light), var(--surface-elevated));
	border-color: rgba(109, 73, 116, 0.12);
}

.hero-content .article-meta {
	padding: 0.625rem 0.875rem;
	background: var(--surface-muted);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-subtle);
	width: fit-content;
	max-width: 100%;
}

/* ── CTA card luxe ── */
.hero-cta-card {
	background: var(--gradient-hero);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-cta-card::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: var(--gradient-shine);
	animation: shine-sweep 6s ease-in-out infinite;
	pointer-events: none;
	opacity: 0.4;
}

@keyframes shine-sweep {
	0%, 100% { transform: translateX(-60%) rotate(25deg); }
	50% { transform: translateX(60%) rotate(25deg); }
}

.hero-cta-btn {
	position: relative;
	overflow: hidden;
	padding: 1.0625rem 2.25rem;
	box-shadow: 0 4px 20px rgba(22, 163, 74, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

.hero-cta-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-shine);
	transform: translateX(-100%);
	animation: btn-shine 3s ease-in-out infinite;
}

@keyframes btn-shine {
	0%, 80%, 100% { transform: translateX(-100%); }
	40% { transform: translateX(100%); }
}

.hero-cta-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.hero-cta-note::before {
	content: '✓';
	font-size: 0.6875rem;
	opacity: 0.8;
}

/* ── Trust bar icons ── */
.trust-bar-inner {
	background: linear-gradient(180deg, var(--surface-elevated), var(--surface-warm));
}

.trust-item i {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(109,73,116,0.12), rgba(176,156,191,0.18));
	border-radius: 50%;
	font-size: 0.8125rem;
}

/* ── Benefit cards luxe ── */
.benefit-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface-warm) 100%);
}

.benefit-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary), var(--brand-gold));
	opacity: 0.7;
}

.benefit-icon {
	background: linear-gradient(145deg, var(--brand-rose-light), rgba(176,156,191,0.2));
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ── Video player glow ── */
.video-container {
	border: 1px solid rgba(109, 73, 116, 0.15);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(255,255,255,0.5) inset;
}

.video-container-header {
	background: linear-gradient(90deg, var(--brand-deep), var(--brand-secondary), var(--brand-deep));
	background-size: 200% 100%;
	animation: header-shift 8s ease infinite;
	letter-spacing: 0.1em;
}

@keyframes header-shift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.video-container-body {
	position: relative;
}

.video-container-body::before {
	content: '';
	position: absolute;
	inset: 1.25rem;
	border-radius: var(--radius-md);
	box-shadow: 0 0 40px rgba(109, 73, 116, 0.15);
	pointer-events: none;
	z-index: 0;
}

.video-container-body vturb-smartplayer {
	position: relative;
	z-index: 1;
}

/* ── CTA banners ── */
.py-3.py-md-5[style*="secondary-color"] .title-claim,
.py-3.py-md-5[style*="#000"] .title-claim {
	text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

ul.strip3-list li {
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.15);
}

/* ── Product cards premium ── */
.products .item {
	background: linear-gradient(180deg, #fff 0%, var(--surface-warm) 100%) !important;
}

.products .item.promo {
	border-width: 2px !important;
	position: relative;
	overflow: visible !important;
	margin-top: 14px;
}

.products .item.promo::before {
	content: '★ RECOMMENDED';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	background: var(--gradient-gold);
	color: var(--brand-dark);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 0.3125rem 0.875rem;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
	white-space: nowrap;
}

.products .item.promo .wrapper {
	background: linear-gradient(160deg, #8a6a96 0%, #6D4974 40%, #4a3050 100%) !important;
}

.products .item.promo .item-header {
	background: rgba(255,255,255,0.95) !important;
	color: var(--brand-secondary) !important;
	margin-top: 0.5rem;
	border-radius: var(--radius-sm);
}

.products .item .item-info .price b {
	background: linear-gradient(180deg, var(--text-primary), var(--brand-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.products .item.promo .item-info .price b {
	background: linear-gradient(180deg, #fff, var(--brand-rose-light));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.buy-button {
	letter-spacing: 0.05em;
}

/* ── Guarantee badge glow ── */
#guarantee figure img {
	filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2));
}

/* ── Testimonials quote style ── */
#testimonials .card-container {
	background: linear-gradient(180deg, var(--surface-elevated), var(--surface-warm));
}

#testimonials .text-user p {
	position: relative;
	padding-left: 1rem;
	border-left: 3px solid var(--brand-primary);
	font-style: italic;
	color: var(--text-secondary);
}

/* ── FAQ polish ── */
#faq {
	position: relative;
}

#faq::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

#faq .container {
	position: relative;
	z-index: 1;
}

/* ── Who is section ── */
#who-is .rounded-4 {
	background: var(--gradient-hero) !important;
}

/* ── Comments ── */
.comments-section {
	position: relative;
}

.comments-section-header h2::before {
	content: '💬';
	margin-right: 0.375rem;
	font-size: 0.9em;
}

.comments-section-header span {
	padding: 0.25rem 0.625rem;
	background: var(--surface-muted);
	border-radius: 999px;
	font-size: 0.6875rem;
}

#fb-comments .comments-container {
	background: linear-gradient(180deg, var(--surface-elevated), var(--surface-warm));
}

/* ── Footer premium ── */
.site-footer {
	background: linear-gradient(180deg, #221a28 0%, var(--brand-dark) 100%);
}

.site-footer .footer-logo {
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.site-footer .footer-logo:hover {
	opacity: 1;
}

/* ── Section rhythm on VSL ── */
.esconder > .py-3:first-child,
.esconder > section.products:first-of-type {
	animation: fade-up 0.6s var(--ease-out) both;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Ship box ── */
.shipbx {
	background: linear-gradient(135deg, var(--surface-elevated), var(--brand-rose-light)) !important;
}

.shipiconbx {
	background: linear-gradient(135deg, var(--brand-secondary), var(--brand-deep)) !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
	.hero-stats {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.hero-stat:not(:last-child)::after {
		display: none;
	}

	.hero-stat {
		padding: 0.5rem;
		border-bottom: 1px solid var(--border-subtle);
	}

	.hero-stat:last-child {
		border-bottom: none;
	}

	.hero-highlight {
		white-space: normal;
	}

	.products .item.promo::before {
		font-size: 0.625rem;
		top: -10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-cta-card::after,
	.hero-cta-btn::after,
	.video-container-header {
		animation: none;
	}
}