/* ==========================================================================
   kmmisIT - Landing Page — main stylesheet
   Brand: Kmmis Blue #0288DD · Deep Slate #424759 · Spark Lime #C9E200 · White
   Typeface: Sora (self-hosted, SIL OFL)
   ========================================================================== */

@font-face {
	font-family: "Sora";
	src: url("../fonts/sora-variable-latin.woff") format("woff");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--km-blue: #0288dd;
	--km-slate: #424759;
	--km-lime: #c9e200;
	--km-white: #ffffff;

	/* Tints and shades derived from Deep Slate for dark surfaces. */
	--km-ink: #1b1e27;
	--km-ink-2: #222632;
	--km-ink-3: #2b303e;
	--km-text: #eceef3;
	--km-muted: #a7acbb;
	--km-line: rgba(255, 255, 255, 0.09);
	--km-paper: #f5f6f9;

	--km-font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--km-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--km-ease-io: cubic-bezier(0.7, 0, 0.2, 1);

	/* The tile shape from the mark: rounded top-left + bottom-right. */
	--km-shape: 26px 6px 26px 6px;
	--km-shape-sm: 16px 4px 16px 4px;

	--km-header-h: 84px;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--km-ink);
	color: var(--km-text);
	font-family: var(--km-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--km-lime); color: var(--km-ink); }

:focus-visible {
	outline: 2px solid var(--km-lime);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	left: 16px; top: 16px; z-index: 100001;
	padding: 12px 18px;
	background: var(--km-lime); color: var(--km-ink);
	border-radius: var(--km-shape-sm);
	font-weight: 700;
}

.km-container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}
.km-container--narrow { max-width: 820px; }

/* ==========================================================================
   Logo
   ========================================================================== */
.kmmis-logo { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
.kmmis-logo .kmmis-mark { width: 46px; height: 46px; flex: none; overflow: visible; }
.kmmis-logo__text { display: flex; flex-direction: column; gap: 6px; }
.kmmis-logo__name { font-size: 24px; letter-spacing: -0.02em; white-space: nowrap; }
.kmmis-logo__name .kn-a { font-weight: 600; }
.kmmis-logo__name .kn-b { font-weight: 800; }
.kmmis-tagline { font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }
.kmmis-tagline b { font-weight: 700; }
.kmmis-tagline .kt-sep { display: inline-block; width: 0.95em; height: 0.3em; margin: 0 0.75em; border-radius: 1em; background: currentColor; vertical-align: 0.22em; }

/* Dark-background colourway (default). */
.kmmis-logo .kn-a { color: var(--km-white); }
.kmmis-logo .kn-b { color: var(--km-lime); }
.kmmis-tagline { color: var(--km-white); }
.kmmis-tagline b { color: var(--km-lime); }
.kmmis-tagline .kt-sep { color: var(--km-blue); }
/* Light-background colourway. */
.kmmis-logo--light .kn-a { color: var(--km-blue); }
.kmmis-logo--light .kn-b { color: var(--km-slate); }
.kmmis-logo--light .kmmis-tagline { color: var(--km-slate); }
.kmmis-logo--light .kmmis-tagline b { color: var(--km-blue); }
.kmmis-logo--light .kt-sep { color: var(--km-lime); }

.kmmis-logo--stacked { flex-direction: column; text-align: center; gap: 18px; }
.kmmis-logo--stacked .kmmis-logo__text { align-items: center; }

.kmmis-mark .km-cursor { animation: km-blink 1.1s steps(1) infinite; }
.kmmis-mark .km-stem, .kmmis-mark .km-cursor { transform-box: fill-box; }

.kmmis-custom-logo img { display: block; max-height: 52px; width: auto; }

/* ==========================================================================
   Loader (first visit)
   ========================================================================== */
.km-loader { display: none; }
html.km-firstvisit .km-loader {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100000;
	--p: 0;
	animation: km-failsafe 0.01s linear 12s forwards; /* never trap a visitor if JS fails */
}
html.km-loading { overflow: hidden; }

.km-loader__curtain {
	position: absolute;
	left: 0; right: 0;
	height: 50.5%;
	background: var(--km-ink);
	z-index: 0;
	transition: transform 1s var(--km-ease-io) 0.3s;
}
.km-loader__curtain--top { top: 0; border-bottom: 1px solid transparent; }
.km-loader__curtain--bottom { bottom: 0; }
.km-loader__curtain::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--km-blue), var(--km-lime));
	transform: translateX(-50%);
	transition: width 0.45s var(--km-ease);
}
.km-loader__curtain--top::after { bottom: -1px; }
.km-loader__curtain--bottom::after { top: -1px; }

