:root {
	--home-ink: #101936;
	--home-muted: #66708f;
	--home-purple: #6438f2;
	--home-purple-dark: #4e22dc;
	--home-line: #e9edf7;
	--home-soft: #f7f8ff;
	--home-card: #ffffff;
	--home-content-width: min(1420px, calc(100vw - 88px));
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 8% 13%, rgba(235, 230, 255, 0.72), transparent 18rem),
		radial-gradient(circle at 94% 8%, rgba(239, 231, 255, 0.85), transparent 20rem),
		linear-gradient(180deg, #ffffff 0%, #fbfcff 42%, #f8faff 100%);
	color: var(--home-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	padding: 18px 38px;
	border-bottom: 1px solid var(--home-line);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(18px);
	box-shadow: 0 12px 30px rgba(74, 82, 118, 0.08);
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--home-ink);
	text-decoration: none;
}

.site-logo-mark {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(27, 20, 48, 0.18);
}

.site-logo-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-logo strong {
	color: var(--home-ink);
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.site-logo strong span {
	color: var(--home-purple);
}

.site-nav {
	display: flex;
	justify-content: center;
	gap: 38px;
}

.site-nav ul {
	display: flex;
	gap: 38px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a,
.signin-link,
.section-heading a,
.site-footer a {
	color: var(--home-ink);
	font-weight: 800;
	text-decoration: none;
}

.site-nav a {
	font-size: 15px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 250px;
}

.header-search input,
.hero-search input,
.footer-form input {
	width: 100%;
	border: 1px solid var(--home-line);
	background: #ffffff;
	color: var(--home-ink);
	font: inherit;
	outline: none;
}

.header-search input {
	height: 42px;
	padding: 0 42px 0 46px;
	border-radius: 10px;
	box-shadow: 0 8px 18px rgba(93, 101, 133, 0.08);
}

.header-search svg,
.hero-search > svg {
	position: absolute;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #536386;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.header-search svg {
	left: 16px;
}

.signin-link {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--home-line);
	border-radius: 10px;
	background: #ffffff;
	font-size: 14px;
}

.primary-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #7048ff, #5428e9);
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 12px 22px rgba(100, 56, 242, 0.25);
}

