/* =========================================================================
   KeepSeal Neo — Hero (with pure-CSS induction-sealing visual)
   ========================================================================= */
.ksn-hero {
	position: relative;
	overflow: hidden;
	background: var(--ksn-bg);
	color: var(--ksn-ink);
	isolation: isolate;
}
.ksn-hero.ksn-dark { background: var(--ksn-primary-dark); }
.ksn-hero--bg { background-size: cover; background-position: center; }
.ksn-hero--bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(12,28,56,.92), rgba(12,28,56,.6));
	z-index: -1;
}

/* blueprint grid backdrop (softly animated) */
.ksn-hero__grid {
	position: absolute; inset: -40px;
	z-index: -1;
	background-image:
		linear-gradient(rgba(var(--ksn-primary-rgb), .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--ksn-primary-rgb), .07) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
}
.ksn-hero.ksn-dark .ksn-hero__grid,
html.ksn-dark .ksn-hero:not(.ksn-light) .ksn-hero__grid {
	background-image:
		linear-gradient(rgba(120,160,220,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120,160,220,.08) 1px, transparent 1px);
}
/* a soft aurora glow that drifts across the grid */
.ksn-hero__grid::after {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(40% 50% at 78% 18%, rgba(var(--ksn-heat-rgb), .14), transparent 70%),
		radial-gradient(45% 55% at 20% 80%, rgba(var(--ksn-primary-rgb), .16), transparent 70%);
}
/* grid style: pan (slow drift) */
.ksn-grid--pan .ksn-hero__grid { animation: ksn-grid-pan 28s ease-in-out infinite alternate; }
.ksn-grid--pan .ksn-hero__grid::after { animation: ksn-aurora-drift 16s ease-in-out infinite alternate; }

/* grid style: aurora (glow pulses, grid still) */
.ksn-grid--aurora .ksn-hero__grid::after { animation: ksn-aurora-pulse 9s ease-in-out infinite; }

/* grid style: flow (lines scroll diagonally) */
.ksn-grid--flow .ksn-hero__grid { animation: ksn-grid-flow 6s linear infinite; }

/* grid style: breathe (grid gently scales) */
.ksn-grid--breathe .ksn-hero__grid { animation: ksn-grid-breathe 10s ease-in-out infinite; }
.ksn-grid--breathe .ksn-hero__grid::after { animation: ksn-aurora-drift 16s ease-in-out infinite alternate; }

/* grid style: sweep (a light beam scans across) */
.ksn-grid--sweep .ksn-hero__grid::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(var(--ksn-heat-rgb), .12) 48%, rgba(255,255,255,.06) 50%, transparent 70%);
	background-size: 220% 100%;
	animation: ksn-grid-sweep 7s linear infinite;
}
.ksn-grid--sweep .ksn-hero__grid::after { animation: ksn-aurora-drift 18s ease-in-out infinite alternate; }

@keyframes ksn-grid-pan {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(20px, 16px, 0); }
}
@keyframes ksn-grid-flow {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 34px 34px, 34px 34px; }
}
@keyframes ksn-grid-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}
@keyframes ksn-grid-sweep {
	from { background-position: 120% 0; }
	to   { background-position: -120% 0; }
}
@keyframes ksn-aurora-pulse {
	0%, 100% { opacity: .5; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.1); }
}
@keyframes ksn-aurora-drift {
	0%   { opacity: .6; transform: translate3d(0, 0, 0) scale(1); }
	50%  { opacity: 1; }
	100% { opacity: .7; transform: translate3d(-16px, 10px, 0) scale(1.08); }
}

.ksn-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
	/* generous top space so a floating/overlay header never crowds content;
	   tunable per-widget via the "header space" control. */
	padding: var(--ksn-hero-top, clamp(90px, 9vw, 140px)) 24px clamp(40px, 6vw, 80px);
}
.ksn-hero--novisual .ksn-hero__inner { grid-template-columns: 1fr; max-width: 880px; text-align: center; }
.ksn-hero--novisual .ksn-kicker, .ksn-hero--novisual .ksn-hero__cta { justify-content: center; }