.km-loader__grid {
	position: absolute; inset: 0; z-index: 1;
	background-image:
		linear-gradient(var(--km-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--km-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 65%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 65%);
	opacity: 0.6;
	transition: opacity 0.4s;
}

.km-loader__inner {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 18px;
	transition: opacity 0.5s var(--km-ease), transform 0.7s var(--km-ease);
}
.km-loader__mark { width: clamp(110px, 18vw, 150px); }
.km-loader__mark .kmmis-mark { width: 100%; height: auto; overflow: visible; }

/* The mark draws itself as --p goes from 0 to 1. */
.km-loader .km-arc {
	stroke-dasharray: 100px;
	stroke-dashoffset: calc(100px - clamp(0px, var(--p) * 400px, 100px));
}
.km-loader .km-tile {
	stroke-dasharray: 100px;
	stroke-dashoffset: calc(100px - var(--p) * 100px);
	fill-opacity: calc(var(--p) * 1.4);
}
.km-loader .km-stem {
	transform-origin: 50% 100%;
	transform: scaleY(clamp(0, (var(--p) - 0.25) * 4, 1));
}
.km-loader .km-chevron {
	stroke-dasharray: 100px;
	stroke-dashoffset: calc(100px - clamp(0px, (var(--p) - 0.5) * 400px, 100px));
	opacity: clamp(0, (var(--p) - 0.5) * 60, 1);
}
.km-loader .km-cursor {
	transform-origin: 0 50%;
	transform: scaleX(clamp(0, (var(--p) - 0.75) * 4, 1));
	animation: none;
}
.km-loader.is-complete .km-cursor { animation: km-blink 0.5s steps(1) infinite; }

.km-loader__count {
	font-size: clamp(56px, 9vw, 96px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--km-white);
	display: flex; align-items: flex-start;
}
.km-loader__pct { font-size: 0.38em; color: var(--km-lime); margin: 0.18em 0 0 0.08em; }

.km-loader__bar {
	width: min(280px, 60vw);
	height: 3px;
	border-radius: 3px;
	background: var(--km-line);
	overflow: hidden;
}
.km-loader__bar span {
	display: block; height: 100%;
	width: calc(var(--p) * 100%);
	background: linear-gradient(90deg, var(--km-blue), var(--km-lime));
	box-shadow: 0 0 14px rgba(201, 226, 0, 0.6);
}

.km-loader__words {
	display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
	font-size: 13px; letter-spacing: 0.04em;
	color: var(--km-white);
}
.km-loader__words span {
	opacity: 0.18;
	transform: translateY(6px);
	transition: opacity 0.4s, transform 0.4s var(--km-ease);
}
.km-loader__words span b { color: var(--km-lime); }
.km-loader__words span.is-on { opacity: 1; transform: none; }
.km-loader__words span + span::before { content: ""; display: inline-block; width: 12px; height: 4px; border-radius: 4px; background: var(--km-blue); margin-right: 10px; vertical-align: 3px; }

/* Exit */
.km-loader.is-done .km-loader__inner { opacity: 0; transform: scale(1.08) translateY(-12px); }
.km-loader.is-done .km-loader__grid { opacity: 0; }
.km-loader.is-done .km-loader__curtain::after { width: 100%; }
.km-loader.is-done .km-loader__curtain--top { transform: translateY(-101%); }
.km-loader.is-done .km-loader__curtain--bottom { transform: translateY(101%); }

/* Returning visitors: quick fade-in instead. */
html.km-returning body { animation: km-page-in 0.7s var(--km-ease) both; }

@keyframes km-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes km-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ==========================================================================
   Intro + scroll reveal
   ========================================================================== */
html.js .km-intro {
	opacity: 0;
	transform: translateY(28px);
}
html.km-loaded .km-intro {
	opacity: 1;
	transform: none;
	transition: opacity 1s var(--km-ease), transform 1s var(--km-ease);
	transition-delay: calc(var(--d, 0) * 120ms + 250ms);
}
html.km-returning.km-loaded .km-intro { transition-delay: calc(var(--d, 0) * 90ms + 50ms); }

html.js .km-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.9s var(--km-ease), transform 0.9s var(--km-ease);
	transition-delay: calc(var(--d, 0) * 100ms);
}
html.js .km-reveal.is-in { opacity: 1; transform: none; }

.km-split .km-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.km-split .km-w > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 0.9s var(--km-ease);
	transition-delay: calc(var(--i, 0) * 45ms);
}
.km-split.is-in .km-w > span { transform: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.km-btn {
	--bg: transparent;
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 28px;
	border: 1.5px solid transparent;
	border-radius: var(--km-shape-sm);
	background: var(--bg);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.35s var(--km-ease), box-shadow 0.35s, background-color 0.3s, color 0.3s, border-color 0.3s;
	will-change: transform;
}
.km-btn .km-icon { width: 18px; height: 18px; transition: transform 0.35s var(--km-ease); }
.km-btn:hover .km-icon { transform: translateX(4px); }
.km-btn::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--km-ease);
	z-index: -1;
}
.km-btn:hover::before { transform: translateX(120%); }

.km-btn--lime { --bg: var(--km-lime); color: var(--km-ink); }
.km-btn--lime:hover { box-shadow: 0 10px 34px -8px rgba(201, 226, 0, 0.55); }
.km-btn--ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--km-white); }
.km-btn--ghost:hover { border-color: var(--km-blue); background: rgba(2, 136, 221, 0.12); }
.km-btn--sm { padding: 10px 18px; font-size: 14px; }
.km-btn--block { width: 100%; }

/* ==========================================================================
   Header (sticky) + scroll progress bar
   ========================================================================== */
.km-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	transition: background-color 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
body.admin-bar .km-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .km-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .km-header { top: 0; } }

.km-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--km-header-h);
	transition: height 0.4s var(--km-ease);
}
.km-header.is-scrolled,
body.km-inner .km-header {
	background: rgba(27, 30, 39, 0.82);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 var(--km-line), 0 12px 30px -18px rgba(0, 0, 0, 0.6);
}
.km-header.is-scrolled .km-header__inner { height: 68px; }

.km-brand { display: inline-flex; position: relative; z-index: 2; }
.km-brand .kmmis-mark { width: 42px; height: 42px; transition: transform 0.5s var(--km-ease); }
.km-brand:hover .kmmis-mark { transform: rotate(-8deg) scale(1.05); }
.km-header.is-scrolled .km-brand .kmmis-mark { width: 36px; height: 36px; }
.km-header .kmmis-logo__name { font-size: 22px; transition: font-size 0.4s; }
.km-header.is-scrolled .kmmis-logo__name { font-size: 20px; }