.home-hero {
	position: relative;
	overflow: hidden;
	min-height: 235px;
	padding: 44px 24px 34px;
	text-align: center;
	background:
		radial-gradient(circle at 6% 78%, rgba(255, 255, 255, 0.95) 0 66px, transparent 68px),
		radial-gradient(circle at 91% 42%, rgba(255, 255, 255, 0.92) 0 72px, transparent 74px),
		linear-gradient(135deg, #fbfbff 0%, #f4efff 55%, #fdfcff 100%);
}

.home-hero h1 {
	position: relative;
	max-width: 880px;
	margin: 0 auto 12px;
	color: var(--home-ink);
	font-size: clamp(34px, 5vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.home-hero p {
	position: relative;
	margin: 0 auto 30px;
	color: #293351;
	font-size: 19px;
	font-weight: 700;
}

.hero-search {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 64px;
	align-items: center;
	width: min(790px, calc(100vw - 44px));
	height: 64px;
	margin: 0 auto;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 15px 32px rgba(96, 88, 138, 0.16);
}

.hero-search > svg {
	left: 22px;
}

.hero-search input {
	height: 64px;
	padding: 0 18px 0 62px;
	border: 0;
	border-radius: 12px 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.hero-search button {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: linear-gradient(135deg, #7048ff, #5428e9);
	cursor: pointer;
}

.hero-search button svg,
.footer-form svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero-spark {
	position: absolute;
	width: 18px;
	height: 18px;
}

.hero-spark::before,
.hero-spark::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 999px;
}

.hero-spark::before {
	left: 7px;
	top: 0;
	width: 4px;
	height: 18px;
}

.hero-spark::after {
	left: 0;
	top: 7px;
	width: 18px;
	height: 4px;
}

.hero-spark-a { left: 15%; top: 42px; color: #7f58ff; }
.hero-spark-b { right: 16%; top: 94px; color: #f8b400; }
.hero-spark-c { right: 10%; bottom: 54px; color: #a88bff; }

.category-strip {
	display: flex;
	gap: 13px;
	width: var(--home-content-width);
	margin-inline: auto;
	overflow-x: auto;
	padding: 30px 0 18px;
}

.category-strip button {
	flex: 0 0 auto;
	min-height: 49px;
	padding: 0 24px;
	border: 1px solid var(--home-line);
	border-radius: 999px;
	background: #ffffff;
	color: var(--home-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(74, 82, 118, 0.08);
}

.category-strip button.is-active {
	border-color: transparent;
	background: linear-gradient(135deg, #7048ff, #5428e9);
	color: #ffffff;
	box-shadow: 0 12px 24px rgba(100, 56, 242, 0.26);
}

.template-catalog,
.workflow,
.latest-posts {
	width: var(--home-content-width);
	margin-inline: auto;
}

.template-section,
.workflow,
.latest-posts {
	border: 1px solid var(--home-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 28px rgba(74, 82, 118, 0.06);
}

.template-section {
	padding: 20px 20px 22px;
}

.template-section + .template-section {
	margin-top: 22px;
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.section-heading h2 {
	margin: 0;
	color: var(--home-ink);
	font-size: 26px;
	letter-spacing: -0.02em;
}

.section-heading a {
	color: var(--home-purple);
}

.template-row,
.post-row,
.archive-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.home-card,
.post-card a,
.archive-card a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--home-line);
	border-radius: 10px;
	background: #ffffff;
	color: var(--home-ink);
	text-decoration: none;
	box-shadow: 0 12px 24px rgba(74, 82, 118, 0.07);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-card:hover,
.post-card a:hover,
.archive-card a:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 30px rgba(74, 82, 118, 0.13);
}

.home-card img,
.post-card img,
.archive-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: linear-gradient(135deg, var(--card-a, #f5f0ff), var(--card-b, #edf7ff));
	mix-blend-mode: multiply;
}

.home-card span,
.post-card span,
.archive-card span {
	display: grid;
	gap: 6px;
	padding: 13px 14px 15px;
}

.home-card strong,
.post-card strong,
.archive-card strong {
	color: var(--home-ink);
	font-size: 15px;
	line-height: 1.2;
}

.home-card small,
.post-card small,
.archive-card small {
	color: var(--home-muted);
	font-size: 13px;
	font-weight: 800;
}

.card-rose { --card-a: #ffe1ea; --card-b: #fff4f7; }
.card-sky { --card-a: #d8efff; --card-b: #fff3e0; }
.card-violet { --card-a: #eadfff; --card-b: #fff3fb; }
.card-candy { --card-a: #ffe6f1; --card-b: #dff6ff; }
.card-pink { --card-a: #ffe1ec; --card-b: #fff7fb; }
.card-red { --card-a: #ffd9d9; --card-b: #fff2f2; }
.card-coral { --card-a: #ffc8c8; --card-b: #fff0f0; }
.card-warm { --card-a: #fff0dc; --card-b: #fffaf2; }
.card-leaf { --card-a: #e4f8df; --card-b: #fff6e5; }
.card-linen { --card-a: #fff1d9; --card-b: #f6fff3; }
.card-peach { --card-a: #ffe1d2; --card-b: #fff8eb; }
.card-blue { --card-a: #dff4ff; --card-b: #fff9e4; }
.card-night { --card-a: #dce7ff; --card-b: #eef3ff; }
.card-kawaii { --card-a: #ffe4f0; --card-b: #fff5f9; }
.card-action { --card-a: #ffe4c9; --card-b: #e7efff; }
.card-moon { --card-a: #d8e8ff; --card-b: #fff2d6; }
.card-beach { --card-a: #d6f5ff; --card-b: #fff0cf; }
.card-paris { --card-a: #e4f1ff; --card-b: #fff1df; }
.card-world { --card-a: #dffff7; --card-b: #fff0d5; }
.card-road { --card-a: #e0f5ff; --card-b: #ffe8c9; }
.card-christmas { --card-a: #ffe0df; --card-b: #e2f8e7; }
.card-halloween { --card-a: #eadcff; --card-b: #ffe7c8; }
.card-gold { --card-a: #f5e7c1; --card-b: #f9f9ff; }
.card-valentine { --card-a: #ffe1ec; --card-b: #fff4f7; }

.workflow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
	padding: 20px;
}

.workflow-card {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	align-items: center;
	min-height: 108px;
}

.workflow-card > span {
	position: absolute;
	left: 70px;
	top: 4px;
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border-radius: 999px;
	background: var(--home-purple);
	color: #ffffff;
	font-weight: 900;
}

.workflow-icon {
	display: grid;
	place-items: center;
	width: 82px;
	height: 82px;
	border-radius: 16px;
	background: linear-gradient(135deg, #f2eeff, #faf7ff);
}

.workflow-icon svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: var(--home-purple);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.workflow h3 {
	margin: 0 0 7px;
	font-size: 18px;
}

.workflow p {
	margin: 0;
	color: var(--home-muted);
	font-weight: 700;
}

.latest-posts {
	margin-top: 28px;
	padding: 20px;
}

.content-shell {
	width: min(1120px, calc(100vw - 48px));
	margin: 46px auto;
}

.content-shell.narrow {
	width: min(820px, calc(100vw - 48px));
}

.content-header,
.entry-content-card {
	padding: 28px;
	border: 1px solid var(--home-line);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(74, 82, 118, 0.06);
}

.content-header {
	margin-bottom: 24px;
}

.content-header h1,
.entry-content-card h1 {
	margin: 0 0 10px;
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.04em;
}

.content-header p,
.entry-content-card,
.entry-meta {
	color: var(--home-muted);
	font-weight: 650;
	line-height: 1.75;
}

.entry-content-card {
	color: #24304d;
}

.entry-content-card a {
	color: var(--home-purple);
	font-weight: 800;
}

.entry-cover img {
	width: 100%;
	border-radius: 12px;
}

.site-footer {
	display: grid;
	grid-template-columns: 1.4fr repeat(2, minmax(130px, 0.7fr)) 1.1fr;
	gap: 54px;
	width: min(1420px, calc(100vw - 88px));
	margin: 36px auto 0;
	padding: 34px 28px;
	border-top: 1px solid var(--home-line);
	color: var(--home-ink);
}

.site-footer .site-logo strong {
	font-size: 20px;
}

.site-footer .site-logo-mark {
	width: 38px;
	height: 38px;
	border-radius: 9px;
}

.site-footer p,
.site-footer a {
	margin: 0;
	color: var(--home-muted);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}

.site-footer h3 {
	margin: 0 0 12px;
	font-size: 15px;
}

.site-footer > div,
.footer-form {
	display: grid;
	align-content: start;
	gap: 9px;
}

.footer-form label {
	display: grid;
	grid-template-columns: 1fr 48px;
	margin-top: 8px;
}

.footer-form input {
	height: 46px;
	padding: 0 14px;
	border-radius: 10px 0 0 10px;
}

.footer-form button {
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 0 10px 10px 0;
	background: var(--home-purple);
	cursor: pointer;
}

.copyright {
	grid-column: 1 / -1;
	text-align: center;
}

@media (max-width: 1120px) {
	.site-header {
		grid-template-columns: auto auto;
	}

	.site-nav {
		display: none;
	}

	.header-actions {
		justify-content: end;
	}

	.template-row,
	.post-row,
	.archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.workflow {
		grid-template-columns: 1fr;
	}

	.site-footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.site-header {
		position: static;
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 14px;
	}

	.site-logo strong {
		font-size: 24px;
	}

	.header-actions {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	.header-search {
		width: 100%;
	}

	.signin-link {
		display: none;
	}

	.home-hero {
		padding: 34px 16px 28px;
	}

	.home-hero p {
		font-size: 15px;
	}

	.hero-search {
		grid-template-columns: 1fr 54px;
		height: 56px;
	}

	.hero-search input,
	.hero-search button {
		height: 56px;
	}

	.hero-search input {
		padding-left: 48px;
		font-size: 13px;
	}

	.hero-search > svg {
		left: 18px;
		width: 18px;
		height: 18px;
	}

	.category-strip {
		width: calc(100vw - 24px);
		padding: 18px 0;
	}

	.template-catalog,
	.workflow,
	.latest-posts,
	.site-footer {
		width: calc(100vw - 24px);
	}

	.template-section,
	.latest-posts {
		padding: 14px;
	}

	.template-row,
	.post-row,
	.archive-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.workflow {
		padding: 14px;
	}

	.workflow-card {
		grid-template-columns: 72px 1fr;
	}

	.workflow-icon {
		width: 62px;
		height: 62px;
	}

	.workflow-card > span {
		left: 50px;
	}

	.site-footer {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-inline: 4px;
	}
}