/* ---------- Content ---------- */
.ksn-hero__title {
	font-size: clamp(2.1rem, 1.2rem + 4vw, 4rem);
	margin: 0 0 1rem;
}
.ksn-hero__sub {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
	line-height: 2;
	color: var(--ksn-muted);
	max-width: 52ch;
	margin: 0 0 1.8rem;
}
.ksn-hero--novisual .ksn-hero__sub { margin-inline: auto; }
.ksn-hero.ksn-dark .ksn-hero__sub { color: #a9bcdc; }

.ksn-hero__search { margin: 0 0 1.8rem; }
.ksn-hero--novisual .ksn-hero__search { align-items: center; }
.ksn-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ksn-hero.ksn-dark .ksn-btn--outline { color: #eef3fb; border-color: rgba(255,255,255,.25); }
.ksn-hero.ksn-dark .ksn-btn--outline:hover { border-color: var(--ksn-heat); color: var(--ksn-heat); }

/* ---------- Stats ---------- */
.ksn-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 2.4rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--ksn-line);
}
.ksn-hero--novisual .ksn-hero__stats { justify-content: center; }
.ksn-stat__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-weight: 900;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
	color: var(--ksn-ink);
	line-height: 1;
}
.ksn-stat__suffix { color: var(--ksn-heat); }
.ksn-stat__label { margin-top: 6px; font-size: 0.86rem; color: var(--ksn-muted); }

/* ============================================================
   Induction visual — solid disc + selectable field waves + hot rim.
   Mirrors real induction sealing: the field collapses inward and heats
   the metallic foil at the rim. Disc style + wave style are selectable.
   ============================================================ */
.ksn-hero__visual { display: flex; align-items: center; justify-content: center; }
.ksn-induct {
	position: relative;
	width: clamp(250px, 33vw, 400px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

/* ---- The disc (solid, filled centre, very soft breathing) ---- */
.ksn-induct__disc {
	position: relative;
	width: 56%; aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	animation: ksn-breathe 6s ease-in-out infinite;
}
@keyframes ksn-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.018); }
}

/* rotating sheen layer */
.ksn-induct__brush {
	position: absolute; inset: 0;
	border-radius: 50%;
	mix-blend-mode: soft-light;
	animation: ksn-spin 12s linear infinite;
}
/* a soft moving highlight that keeps the centre alive (NOT a hole) */
.ksn-induct__sheen {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 46%);
	animation: ksn-sheen 7s ease-in-out infinite;
}
@keyframes ksn-sheen {
	0%, 100% { transform: translate(0, 0); opacity: .9; }
	50%      { transform: translate(6%, 5%); opacity: .65; }
}

/* Disc style: brushed aluminium (default) */
.ksn-induct--aluminum .ksn-induct__disc {
	background: radial-gradient(circle at 38% 30%, #ffffff 0%, #dde4ec 34%, #b7c2cf 66%, #93a0af 100%);
	box-shadow: inset 0 3px 9px rgba(255,255,255,.85), inset 0 -12px 24px rgba(0,0,0,.26), 0 26px 60px -22px rgba(0,0,0,.55);
}
.ksn-induct--aluminum .ksn-induct__brush {
	background: conic-gradient(from 0deg,
		rgba(255,255,255,0) 0deg, rgba(255,255,255,.5) 38deg, rgba(255,255,255,0) 86deg,
		rgba(0,0,0,.08) 150deg, rgba(255,255,255,0) 210deg, rgba(255,255,255,.42) 300deg, rgba(255,255,255,0) 360deg);
}

/* Disc style: polished steel (glossy) */
.ksn-induct--polished .ksn-induct__disc {
	background: radial-gradient(circle at 36% 26%, #ffffff 0%, #cfd9e6 28%, #9fb0c4 58%, #6d8095 84%, #c3d0df 100%);
	box-shadow: inset 0 4px 12px rgba(255,255,255,.9), inset 0 -14px 26px rgba(0,0,0,.34), 0 26px 60px -20px rgba(0,0,0,.6);
}
.ksn-induct--polished .ksn-induct__brush {
	background: conic-gradient(from 30deg,
		rgba(255,255,255,0) 0deg, rgba(255,255,255,.85) 30deg, rgba(255,255,255,0) 70deg,
		rgba(0,0,0,.18) 140deg, rgba(255,255,255,0) 200deg, rgba(255,255,255,.7) 290deg, rgba(255,255,255,0) 360deg);
	animation-duration: 8s;
}

/* Disc style: matte dark */
.ksn-induct--matte .ksn-induct__disc {
	background: radial-gradient(circle at 40% 34%, #2a3a55 0%, #1a2742 55%, #101c33 100%);
	box-shadow: inset 0 2px 6px rgba(255,255,255,.16), inset 0 -10px 24px rgba(0,0,0,.5), 0 26px 60px -22px rgba(0,0,0,.6);
}
.ksn-induct--matte .ksn-induct__brush { background: conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.12) 40deg, rgba(255,255,255,0) 90deg); }
.ksn-induct--matte .ksn-induct__sheen { background: radial-gradient(circle at 34% 28%, rgba(120,170,255,.45), rgba(120,170,255,0) 50%); }

/* Disc style: glass */
.ksn-induct--glass .ksn-induct__disc {
	background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.55), rgba(180,205,235,.25) 55%, rgba(120,150,190,.18) 100%);
	border: 1px solid rgba(255,255,255,.4);
	box-shadow: inset 0 2px 12px rgba(255,255,255,.6), inset 0 -8px 20px rgba(0,0,0,.16), 0 26px 60px -24px rgba(0,0,0,.5);
	backdrop-filter: blur(2px);
}
.ksn-induct--glass .ksn-induct__brush { background: conic-gradient(from 60deg, rgba(255,255,255,0), rgba(255,255,255,.5) 40deg, rgba(255,255,255,0) 100deg); }