.km-progress {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	pointer-events: none;
}
.km-progress__bar {
	display: block;
	height: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--km-blue), var(--km-lime));
	box-shadow: 0 0 12px rgba(201, 226, 0, 0.55);
	border-radius: 0 3px 3px 0;
}

.km-nav { display: flex; align-items: center; gap: 30px; }
.km-menu, .km-menu ul { list-style: none; margin: 0; padding: 0; }
.km-menu { display: flex; align-items: center; gap: 6px; }
.km-menu > li { position: relative; }
.km-menu a {
	position: relative;
	display: block;
	padding: 8px 14px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	transition: color 0.25s;
}
.km-menu > li > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px;
	background: var(--km-lime);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.4s var(--km-ease);
}
.km-menu a:hover,
.km-menu .current-menu-item > a,
.km-menu a.is-active { color: var(--km-white); }
.km-menu > li > a:hover::after,
.km-menu > li > a.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Dropdowns */
.km-menu .sub-menu {
	position: absolute; top: 100%; left: 0;
	min-width: 220px;
	padding: 10px;
	background: var(--km-ink-2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-shape-sm);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.25s, transform 0.25s var(--km-ease), visibility 0.25s;
}
.km-menu li:hover > .sub-menu,
.km-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.km-menu .sub-menu a { padding: 9px 12px; border-radius: 8px; }
.km-menu .sub-menu a:hover { background: rgba(255, 255, 255, 0.06); }

.km-burger {
	display: none;
	position: relative; z-index: 2;
	width: 46px; height: 46px;
	border: 1px solid var(--km-line);
	border-radius: 14px 4px 14px 4px;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
}
.km-burger__lines { position: absolute; inset: 0; }
.km-burger__lines i {
	position: absolute; left: 12px; right: 12px;
	height: 2px; border-radius: 2px;
	background: var(--km-white);
	transition: transform 0.4s var(--km-ease), opacity 0.3s, right 0.3s;
}
.km-burger__lines i:nth-child(1) { top: 15px; }
.km-burger__lines i:nth-child(2) { top: 22px; right: 18px; background: var(--km-lime); }
.km-burger__lines i:nth-child(3) { top: 29px; }
html.km-nav-open .km-burger__lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.km-nav-open .km-burger__lines i:nth-child(2) { opacity: 0; }
html.km-nav-open .km-burger__lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
	.km-burger { display: block; }
	.km-header .kmmis-tagline { display: none; }
	.km-nav {
		position: fixed; inset: 0;
		flex-direction: column; justify-content: center; align-items: flex-start;
		gap: 28px;
		padding: 100px clamp(24px, 8vw, 60px) 40px;
		background: var(--km-ink);
		background-image: radial-gradient(circle at 85% 10%, rgba(2, 136, 221, 0.25), transparent 45%), radial-gradient(circle at 10% 90%, rgba(201, 226, 0, 0.12), transparent 40%);
		clip-path: circle(0% at calc(100% - 46px) 42px);
		transition: clip-path 0.7s var(--km-ease-io);
		visibility: hidden;
	}
	html.km-nav-open .km-nav { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; }
	html.km-nav-open { overflow: hidden; }
	.km-menu { flex-direction: column; align-items: flex-start; gap: 4px; }
	.km-menu > li { opacity: 0; transform: translateY(20px); transition: opacity 0.5s, transform 0.5s var(--km-ease); }
	html.km-nav-open .km-menu > li { opacity: 1; transform: none; }
	html.km-nav-open .km-menu > li:nth-child(1) { transition-delay: 0.15s; }
	html.km-nav-open .km-menu > li:nth-child(2) { transition-delay: 0.2s; }
	html.km-nav-open .km-menu > li:nth-child(3) { transition-delay: 0.25s; }
	html.km-nav-open .km-menu > li:nth-child(4) { transition-delay: 0.3s; }
	html.km-nav-open .km-menu > li:nth-child(5) { transition-delay: 0.35s; }
	html.km-nav-open .km-menu > li:nth-child(n+6) { transition-delay: 0.4s; }
	.km-menu a { font-size: clamp(30px, 8vw, 44px); font-weight: 700; padding: 6px 0; letter-spacing: -0.03em; }
	.km-menu > li > a::after { left: 0; right: auto; width: 40px; bottom: 6px; }
	.km-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0 0 0 16px; }
	.km-menu .sub-menu a { font-size: 18px; font-weight: 500; }
	.km-nav__cta { margin-top: 10px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.km-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex; align-items: center;
	padding: calc(var(--km-header-h) + 40px) 0 110px;
	overflow: hidden;
	isolation: isolate;
}
.km-hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background-image:
		linear-gradient(var(--km-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--km-line) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
	opacity: 0.55;
}
.km-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.km-hero__glow {
	position: absolute; z-index: -1;
	width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.38;
	pointer-events: none;
}
.km-hero__glow--blue { background: var(--km-blue); top: -18%; right: -8%; animation: km-drift 18s ease-in-out infinite alternate; }
.km-hero__glow--lime { background: var(--km-lime); bottom: -38%; left: -18%; opacity: 0.08; animation: km-drift 22s ease-in-out infinite alternate-reverse; }
@keyframes km-drift {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-8vw, 6vh) scale(1.15); }
}

.km-hero__grid {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	align-items: center;
	gap: clamp(30px, 5vw, 70px);
}

