:root {
	--bg: #090b12;
	--bg-soft: #111827;
	--card: rgba(255,255,255,.06);
	--border: rgba(255,255,255,.12);
	--text: #ffffff;
	--muted: rgba(255,255,255,.65);
	--warning: #ffc107;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.templates-hero {
	padding: 90px 0;
	background:
		radial-gradient(circle at top left, rgba(255,193,7,.22), transparent 35%),
		radial-gradient(circle at top right, rgba(99,102,241,.22), transparent 35%),
		linear-gradient(135deg, #080a12 0%, #111827 60%, #05070c 100%);
	border-bottom: 1px solid var(--border);
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid var(--border);
	color: var(--muted);
	font-weight: 600;
}

.hero-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 28px;
	padding: 32px;
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.template-search {
	position: relative;
	min-width: min(100%, 340px);
}

.template-search i {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--muted);
}

.template-search .form-control {
	padding-left: 44px;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 16px;
	min-height: 48px;
}

.template-search .form-control::placeholder {
	color: rgba(255,255,255,.45);
}

.template-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 26px;
	overflow: hidden;
	transition: .25s ease;
	box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.template-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,193,7,.45);
	box-shadow: 0 26px 70px rgba(0,0,0,.35);
}

.template-image {
	position: relative;
	height: 230px;
	background: #151b2b;
	overflow: hidden;
}

.template-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .35s ease;
}

.template-card:hover .template-image img {
	transform: scale(1.04);
}

.template-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.35);
	font-size: 3rem;
}

.template-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(0,0,0,.65);
	color: #fff;
	border: 1px solid rgba(255,255,255,.18);
	padding: 7px 12px;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 700;
}

.template-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 24px;
}

.template-body p {
	line-height: 1.7;
}

.templates-footer {
	padding: 28px 0;
	border-top: 1px solid var(--border);
	background: #070910;
	color: var(--muted);
}

@media (max-width: 575px) {
	.templates-hero {
		padding: 64px 0;
	}

	.template-image {
		height: 190px;
	}
}