/* ---- Hot rim — heated outer edge, glowing & pulsing ---- */
.ksn-induct__rim {
	position: absolute; inset: -1px;
	border-radius: 50%;
	border: 3px solid rgba(var(--ksn-heat-rgb), .85);
	box-shadow: 0 0 26px 5px rgba(var(--ksn-heat-rgb), .55), inset 0 0 16px 3px rgba(var(--ksn-heat-rgb), .5);
	animation: ksn-rimheat 2.4s ease-in-out infinite;
	z-index: 3;
}
.ksn-induct__heat {
	position: absolute;
	width: 66%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--ksn-heat-rgb), .45), rgba(var(--ksn-heat-rgb), 0) 70%);
	filter: blur(10px);
	z-index: -1;
	animation: ksn-rimheat 2.4s ease-in-out infinite;
}

/* ---- Field waves (shared element, behaviour set by wave-style) ---- */
.ksn-induct__waves { position: absolute; inset: 0; display: grid; place-items: center; }
.ksn-wave {
	position: absolute;
	width: 100%; aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgba(var(--ksn-heat-rgb), .55);
	opacity: 0;
}
.ksn-hero.ksn-dark .ksn-wave { border-color: rgba(var(--ksn-heat-rgb), .72); }

/* rotating field ring (for the "dual" style) + aurora (for "pulse") */
.ksn-induct__field, .ksn-induct__aurora { position: absolute; border-radius: 50%; opacity: 0; }
.ksn-induct__field {
	width: 84%; aspect-ratio: 1;
	border: 2px dashed rgba(var(--ksn-heat-rgb), .4);
}
.ksn-induct__aurora {
	width: 150%; aspect-ratio: 1;
	background:
		radial-gradient(circle at 50% 40%, rgba(var(--ksn-heat-rgb), .5), transparent 55%),
		conic-gradient(from 0deg, rgba(var(--ksn-heat-rgb), .35), rgba(var(--ksn-primary-rgb), .35), rgba(var(--ksn-heat-rgb), .35));
	filter: blur(26px);
	z-index: -1;
}

/* --- wave style: inward (default) --- */
.ksn-waves--inward .ksn-wave { animation: ksn-wave-in 3.2s linear infinite; }
.ksn-waves--inward .ksn-wave:nth-child(2) { animation-delay: .64s; }
.ksn-waves--inward .ksn-wave:nth-child(3) { animation-delay: 1.28s; }
.ksn-waves--inward .ksn-wave:nth-child(4) { animation-delay: 1.92s; }
.ksn-waves--inward .ksn-wave:nth-child(5) { animation-delay: 2.56s; }
@keyframes ksn-wave-in {
	0%   { transform: scale(1.7); opacity: 0; border-width: 1px; }
	18%  { opacity: .8; }
	75%  { opacity: .5; }
	100% { transform: scale(.66); opacity: 0; border-width: 3px; border-color: rgba(var(--ksn-heat-rgb), .9); }
}

/* --- wave style: inward-soft (slower, gentler) --- */
.ksn-waves--inward-soft .ksn-wave { border-width: 1.5px; animation: ksn-wave-soft 4.6s ease-in-out infinite; }
.ksn-waves--inward-soft .ksn-wave:nth-child(2) { animation-delay: .92s; }
.ksn-waves--inward-soft .ksn-wave:nth-child(3) { animation-delay: 1.84s; }
.ksn-waves--inward-soft .ksn-wave:nth-child(4) { animation-delay: 2.76s; }
.ksn-waves--inward-soft .ksn-wave:nth-child(5) { animation-delay: 3.68s; }
@keyframes ksn-wave-soft {
	0%   { transform: scale(1.6); opacity: 0; }
	25%  { opacity: .5; }
	100% { transform: scale(.66); opacity: 0; }
}

/* --- wave style: inward-dashed (dashed rings collapsing) --- */
.ksn-waves--inward-dashed .ksn-wave { border-style: dashed; border-width: 2px; animation: ksn-wave-in 3.6s linear infinite; }
.ksn-waves--inward-dashed .ksn-wave:nth-child(2) { animation-delay: .72s; }
.ksn-waves--inward-dashed .ksn-wave:nth-child(3) { animation-delay: 1.44s; }
.ksn-waves--inward-dashed .ksn-wave:nth-child(4) { animation-delay: 2.16s; }
.ksn-waves--inward-dashed .ksn-wave:nth-child(5) { animation-delay: 2.88s; }