.km-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px 8px 12px;
	margin-bottom: 26px;
	border: 1px solid var(--km-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--km-muted);
}
.km-pulse {
	position: relative;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--km-lime);
}
.km-pulse::after {
	content: "";
	position: absolute; inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--km-lime);
	animation: km-ping 1.8s var(--km-ease) infinite;
}
@keyframes km-ping { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

.km-hero__title {
	font-size: clamp(46px, 6.6vw, 96px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.045em;
	margin-bottom: 28px;
}
.km-hero__lead { display: block; font-weight: 300; color: var(--km-muted); letter-spacing: -0.03em; }
.km-rotator { display: inline-flex; align-items: baseline; white-space: nowrap; min-height: 1em; }
.km-rotator__word { color: var(--km-white); }
.km-rotator b {
	font-weight: 800;
	color: var(--km-lime);
	text-shadow: 0 0 40px rgba(201, 226, 0, 0.35);
}
.km-caret {
	display: inline-block;
	width: 0.48em; height: 0.11em;
	margin-left: 0.08em;
	background: var(--km-lime);
	border-radius: 2px;
	animation: km-blink 1s steps(1) infinite;
	transform: translateY(0.02em);
}

.km-hero__sub {
	max-width: 560px;
	font-size: clamp(16px, 1.35vw, 19px);
	color: var(--km-muted);
	margin-bottom: 38px;
}
.km-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero art */
.km-hero__art { position: relative; }
.km-hero__stage {
	position: relative;
	width: min(100%, 540px);
	aspect-ratio: 1;
	margin-inline: auto;
	transform-style: preserve-3d;
	will-change: transform;
}
.km-ring {
	position: absolute;
	inset: 0;
	margin: auto;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	animation: km-spin 40s linear infinite;
}
.km-ring--1 { width: 100%; height: 100%; }
.km-ring--2 { width: 76%; height: 76%; border-style: solid; border-color: rgba(2, 136, 221, 0.22); animation-duration: 28s; animation-direction: reverse; }
.km-ring--3 { width: 54%; height: 54%; border-color: rgba(201, 226, 0, 0.18); animation-duration: 20s; }
.km-ring--2::before,
.km-ring--3::before {
	content: "";
	position: absolute;
	top: -5px; left: 50%;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--km-blue);
	box-shadow: 0 0 16px var(--km-blue);
}
.km-ring--3::before { background: var(--km-lime); box-shadow: 0 0 16px var(--km-lime); top: auto; bottom: -5px; }
@keyframes km-spin { to { transform: rotate(360deg); } }

.km-hero__mark {
	position: absolute;
	inset: 0; margin: auto;
	width: 52%; height: 52%;
	animation: km-float 6s ease-in-out infinite;
}
.km-hero-mark { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 50px rgba(2, 136, 221, 0.35)); }
.km-hero-mark .km-arc { stroke-dasharray: 100px; stroke-dashoffset: 100px; }
html.km-loaded .km-hero-mark .km-arc { animation: km-draw 1.4s var(--km-ease) 0.5s forwards, km-glow 3s ease-in-out 2s infinite; }
html.km-loaded .km-hero-mark .km-arc--br { animation-delay: 0.75s, 2.4s; }
.km-hero-mark .km-chevron, .km-proc-mark .km-chevron { transform-box: fill-box; transform-origin: 50% 50%; }
html.km-loaded .km-hero-mark .km-chevron { animation: km-chev 5s var(--km-ease) 2.5s infinite; }
@keyframes km-draw { to { stroke-dashoffset: 0; } }
@keyframes km-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(201, 226, 0, 0.9)); } }
@keyframes km-chev { 0%, 72%, 100% { transform: none; } 80% { transform: translateX(-9%); } 88% { transform: translateX(3%); } 94% { transform: translateX(-1%); } }
@keyframes km-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }

.km-chip {
	position: absolute;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px;
	font-size: 13px; font-weight: 500;
	color: var(--km-white);
	background: rgba(34, 38, 50, 0.72);
	border: 1px solid var(--km-line);
	border-radius: 14px 4px 14px 4px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
	will-change: transform;
}
.km-chip b { color: var(--km-lime); font-weight: 700; }
.km-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--km-lime); }
.km-chip--1 { top: 8%; left: 2%; }
.km-chip--2 { top: 20%; right: -2%; }
.km-chip--2 i, .km-chip--3 i { background: var(--km-blue); }
.km-chip--3 { bottom: 26%; right: -4%; }
.km-chip--4 { bottom: 4%; right: 18%; }
.km-chip > * { pointer-events: none; }
.km-chip { animation: km-bob 5s ease-in-out infinite; }
.km-chip--2 { animation-delay: -1.2s; }
.km-chip--3 { animation-delay: -2.4s; }
.km-chip--4 { animation-delay: -3.6s; }
@keyframes km-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.km-term {
	position: absolute;
	left: 0; bottom: -7%;
	width: 250px;
	background: rgba(22, 25, 33, 0.9);
	border: 1px solid var(--km-line);
	border-radius: 16px 4px 16px 4px;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.km-term__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--km-line); }
