/* =========================================================================
   KeepSeal Neo — Homepage sections (features, bulk CTA, category cards)
   ========================================================================= */

/* ---------- Feature strip ---------- */
.ksn-features {
	--ksn-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--ksn-cols), minmax(0, 1fr));
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 0;
}
.ksn-feature {
	background: var(--ksn-surface);
	border: 1px solid var(--ksn-line);
	border-radius: var(--ksn-radius);
	padding: 26px 22px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ksn-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--ksn-shadow);
	border-color: rgba(var(--ksn-heat-rgb), .4);
}
.ksn-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: rgba(var(--ksn-heat-rgb), .12);
	color: var(--ksn-heat);
	font-size: 24px;
}
.ksn-feature__icon svg { width: 26px; height: 26px; fill: currentColor; }
.ksn-feature__title { margin: 0 0 8px; font-size: 1.06rem; font-weight: 800; color: var(--ksn-ink); }
.ksn-feature__text { margin: 0; font-size: 0.92rem; line-height: 1.9; color: var(--ksn-muted); }

/* ---------- Bulk CTA band ---------- */
.ksn-bulkcta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 44px;
	border-radius: calc(var(--ksn-radius) + 6px);
	background: linear-gradient(120deg, var(--ksn-primary-dark), var(--ksn-primary));
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ksn-slant)), calc(100% - var(--ksn-slant)) 100%, 0 100%);
}
.ksn-bulkcta__glow {
	position: absolute;
	inset-inline-end: -60px; top: -60px;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--ksn-heat-rgb), .5), transparent 70%);
	pointer-events: none;
}
.ksn-bulkcta__text { position: relative; z-index: 1; max-width: 60ch; }
.ksn-bulkcta__title { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.ksn-bulkcta__sub { margin: 0; color: rgba(255,255,255,.82); line-height: 1.9; }
.ksn-bulkcta__btn { position: relative; z-index: 1; flex: none; }

/* ---------- Category cards (multi-style) ---------- */
.ksn-catgrid {
	--ksn-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--ksn-cols), minmax(0, 1fr));
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 0;
}
.ksn-catcard { text-decoration: none; color: var(--ksn-ink); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; }
.ksn-catcard__name { display: block; font-weight: 800; font-size: 1.05rem; }
.ksn-catcard__count { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--ksn-muted); }
.ksn-catcard__arrow { flex: none; display: inline-flex; color: var(--ksn-muted); transition: transform .2s ease, color .2s ease; }
[dir="ltr"] .ksn-catcard__arrow svg { transform: scaleX(-1); }

/* ===== classic (horizontal) ===== */
.ksn-catcard--classic { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--ksn-radius); background: var(--ksn-surface); border: 1px solid var(--ksn-line); }
.ksn-catcard--classic:hover { transform: translateY(-4px); box-shadow: var(--ksn-shadow); border-color: rgba(var(--ksn-primary-rgb), .35); }
.ksn-catcard--classic .ksn-catcard__media { flex: none; width: 76px; height: 76px; border-radius: 14px; background: var(--ksn-surface-2); display: grid; place-items: center; overflow: hidden; }
.ksn-catcard--classic .ksn-catcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ksn-catcard--classic .ksn-catcard__body { flex: 1; min-width: 0; }
.ksn-catcard--classic:hover .ksn-catcard__arrow { color: var(--ksn-heat); transform: translateX(-4px); }

/* ===== floating & minimal (soft shadow, borderless) ===== */
.ksn-catcard--floating { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; background: var(--ksn-surface); border: none; box-shadow: 0 12px 32px -18px rgba(13,27,52,.28); }
.ksn-catcard--floating:hover { transform: translateY(-6px); box-shadow: 0 28px 52px -22px rgba(13,27,52,.42); }
.ksn-catcard--floating .ksn-catcard__media { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--ksn-surface-2); display: grid; place-items: center; overflow: hidden; }
.ksn-catcard--floating .ksn-catcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ksn-catcard--floating .ksn-catcard__body { flex: 1; min-width: 0; }
.ksn-catcard--floating:hover .ksn-catcard__arrow { color: var(--ksn-primary); transform: translateX(-4px); }
.ksn-dark .ksn-catcard--floating { box-shadow: 0 16px 38px -20px rgba(0,0,0,.75); }
.ksn-dark .ksn-catcard--floating:hover { box-shadow: 0 30px 56px -22px rgba(0,0,0,.85); }