/* --- wave style: inward-double (faster, denser stream) --- */
.ksn-waves--inward-double .ksn-wave { animation: ksn-wave-in 2.2s linear infinite; }
.ksn-waves--inward-double .ksn-wave:nth-child(2) { animation-delay: .44s; }
.ksn-waves--inward-double .ksn-wave:nth-child(3) { animation-delay: .88s; }
.ksn-waves--inward-double .ksn-wave:nth-child(4) { animation-delay: 1.32s; }
.ksn-waves--inward-double .ksn-wave:nth-child(5) { animation-delay: 1.76s; }

/* --- wave style: converge (collapse inward while rotating) --- */
.ksn-waves--converge .ksn-wave { animation: ksn-wave-converge 3.6s ease-in infinite; }
.ksn-waves--converge .ksn-wave:nth-child(2) { animation-delay: .72s; }
.ksn-waves--converge .ksn-wave:nth-child(3) { animation-delay: 1.44s; }
.ksn-waves--converge .ksn-wave:nth-child(4) { animation-delay: 2.16s; }
.ksn-waves--converge .ksn-wave:nth-child(5) { animation-delay: 2.88s; }
@keyframes ksn-wave-converge {
	0%   { transform: scale(1.7) rotate(0deg); opacity: 0; border-width: 1px; }
	20%  { opacity: .8; }
	100% { transform: scale(.62) rotate(90deg); opacity: 0; border-width: 3px; border-color: rgba(var(--ksn-heat-rgb), .9); }
}

/* --- wave style: outward (radar ripple) --- */
.ksn-waves--outward .ksn-wave { animation: ksn-wave-out 3.2s ease-out infinite; }
.ksn-waves--outward .ksn-wave:nth-child(2) { animation-delay: .64s; }
.ksn-waves--outward .ksn-wave:nth-child(3) { animation-delay: 1.28s; }
.ksn-waves--outward .ksn-wave:nth-child(4) { animation-delay: 1.92s; }
.ksn-waves--outward .ksn-wave:nth-child(5) { animation-delay: 2.56s; }
@keyframes ksn-wave-out {
	0%   { transform: scale(.62); opacity: 0; border-width: 3px; }
	18%  { opacity: .85; }
	100% { transform: scale(1.7); opacity: 0; border-width: 1px; }
}

/* --- wave style: pulse (gradient aurora glow) --- */
.ksn-waves--pulse .ksn-induct__waves { display: none; }
.ksn-waves--pulse .ksn-induct__aurora { animation: ksn-aurora 6s ease-in-out infinite; }
@keyframes ksn-aurora {
	0%, 100% { opacity: .45; transform: rotate(0deg) scale(1); }
	50%      { opacity: .9; transform: rotate(180deg) scale(1.12); }
}

/* --- wave style: dual (inward waves + rotating field) --- */
.ksn-waves--dual .ksn-wave { animation: ksn-wave-in 3.6s linear infinite; }
.ksn-waves--dual .ksn-wave:nth-child(2) { animation-delay: .9s; }
.ksn-waves--dual .ksn-wave:nth-child(3) { animation-delay: 1.8s; }
.ksn-waves--dual .ksn-wave:nth-child(4) { animation-delay: 2.7s; }
.ksn-waves--dual .ksn-wave:nth-child(5) { display: none; }
.ksn-waves--dual .ksn-induct__field { opacity: 1; animation: ksn-spin 14s linear infinite; }

/* --- wave style: none --- */
.ksn-waves--none .ksn-induct__waves,
.ksn-waves--none .ksn-induct__aurora,
.ksn-waves--none .ksn-induct__field { display: none; }

@keyframes ksn-spin { to { transform: rotate(360deg); } }
@keyframes ksn-rimheat {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ksn-wave, .ksn-induct__brush, .ksn-induct__sheen, .ksn-induct__rim,
	.ksn-induct__heat, .ksn-induct__disc, .ksn-induct__field, .ksn-induct__aurora,
	.ksn-hero__grid, .ksn-hero__grid::after { animation: none !important; }
	.ksn-waves--inward .ksn-wave:first-child,
	.ksn-waves--dual .ksn-wave:first-child { opacity: .5; transform: scale(.9); }
	.ksn-waves--pulse .ksn-induct__aurora { opacity: .6; }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.ksn-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.ksn-hero__kicker, .ksn-hero .ksn-kicker, .ksn-hero__cta, .ksn-hero__stats { justify-content: center; }
	.ksn-hero__sub { margin-inline: auto; }
	.ksn-hero__visual { order: -1; }
	.ksn-induct { width: clamp(200px, 60vw, 300px); }
}