.km-term__bar i { width: 9px; height: 9px; border-radius: 50%; background: #5b6073; }
.km-term__bar i:nth-child(1) { background: var(--km-blue); }
.km-term__bar i:nth-child(2) { background: var(--km-lime); }
.km-term__bar span { margin-left: auto; font-size: 10.5px; color: var(--km-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.km-term__body {
	margin: 0;
	padding: 12px 14px 14px;
	height: 128px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.75;
	color: #d6d9e2;
	white-space: pre-wrap;
	overflow: hidden;
}
.km-term__body .t-ok { color: var(--km-lime); }
.km-term__body .t-cmd { color: var(--km-blue); }
.km-term__cursor { display: inline-block; width: 7px; height: 2px; background: var(--km-lime); animation: km-blink 0.9s steps(1) infinite; vertical-align: baseline; }

.km-scroll-cue {
	position: absolute;
	left: 50%; bottom: 28px;
	width: 26px; height: 42px;
	margin-left: -13px;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: 14px;
}
.km-scroll-cue span {
	position: absolute;
	left: 50%; top: 8px;
	width: 4px; height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--km-lime);
	animation: km-cue 1.8s var(--km-ease) infinite;
}
@keyframes km-cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ==========================================================================
   Marquee band
   ========================================================================== */
.km-marquee {
	position: relative;
	z-index: 2;
	background: var(--km-lime);
	color: var(--km-ink);
	padding: 18px 0;
	transform: rotate(-2deg) scale(1.04);
	margin: -30px 0 0;
	overflow: hidden;
	box-shadow: 0 20px 50px -20px rgba(201, 226, 0, 0.45);
}
.km-marquee__track { display: flex; width: max-content; animation: km-marquee 38s linear infinite; }
.km-marquee:hover .km-marquee__track { animation-play-state: paused; }
.km-marquee__group { display: flex; align-items: center; flex: none; }
.km-marquee__item {
	font-size: clamp(30px, 4.6vw, 58px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.1;
	padding: 0 0.35em;
	white-space: nowrap;
}
.km-marquee__item b { color: transparent; -webkit-text-stroke: 1.5px var(--km-ink); }
.km-marquee__item:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--km-ink); }
.km-marquee__item:nth-of-type(even) b { color: var(--km-ink); -webkit-text-stroke: 0; }
.km-marquee__sep { font-size: clamp(30px, 4.6vw, 58px); font-weight: 800; color: var(--km-blue); line-height: 1; }
@keyframes km-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Sections
   ========================================================================== */
.km-section { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
.km-section__head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 80px); }
.km-section__head--center { margin-inline: auto; text-align: center; }

.km-kicker {
	display: inline-flex; align-items: center; gap: 12px;
	margin-bottom: 20px;
	font-size: 13px; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--km-lime);
}
.km-kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.km-section__head--center .km-kicker::after { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }

.km-h1 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.km-h2 { font-size: clamp(32px, 4.3vw, 58px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; }
.km-h2--xl { font-size: clamp(38px, 5.6vw, 76px); font-weight: 800; }
.km-lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--km-muted); }

/* About */
.km-about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.km-about__side { padding-top: 46px; }
.km-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 30px; margin-top: 44px; }
.km-stat { position: relative; padding-top: 20px; }
.km-stat::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0;
	height: 1px; background: var(--km-line);
}
.km-stat::after {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 46px; height: 2px;
	background: var(--km-lime);
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform 1s var(--km-ease) 0.3s;
}
.km-stat.is-in::after { transform: none; }
.km-stat__num { display: block; font-size: clamp(42px, 4.6vw, 62px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--km-white); font-variant-numeric: tabular-nums; }
.km-stat__num em { font-style: normal; color: var(--km-lime); }
.km-stat__label { display: block; margin-top: 10px; font-size: 14.5px; color: var(--km-muted); }