/* ===== immersive (full image background + dark gradient) ===== */
.ksn-catcard--immersive { position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 12px; min-height: 210px; padding: 22px; border-radius: 22px; overflow: hidden; color: #fff; }
.ksn-catcard--immersive .ksn-catcard__media { position: absolute; inset: 0; z-index: -2; display: block; background: linear-gradient(135deg, var(--ksn-primary), var(--ksn-accent)); }
.ksn-catcard--immersive .ksn-catcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.ksn-catcard--immersive::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,11,18,.88) 0%, rgba(7,11,18,.5) 45%, rgba(7,11,18,.06) 100%); }
.ksn-catcard--immersive:hover { transform: translateY(-5px); }
.ksn-catcard--immersive:hover .ksn-catcard__media img { transform: scale(1.07); }
.ksn-catcard--immersive .ksn-catcard__body { flex: 1; min-width: 0; }
.ksn-catcard--immersive .ksn-catcard__name { color: #fff; font-size: 1.3rem; }
.ksn-catcard--immersive .ksn-catcard__count { color: rgba(255,255,255,.82); }
.ksn-catcard--immersive .ksn-catcard__arrow { color: #fff; }
.ksn-catcard--immersive:hover .ksn-catcard__arrow { transform: translateX(-4px); }

/* ===== glassmorphism (image bg + frosted text panel) ===== */
.ksn-catcard--glass { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 210px; padding: 14px; border-radius: 24px; overflow: hidden; color: #fff; }
.ksn-catcard--glass .ksn-catcard__media { position: absolute; inset: 0; z-index: -2; display: block; background: linear-gradient(135deg, var(--ksn-primary), var(--ksn-accent)); }
.ksn-catcard--glass .ksn-catcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.ksn-catcard--glass::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,12,20,.18); }
.ksn-catcard--glass:hover { transform: translateY(-5px); }
.ksn-catcard--glass:hover .ksn-catcard__media img { transform: scale(1.06); }
.ksn-catcard--glass .ksn-catcard__body {
	flex: 1; min-width: 0;
	background: rgba(255,255,255,.14);
	-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 16px; padding: 14px 16px;
	box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
}
.ksn-catcard--glass .ksn-catcard__name { color: #fff; font-size: 1.12rem; }
.ksn-catcard--glass .ksn-catcard__count { color: rgba(255,255,255,.85); }
.ksn-catcard--glass .ksn-catcard__arrow {
	position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1;
	width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
	background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.25);
}
.ksn-catcard--glass:hover .ksn-catcard__arrow { background: rgba(255,255,255,.3); }

/* ===== stamp (cut-corner brand) ===== */
.ksn-catcard--stamp { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--ksn-surface); color: var(--ksn-ink); box-shadow: inset 0 3px 0 var(--ksn-heat); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.ksn-catcard--stamp:hover { transform: translateY(-4px); }
.ksn-catcard--stamp .ksn-catcard__media { flex: none; width: 72px; height: 72px; background: var(--ksn-surface-2); display: grid; place-items: center; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.ksn-catcard--stamp .ksn-catcard__media img { width: 100%; height: 100%; object-fit: cover; }
.ksn-catcard--stamp .ksn-catcard__body { flex: 1; min-width: 0; }
.ksn-catcard--stamp:hover .ksn-catcard__arrow { color: var(--ksn-heat); transform: translateX(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.ksn-features { --ksn-cols: 2 !important; }
	.ksn-catgrid { --ksn-cols: 2 !important; }
}
@media (max-width: 600px) {
	.ksn-features, .ksn-catgrid { --ksn-cols: 1 !important; }
	.ksn-bulkcta { padding: 30px 24px; flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Steps / process ("how it works in N steps")
   ========================================================================= */
.ksn-steps { font-family: var(--ksn-font); max-width: 1280px; margin: 0 auto; }
.ksn-steps__head { margin-bottom: 32px; }
.ksn-steps--align-start .ksn-steps__head { text-align: start; }
.ksn-steps--align-center .ksn-steps__head { text-align: center; }
.ksn-steps--align-end .ksn-steps__head { text-align: end; }
.ksn-steps__eyebrow { display: block; font-weight: 800; font-size: 0.92rem; color: var(--ksn-accent); margin-bottom: 10px; }
.ksn-steps__title { margin: 0; font-weight: 900; font-size: 2rem; color: var(--ksn-ink); line-height: 1.3; }

.ksn-steps__grid {
	--ksn-cols: 3;
	display: grid; grid-template-columns: repeat(var(--ksn-cols), minmax(0, 1fr)); gap: 18px;
}
.ksn-step {
	padding: 26px 28px; border-radius: 18px;
	background: var(--ksn-surface); border: 1px solid var(--ksn-line);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ksn-step:hover { transform: translateY(-4px); box-shadow: var(--ksn-shadow); border-color: rgba(var(--ksn-accent-rgb), .4); }
.ksn-step__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ksn-step__num { flex: none; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--ksn-ink) 14%, transparent); letter-spacing: -1px; }
.ksn-step__title { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--ksn-ink); }
.ksn-step__desc { margin: 0; color: var(--ksn-muted); line-height: 2; font-size: 0.95rem; }

/* card styles */
.ksn-steps--stamp .ksn-step { border: none; box-shadow: inset 0 3px 0 var(--ksn-heat); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.ksn-steps--stamp .ksn-step:hover { transform: translateY(-4px); box-shadow: inset 0 3px 0 var(--ksn-heat); }
.ksn-steps--glass .ksn-step { background: color-mix(in srgb, var(--ksn-surface) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: color-mix(in srgb, var(--ksn-ink) 10%, transparent); }

@media (max-width: 1024px) { .ksn-steps__grid { --ksn-cols: 2 !important; } }
@media (max-width: 600px)  { .ksn-steps__grid { --ksn-cols: 1 !important; } .ksn-steps__title { font-size: 1.5rem; } }