/* Homepage-only geometry from the saved reference; content remains replaceable. */
.home-hero {
	position: relative;
	isolation: isolate;
	/* The existing shell reserves 73px; the reference hero begins at 72px. */
	margin-block-start: -1px;
	background: radial-gradient(ellipse 80% 60% at 70% 30%, rgb(212 175 55 / 10%), transparent 60%), radial-gradient(ellipse 60% 50% at 20% 80%, rgb(184 150 92 / 8%), transparent 55%);
}
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.4;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
}
.home-hero__grid {
	display: grid;
	align-items: center;
	gap: 48px;
	min-block-size: calc(100svh - 72px);
	padding-block: 64px;
}
.home-hero__copy { min-inline-size: 0; }
.home-hero__eyebrow {
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
	color: var(--dermobliss-accent-gold-dark);
}
.home-hero h1 {
	margin-block-start: 24px;
	font-size: 36px;
	line-height: 1.08;
}
.home-hero h1 em { color: var(--dermobliss-accent-gold-dark); font-weight: 400; }
.home-hero__lead {
	max-inline-size: 512px;
	margin-block-start: 24px;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: var(--dermobliss-text-secondary);
}
.home-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-block-start: 40px;
}
.hero-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-inline-size: 100%;
	padding: 16px 32px;
	border: 0;
	border-radius: 0;
	background: var(--dermobliss-text-primary);
	color: var(--dermobliss-background-primary);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.18em;
	text-decoration: none;
	transition: background-color var(--dermobliss-transition-duration) var(--dermobliss-transition-easing);
}
.hero-action svg { flex-shrink: 0; }
.hero-action--outline {
	border: 1px solid rgb(28 27 26 / 15%);
	background: transparent;
	color: var(--dermobliss-text-primary);
}
.hero-action:disabled { cursor: not-allowed; opacity: 1; }
.hero-action:not(:disabled):hover { background: var(--dermobliss-accent-gold-dark); color: var(--dermobliss-background-primary); }
.hero-action:focus-visible { outline-color: var(--dermobliss-text-primary); }
.home-hero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-block-start: 56px;
	padding-block-start: 32px;
	border-block-start: 1px solid var(--dermobliss-border-default);
}
.home-hero__facts > div { min-inline-size: 0; }
.home-hero__number { font-family: var(--dermobliss-font-display); font-size: 30px; font-weight: 300; line-height: 36px; }
.home-hero__fact-label { margin-block-start: 4px; font-size: 12px; line-height: 16.5px; color: var(--dermobliss-text-secondary); }
.home-hero__fact-note { margin-block-start: 2px; font-family: var(--dermobliss-font-mono); font-size: 10px; line-height: 15px; letter-spacing: 0.05em; color: var(--dermobliss-text-secondary); }
.home-hero__media { display: none; position: relative; min-inline-size: 0; }
.home-hero__frame { position: relative; aspect-ratio: 4 / 5; clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); background: var(--dermobliss-background-muted); }
.home-hero__products { overflow: hidden; background: linear-gradient(145deg, #f1ece4, #e7dfd4); }
.home-hero__product { position: absolute; display: block; inline-size: 58%; block-size: 82%; object-fit: contain; filter: drop-shadow(0 20px 18px rgb(28 27 26 / 14%)); }
.home-hero__product--dermashield { inset: 10% auto auto 5%; z-index: 2; transform: rotate(-4deg); }
.home-hero__product--lumiskin { inset: 6% 4% auto auto; z-index: 1; transform: rotate(5deg); }
.home-hero__product--sun-bright { inset: auto 18% 0 auto; z-index: 3; inline-size: 52%; block-size: 70%; }
.home-hero__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; color: var(--dermobliss-text-secondary); }
.home-hero__placeholder span { font-family: var(--dermobliss-font-mono); font-size: 10px; letter-spacing: 0.2em; }
.home-hero__placeholder p { max-inline-size: 240px; font-family: var(--dermobliss-font-display); font-size: 24px; line-height: 28px; }
.home-hero__badge { position: absolute; inset-inline-start: -40px; inset-block-end: 64px; inline-size: 229px; padding: 16px 20px; border: 1px solid rgb(184 150 92 / 30%); background: rgb(250 248 245 / 90%); }
.home-hero__badge p { font-family: var(--dermobliss-font-mono); font-size: 10px; line-height: 15px; letter-spacing: 0.2em; color: var(--dermobliss-accent-gold-dark); }
.home-hero__badge span { display: block; margin-block-start: 4px; font-family: var(--dermobliss-font-display); font-size: 18px; line-height: 28px; }
/* Keep the audited mobile copy slots while approved text is pending; longer text can grow. */
@media (max-width: 639px) {
	.home-hero__lead { min-block-size: 104px; }
	.home-hero__fact-label { min-block-size: 33px; }
	.home-hero__fact-note { min-block-size: 30px; }
}
@media (min-width: 640px) {
	.home-hero h1 { font-size: 48px; line-height: 1; }
	.home-hero__actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
	.home-hero__number { font-size: 36px; line-height: 40px; }
}
@media (min-width: 1024px) {
	.home-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.home-hero h1 { font-size: 60px; }
	.home-hero__media { display: block; }
	.home-hero__fact-label { min-block-size: 16.5px; }
	.home-hero__fact-note { min-block-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .hero-action { transition: none; } }