/* Process */
.km-process { background: var(--km-ink-2); overflow: clip; }
.km-process::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 15% 30%, rgba(2, 136, 221, 0.16), transparent 40%);
	pointer-events: none;
}
.km-process__grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 110px); }
.km-process__sticky { position: sticky; top: 130px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.km-process__mark { width: min(100%, 380px); aspect-ratio: 1; }
.km-proc-mark { width: 100%; height: 100%; overflow: visible; }
.km-proc-mark > * { transition: opacity 0.6s var(--km-ease), filter 0.6s, transform 0.6s var(--km-ease); }
.km-proc-mark .km-tile { opacity: 0.55; }
.km-proc-mark .km-arcs,
.km-proc-mark .km-stem,
.km-proc-mark .km-chevron,
.km-proc-mark .km-cursor { opacity: 0.16; }
.km-process[data-active="1"] .km-proc-mark .km-arcs { opacity: 1; filter: drop-shadow(0 0 14px rgba(201, 226, 0, 0.8)); }
.km-process[data-active="2"] .km-proc-mark .km-stem { opacity: 1; filter: drop-shadow(0 0 14px rgba(2, 136, 221, 0.9)); }
.km-process[data-active="3"] .km-proc-mark .km-chevron { opacity: 1; filter: drop-shadow(0 0 14px rgba(2, 136, 221, 0.9)); }
.km-process[data-active="4"] .km-proc-mark .km-cursor { opacity: 1; filter: drop-shadow(0 0 14px rgba(201, 226, 0, 0.9)); }
.km-process[data-active="4"] .km-proc-mark .km-arcs,
.km-process[data-active="4"] .km-proc-mark .km-stem,
.km-process[data-active="4"] .km-proc-mark .km-chevron { opacity: 0.55; }
.km-process[data-active="4"] .km-proc-mark .km-tile { opacity: 1; }
.km-process[data-active="3"] .km-proc-mark .km-chevron { animation: km-chev 2.4s var(--km-ease) infinite; }

.km-process__label { position: relative; height: 40px; width: 100%; text-align: center; }
.km-process__label span {
	position: absolute; inset: 0;
	font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.5s, transform 0.5s var(--km-ease);
}
.km-process__label b { color: var(--km-lime); font-weight: 800; }
.km-process[data-active="1"] .km-process__label [data-step="1"],
.km-process[data-active="2"] .km-process__label [data-step="2"],
.km-process[data-active="3"] .km-process__label [data-step="3"],
.km-process[data-active="4"] .km-process__label [data-step="4"] { opacity: 1; transform: none; }

.km-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 42px; --pp: 0; }
.km-steps::before,
.km-steps::after {
	content: "";
	position: absolute;
	left: 0; top: 8px; bottom: 8px;
	width: 2px;
	border-radius: 2px;
	background: var(--km-line);
}
.km-steps::after {
	background: linear-gradient(var(--km-blue), var(--km-lime));
	transform-origin: 50% 0;
	transform: scaleY(var(--pp));
	box-shadow: 0 0 12px rgba(201, 226, 0, 0.5);
}
.km-step {
	position: relative;
	min-height: 48vh;
	padding: 6px 0 70px;
	opacity: 0.32;
	transition: opacity 0.6s var(--km-ease);
}
.km-step:last-child { min-height: 0; padding-bottom: 0; }
.km-step.is-active { opacity: 1; }
.km-step::before {
	content: "";
	position: absolute;
	left: -49px; top: 14px;
	width: 16px; height: 16px;
	border-radius: 5px 1px 5px 1px;
	background: var(--km-ink-2);
	border: 2px solid rgba(255, 255, 255, 0.25);
	transition: background 0.4s, border-color 0.4s, transform 0.4s var(--km-ease);
}
.km-step.is-active::before { background: var(--km-lime); border-color: var(--km-lime); transform: rotate(45deg) scale(1.1); }
.km-step__num { display: block; font-size: 14px; font-weight: 600; color: var(--km-blue); letter-spacing: 0.1em; margin-bottom: 10px; }
.km-step__title { font-size: clamp(36px, 4.6vw, 62px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-bottom: 14px; }
.km-step__title b { color: var(--km-lime); font-weight: 800; }
.km-step__meaning { font-size: 17px; font-weight: 600; color: var(--km-white); margin-bottom: 10px; }
.km-step__text { max-width: 520px; color: var(--km-muted); }

/* Services — light section (uses the light logo colourway) */
.km-services { background: var(--km-paper); color: var(--km-slate); }
.km-services .km-kicker { color: var(--km-blue); }
.km-services .km-h2 { color: var(--km-slate); }
.km-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; }
.km-card {
	--mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
	position: relative;
	padding: 38px 34px 40px;
	background: var(--km-white);
	border: 1px solid rgba(66, 71, 89, 0.12);
	border-radius: var(--km-shape);
	overflow: hidden;
	isolation: isolate;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform 0.5s var(--km-ease), box-shadow 0.5s, border-color 0.4s, background-color 0.5s, color 0.5s, opacity 0.9s var(--km-ease);
}
html.js .km-card.km-reveal { transform: translateY(34px) rotateX(var(--rx)) rotateY(var(--ry)); }
html.js .km-card.km-reveal.is-in { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.km-card::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(2, 136, 221, 0.35), transparent 45%);
	opacity: 0;
	transition: opacity 0.4s;
}
.km-card::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 100%; height: 3px;
	background: linear-gradient(90deg, var(--km-blue), var(--km-lime));
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform 0.6s var(--km-ease);
}
.km-card:hover { background: var(--km-slate); color: var(--km-white); border-color: transparent; box-shadow: 0 30px 60px -28px rgba(27, 30, 39, 0.65); }
.km-card:hover::before { opacity: 1; }
.km-card:hover::after { transform: none; }
.km-card__icon {
	display: grid; place-items: center;
	width: 58px; height: 58px;
	margin-bottom: 26px;
	border-radius: 18px 4px 18px 4px;
	background: rgba(2, 136, 221, 0.1);
	color: var(--km-blue);
	transition: background 0.4s, color 0.4s, transform 0.5s var(--km-ease);
}
.km-card__icon .km-icon { width: 28px; height: 28px; }
.km-card:hover .km-card__icon { background: var(--km-lime); color: var(--km-ink); transform: rotate(-6deg) scale(1.06); }
.km-card__title { font-size: 21px; font-weight: 700; margin-bottom: 10px; color: inherit; }
.km-card__text { margin: 0; font-size: 15.5px; color: inherit; opacity: 0.78; }
.km-card__num {
	position: absolute; top: 20px; right: 26px;
	font-size: 48px; font-weight: 800; letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(66, 71, 89, 0.18);
	transition: -webkit-text-stroke-color 0.4s;
}
.km-card:hover .km-card__num { -webkit-text-stroke-color: rgba(201, 226, 0, 0.55); }

/* Contact */
.km-contact { overflow: hidden; }
.km-contact::before {
	content: "";
	position: absolute;
	width: 700px; height: 700px;
	right: -200px; top: -120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(2, 136, 221, 0.22), transparent 65%);
	pointer-events: none;
}
.km-contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.km-contact__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
.km-contact__list li { display: flex; align-items: flex-start; gap: 14px; color: var(--km-text); }
.km-contact__list .km-icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--km-lime); }
.km-contact__list a:hover { color: var(--km-lime); }

