diff --git a/src/media/css/template.css b/src/media/css/template.css
index 8efea3a..1cc4a5d 100644
--- a/src/media/css/template.css
+++ b/src/media/css/template.css
@@ -13925,8 +13925,17 @@ meter {
 	}
 }
 
-/* ── HERO CARD BASE ── */
+/* ── HERO WRAPPER (module wrapper, full-width centering container) ── */
 .hero {
+	display: flex;
+	justify-content: var(--hero-justify, center);
+	align-items: var(--hero-align, center);
+	width: 100%;
+	min-height: var(--hero-min-height, 100%);
+}
+
+/* ── HERO CARD BASE (the .card inside the hero wrapper) ── */
+.hero .card {
 	max-width: var(--hero-card-max-width, 600px);
 	padding: var(--hero-card-padding-y, 3rem) var(--hero-card-padding-x, 2rem);
 	background-color: var(--hero-card-bg, var(--hero-primary-bg-color, #0d1e3a));
@@ -13935,17 +13944,21 @@ meter {
 	background-position: center;
 	color: var(--hero-card-color, var(--hero-primary-color, #f1f5f9));
 	border-radius: var(--hero-card-border-radius, .5rem);
+	text-align: var(--hero-card-text-align, center);
+	margin-left: auto;
+	margin-right: auto;
+	border: none;
 }
 
-/* ── PRIMARY VARIANT (uses default card vars) ── */
-.hero#primary {
+/* ── PRIMARY VARIANT ── */
+.hero#primary .card {
 	background-color: var(--hero-card-bg, #0d1e3a);
 	background-image: var(--hero-card-overlay, none);
 	color: var(--hero-card-color, #f1f5f9);
 }
 
 /* ── SECONDARY / ALTERNATIVE VARIANT ── */
-.hero#secondary {
+.hero#secondary .card {
 	max-width: var(--hero-alt-card-max-width, 600px);
 	padding: var(--hero-alt-card-padding-y, 3rem) var(--hero-alt-card-padding-x, 2rem);
 	background-color: var(--hero-alt-card-bg, #080f1e);
@@ -13967,14 +13980,14 @@ meter {
 		background-image: none;
 	}
 	.hero {
-		max-width: 100%;
-		width: 100%;
 		min-height: 100vh;
 		min-height: 100dvh;
-		border-radius: 0;
-		display: flex;
 		flex-direction: column;
-		justify-content: center;
+	}
+	.hero .card {
+		max-width: 100%;
+		width: 100%;
+		border-radius: 0;
 	}
 }