.km-form {
	position: relative;
	padding: clamp(28px, 4vw, 44px);
	background: linear-gradient(160deg, rgba(66, 71, 89, 0.55), rgba(34, 38, 50, 0.75));
	border: 1px solid var(--km-line);
	border-radius: var(--km-shape);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.km-form::before {
	content: "";
	position: absolute;
	top: -2px; left: -2px;
	width: 90px; height: 90px;
	border-top: 3px solid var(--km-lime);
	border-left: 3px solid var(--km-lime);
	border-top-left-radius: 28px;
	pointer-events: none;
}
.km-form::after {
	content: "";
	position: absolute;
	bottom: -2px; right: -2px;
	width: 90px; height: 90px;
	border-bottom: 3px solid var(--km-lime);
	border-right: 3px solid var(--km-lime);
	border-bottom-right-radius: 28px;
	pointer-events: none;
}
.km-field { position: relative; margin-bottom: 18px; }
.km-field input,
.km-field textarea {
	width: 100%;
	padding: 24px 16px 10px;
	background: rgba(27, 30, 39, 0.6);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px 3px 12px 3px;
	color: var(--km-white);
	font-size: 16px;
	resize: vertical;
	transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.km-field textarea { min-height: 140px; }
.km-field label {
	position: absolute;
	left: 17px; top: 17px;
	font-size: 15px;
	color: var(--km-muted);
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform 0.25s var(--km-ease), color 0.25s;
}
.km-field input:focus,
.km-field textarea:focus { outline: none; border-color: var(--km-blue); box-shadow: 0 0 0 4px rgba(2, 136, 221, 0.18); background: rgba(27, 30, 39, 0.85); }
.km-field input:focus + label,
.km-field input:not(:placeholder-shown) + label,
.km-field textarea:focus + label,
.km-field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(0.78); color: var(--km-lime); }
.km-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.km-form__status { padding: 14px 16px; margin-bottom: 20px; border-radius: 12px 3px 12px 3px; font-size: 15px; }
.km-form__status--ok { background: rgba(201, 226, 0, 0.14); color: var(--km-lime); border: 1px solid rgba(201, 226, 0, 0.35); }
.km-form__status--err { background: rgba(255, 99, 99, 0.12); color: #ffb3b3; border: 1px solid rgba(255, 99, 99, 0.3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.km-footer {
	position: relative;
	padding: 90px 0 34px;
	background: #15171e;
	border-top: 1px solid var(--km-line);
	overflow: hidden;
}
.km-footer__big {
	position: absolute;
	left: 50%; bottom: -0.34em;
	transform: translateX(-50%);
	font-size: clamp(120px, 22vw, 360px);
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.035);
	pointer-events: none;
	user-select: none;
}
.km-footer__big b { -webkit-text-stroke-color: rgba(201, 226, 0, 0.07); }
.km-footer .km-container { position: relative; }
.km-footer__top { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 40px; align-items: start; padding-bottom: 60px; }
.km-footer__brand p { margin: 22px 0 0; max-width: 360px; color: var(--km-muted); }
.km-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.km-footer__menu a { color: var(--km-muted); transition: color 0.25s, padding 0.3s var(--km-ease); }
.km-footer__menu a:hover { color: var(--km-lime); padding-left: 6px; }
.km-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.km-social a,
.km-social__item {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--km-line);
	border-radius: 14px 4px 14px 4px;
	color: var(--km-text);
	transition: background 0.3s, color 0.3s, transform 0.3s var(--km-ease), border-color 0.3s;
}
.km-social a:hover,
.km-social a:focus-visible,
.km-social__item:hover { background: var(--km-lime); color: var(--km-ink); border-color: var(--km-lime); transform: translateY(-3px); }
.km-social .km-icon { width: 19px; height: 19px; }
.km-social__item { cursor: default; }
.km-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px;
	padding-top: 28px;
	border-top: 1px solid var(--km-line);
	font-size: 14px;
	color: var(--km-muted);
}
.km-copyright { margin: 0; }
.km-footer__bottom .kmmis-tagline { font-size: 12.5px; }

/* Back to top */
.km-totop {
	--p: 0;
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 900;
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(34, 38, 50, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--km-white);
	opacity: 0; visibility: hidden; transform: translateY(16px);
	transition: opacity 0.35s, transform 0.35s var(--km-ease), visibility 0.35s, background 0.3s;
}
.km-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.km-totop:hover { background: var(--km-slate); }
.km-totop .km-icon { width: 20px; height: 20px; }
.km-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.km-totop__ring circle { fill: none; stroke: var(--km-lime); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100px; stroke-dashoffset: calc(100px - var(--p) * 100px); }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.km-page-hero {
	position: relative;
	padding: calc(var(--km-header-h) + 90px) 0 70px;
	overflow: hidden;
	border-bottom: 1px solid var(--km-line);
}
.km-page-hero::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(circle at 85% 0%, rgba(2, 136, 221, 0.25), transparent 45%),
		linear-gradient(var(--km-line) 1px, transparent 1px) 0 0 / 72px 72px,
		linear-gradient(90deg, var(--km-line) 1px, transparent 1px) 0 0 / 72px 72px;
	mask-image: linear-gradient(#000, transparent);
	-webkit-mask-image: linear-gradient(#000, transparent);
}
.km-inner-main { min-height: 60vh; }
.km-entry { padding-top: 60px; padding-bottom: 110px; }
.km-entry__img { margin: 0 0 40px; border-radius: var(--km-shape); overflow: hidden; }
.km-entry__img img { display: block; width: 100%; }
.km-entry__content { font-size: 18px; }
.km-entry__content h2 { font-size: 34px; margin: 1.6em 0 0.6em; }
.km-entry__content h3 { font-size: 26px; margin: 1.5em 0 0.5em; }
.km-entry__content a { color: var(--km-lime); text-decoration: underline; text-underline-offset: 3px; }
.km-entry__content blockquote { margin: 2em 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--km-lime); font-size: 1.15em; color: var(--km-white); }
.km-entry__content code { background: var(--km-ink-3); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.km-entry__content pre { background: var(--km-ink-2); padding: 20px; border-radius: var(--km-shape-sm); overflow: auto; }
.km-entry__content img { border-radius: var(--km-shape-sm); }
.km-entry__content .alignwide { margin-inline: -80px; }
.km-entry__content .alignfull { margin-inline: calc(50% - 50vw); }
.km-entry__content .aligncenter { display: block; margin-inline: auto; }
.km-entry__content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.km-entry__content .alignright { float: right; margin: 0 0 1em 1.5em; }
.wp-caption-text, .wp-element-caption { font-size: 14px; color: var(--km-muted); text-align: center; }

.km-posts { padding-top: 60px; padding-bottom: 110px; }
.km-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.km-post-card {
	display: flex; flex-direction: column;
	background: var(--km-ink-2);
	border: 1px solid var(--km-line);
	border-radius: var(--km-shape);
	overflow: hidden;
	transition: transform 0.4s var(--km-ease), border-color 0.3s;
}
.km-post-card:hover { transform: translateY(-6px); border-color: rgba(201, 226, 0, 0.4); }
.km-post-card__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.km-post-card__body { padding: 26px; }
.km-meta { font-size: 13px; color: var(--km-lime); margin-bottom: 8px; }
.km-post-card__title { font-size: 22px; margin-bottom: 10px; }
.km-post-card__title a:hover { color: var(--km-lime); }
.km-post-card__excerpt { color: var(--km-muted); font-size: 15.5px; }
.km-pagination { margin-top: 50px; }
.km-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.km-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--km-line); border-radius: 12px 3px 12px 3px; }
.km-pagination .page-numbers.current, .km-pagination .page-numbers:hover { background: var(--km-lime); color: var(--km-ink); border-color: var(--km-lime); }
.km-empty { padding: 40px 0; color: var(--km-muted); }
.search-form { display: flex; gap: 10px; max-width: 480px; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: 13px 16px; background: var(--km-ink-2); border: 1.5px solid var(--km-line); border-radius: 12px 3px 12px 3px; color: var(--km-white); }
.search-submit { padding: 13px 22px; background: var(--km-lime); color: var(--km-ink); border: 0; border-radius: 12px 3px 12px 3px; font-weight: 600; cursor: pointer; }

.km-404 { text-align: center; padding-bottom: 130px; border: 0; }
.km-404 .km-kicker { justify-content: center; }
.km-404__mark { width: 120px; margin: 0 auto 30px; }
.km-404__mark .kmmis-mark { width: 100%; animation: km-float 5s ease-in-out infinite; overflow: visible; }

/* Comments */
.comments-area { margin-top: 70px; padding-top: 40px; border-top: 1px solid var(--km-line); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--km-line); }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea { width: 100%; padding: 12px 14px; background: var(--km-ink-2); border: 1.5px solid var(--km-line); border-radius: 12px 3px 12px 3px; color: var(--km-white); }
.comment-form .submit { padding: 13px 24px; background: var(--km-lime); color: var(--km-ink); border: 0; border-radius: 12px 3px 12px 3px; font-weight: 600; cursor: pointer; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.km-cards { grid-template-columns: repeat(2, 1fr); }
	.km-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.km-hero__grid { grid-template-columns: 1fr; }
	.km-hero { padding-bottom: 90px; }
	.km-hero__art { max-width: 380px; margin: 10px auto 0; width: 100%; }
	.km-hero { padding-top: calc(var(--km-header-h) + 30px); }
	.km-term { display: none; }
	.km-about__grid,
	.km-contact__grid { grid-template-columns: 1fr; }
	.km-about__side { padding-top: 0; }
	.km-process__grid { grid-template-columns: 1fr; }
	.km-process__visual { position: sticky; top: 68px; z-index: 2; margin: 0 calc(-1 * clamp(20px, 4vw, 40px)); padding: 10px clamp(20px, 4vw, 40px); background: var(--km-ink-2); box-shadow: 0 1px 0 var(--km-line), 0 18px 24px -6px var(--km-ink-2); }
	body.admin-bar .km-process__visual { top: 114px; }
	.km-process__sticky { position: static; flex-direction: row; justify-content: center; gap: 16px; }
	.km-process__mark { width: 84px; }
	.km-process__label { width: auto; min-width: 150px; text-align: left; }
	.km-process__label span { font-size: 22px; line-height: 40px; }
	.km-step { min-height: 0; padding-bottom: 56px; }
	.km-footer__top { grid-template-columns: 1fr; }
	.km-entry__content .alignwide { margin-inline: 0; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.km-cards,
	.km-post-grid { grid-template-columns: 1fr; }
	.km-hero__title { font-size: clamp(42px, 13vw, 64px); }
	.km-chip { font-size: 11.5px; padding: 7px 11px; }
	.km-chip--2 { right: 0; }
	.km-chip--3 { right: 0; }
	.km-stats { gap: 26px 20px; }
	.km-hero__actions .km-btn { flex: 1 1 auto; }
	.km-footer__bottom { flex-direction: column; align-items: flex-start; }
	.km-footer__bottom .kmmis-tagline { font-size: 10.5px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.km-marquee__track { animation: none !important; }
	.km-caret, .kmmis-mark .km-cursor { animation: none !important; }
}