/* konex-landing - plain CSS, no build step.
   Custom properties first so a restyle is a few values, not a find-replace. */
:root {
	--bg: #f8fafc;
	--surface: #ffffff;
	--text: #0f172a;
	--muted: #475569;
	--border: #e2e8f0;
	--accent: #2563eb;
	--radius: 8px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f172a;
		--surface: #1e293b;
		--text: #e2e8f0;
		--muted: #94a3b8;
		--border: #334155;
		--accent: #60a5fa;
	}
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.container { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem; }

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.page-header h1 { margin: 0; font-size: 1.875rem; letter-spacing: -0.02em; }

.button {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--text);
	color: var(--bg);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.button:hover { opacity: 0.85; }

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.panel h2 { margin: 0; font-size: 1.25rem; }
.panel p { margin: 0.5rem 0 0; color: var(--muted); }

/* --- blog ---------------------------------------------------------------- */
.blog-lede { color: var(--muted); margin: 0 0 2rem; }
.blog-list { display: grid; gap: 1.5rem; }
.blog-list h2 { margin: 0; font-size: 1.25rem; }
.blog-list h2 a { color: inherit; text-decoration: none; }
.blog-list h2 a:hover { text-decoration: underline; }
.blog-meta { color: var(--muted); font-size: 0.875rem; display: flex; gap: 0.75rem; }
.blog-cover { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0.5rem; margin-bottom: 1rem; }
.blog-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; font-size: 0.875rem; }
.blog-body { margin-top: 2rem; line-height: 1.7; }
.blog-body img { max-width: 100%; height: auto; }
.blog-byline { display: flex; gap: 1rem; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border, #e2e8f0); }
.blog-avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }

/* --- under construction (temporary) ---------------------------------------- */
.construccion {
	--k-accent: #2563eb;
	--k-accent-deep: #1e40af;
	--k-ink: #0f172a;
	/* one screen, never scrolls: the section is exactly the viewport and everything inside
	   (text + phone) shrinks to fit it */
	position: relative;
	box-sizing: border-box;
	width: 100%; max-width: 74rem; margin: 0 auto;
	height: 100vh; height: 100dvh;
	padding: clamp(0.75rem, 2.5vh, 1.75rem) clamp(1rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	justify-items: center;
	align-items: center;
	gap: clamp(0.5rem, 2.2vh, 1.6rem);
	text-align: center;
}
html:has(.construccion), body:has(.construccion) { height: 100%; overflow: hidden; }
body:has(.construccion) .container { max-width: none; margin: 0; padding: 0; }
.construccion-logo {
	display: block; height: auto;
	/* sized by width and height so it shrinks with short and narrow screens */
	width: clamp(4.5rem, min(26vw, 17vh), 12rem);
	margin: 0 auto clamp(0.3rem, 1.2vh, 0.9rem);
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.construccion-pill {
	display: block;
	color: var(--k-accent-deep);
	font-size: clamp(1.2rem, min(4.6vw, 3.8vh), 2.4rem);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.construccion h1 { margin: clamp(0.35rem, 1.2vh, 1rem) 0 clamp(0.35rem, 1.2vh, 0.75rem); font-size: clamp(1.45rem, min(6vw, 5.6vh), 3.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.construccion-copy p { margin: 0 auto; max-width: 30rem; color: var(--muted); font-size: clamp(0.85rem, min(3.6vw, 2.4vh), 1.1rem); }
@media (min-width: 52rem) {
	.construccion { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); text-align: left; }
	.construccion-logo { margin-left: 0; width: clamp(5rem, min(14vw, 20vh), 12rem); }
	.construccion-copy p { margin: 0; }
	.construccion h1 { font-size: clamp(1.8rem, min(4.2vw, 7vh), 3.25rem); }
	.construccion-copy p { font-size: clamp(0.95rem, min(1.6vw, 2.6vh), 1.1rem); }
	.construccion-pill { font-size: clamp(1.5rem, min(3vw, 5vh), 2.9rem); }
}

/* phone */
/* The phone is a real mockup photo (static/img/mockup-phone.webp: phone.png, mirrored,
   screen cut out). The app layout is warped into its screen with a homography
   (matrix3d) computed from the screen's four corners. Design size of the layout:
   278 x 608 px; the mockup box is 493 x 561 px, scaled with --k. */
.mock-wrap {
	/* --kw: what the width allows, --kh: what the height allows; the phone uses the smaller */
	--kw: 0.5; --kh: 0.38;
	--k: min(var(--kw), var(--kh));
	position: relative; z-index: 1;
	width: calc(493px * var(--k)); height: calc(561px * var(--k));
}
/* stacked layout (phone under the text): width caps, then height caps */
@media (min-width: 20rem) { .mock-wrap { --kw: 0.52; } }
@media (min-width: 22rem) { .mock-wrap { --kw: 0.62; } }
@media (min-width: 23rem) { .mock-wrap { --kw: 0.68; } }
@media (min-width: 25rem) { .mock-wrap { --kw: 0.72; } }
@media (min-width: 34rem) { .mock-wrap { --kw: 1.1; } }
@media (min-height: 540px) { .mock-wrap { --kh: 0.46; } }
@media (min-height: 620px) { .mock-wrap { --kh: 0.56; } }
@media (min-height: 700px) { .mock-wrap { --kh: 0.68; } }
@media (min-height: 780px) { .mock-wrap { --kh: 0.8; } }
@media (min-height: 860px) { .mock-wrap { --kh: 0.95; } }
@media (min-height: 1000px) { .mock-wrap { --kh: 1.15; } }
/* two columns (phone beside the text): the whole height is for the phone */
@media (min-width: 52rem) {
	.mock-wrap { --kw: 0.8; --kh: 0.45; }
}
@media (min-width: 64rem) { .mock-wrap { --kw: 1.05; } }
@media (min-width: 75rem) { .mock-wrap { --kw: 1.3; } }
@media (min-width: 52rem) and (min-height: 460px) { .mock-wrap { --kh: 0.55; } }
@media (min-width: 52rem) and (min-height: 540px) { .mock-wrap { --kh: 0.66; } }
@media (min-width: 52rem) and (min-height: 620px) { .mock-wrap { --kh: 0.8; } }
@media (min-width: 52rem) and (min-height: 700px) { .mock-wrap { --kh: 0.95; } }
@media (min-width: 52rem) and (min-height: 800px) { .mock-wrap { --kh: 1.1; } }
@media (min-width: 52rem) and (min-height: 900px) { .mock-wrap { --kh: 1.3; } }
.mock { position: absolute; left: 0; top: 0; width: 493px; height: 561px; transform: scale(var(--k)); transform-origin: 0 0; }
.mock-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
/* the layout is clipped by the exact shape of the phone's screen (mockup-phone-hole.webp),
   so it fills the whole glass up to the bezel, rounded corners included */
.mock-clip {
	position: absolute; inset: 0; z-index: 2;
	-webkit-mask: url("/static/img/mockup-phone-hole.webp") 0 0 / 100% 100% no-repeat;
	mask: url("/static/img/mockup-phone-hole.webp") 0 0 / 100% 100% no-repeat;
}
.mock-screen {
	position: absolute; left: 0; top: 0; width: 278px; height: 608px;
	transform-origin: 0 0; transform: matrix3d(0.774320,0.190308,0,-0.00019698,-0.417974,0.741867,0,-0.00005569,0,0,1,0,246.3307,0.9126,0,1);
	font-size: 16px;
	display: flex; flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: var(--k-ink);
	text-align: left;
}
/* shadows made for the dirt background: a soft cast shadow shaped like the phone, thrown
   down and to the right, and a tight dark contact shadow under its lowest corner. Both
   multiply the dirt colour. */
.mock-shadow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("/static/img/mockup-phone-shadow.webp") 0 0 / 100% 100% no-repeat;
	opacity: 0.8; mix-blend-mode: multiply; filter: blur(16px);
	transform: translate(64px, 30px);
}
.mock-contact {
	position: absolute; left: 130px; top: 539px; width: 170px; height: 24px; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse, #120703, rgba(18, 7, 3, 0) 70%); opacity: 0.85; mix-blend-mode: multiply; filter: blur(4px);
	transform: rotate(-8deg);
}
.mock svg { display: block; fill: none; }
.app-status { display: flex; justify-content: space-between; padding: 1.7em 3em 0; font-size: 0.7em; font-weight: 700; color: var(--k-ink); position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.app-status-dots { display: flex; gap: 2px; align-items: flex-end; }
.app-status-dots i { width: 3px; background: var(--k-ink); border-radius: 1px; }
.app-status-dots i:nth-child(1) { height: 4px; }
.app-status-dots i:nth-child(2) { height: 7px; }
.app-status-dots i:nth-child(3) { height: 10px; }

.app-banner {
	padding: 2.9em 1.1em 1.2em;
	background: #fff;
	color: var(--k-ink);
	border-bottom: 1px solid #e2e8f0;
	display: grid; gap: 0.1em;
}
.app-brand { font-size: 1.75em; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--k-accent-deep); }
.app-tagline { font-size: 0.72em; color: #64748b; }
.app-search {
	margin-top: 0.7em; display: flex; align-items: center; gap: 0.5em;
	padding: 0.5em 0.75em; border-radius: 0.8em;
	background: rgba(255, 255, 255, 0.95); color: #64748b; font-size: 0.72em;
}
.app-search svg { width: 0.95em; height: 0.95em; }

.app-list { list-style: none; margin: 0; padding: 1em 0.8em; display: grid; gap: 0.8em; flex: 1; align-content: start; }
.app-row {
	display: grid; grid-template-columns: auto 1fr auto; min-height: 4.6em; gap: 0.6em; align-items: center;
	padding: 0.85em 0.7em; border-radius: 1em; background: #fff; border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	opacity: 0; animation: row-in 0.6s ease forwards;
}
.app-row:nth-child(2) { animation-delay: 0.15s; }
.app-row:nth-child(3) { animation-delay: 0.3s; }
.app-avatar { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; color: #fff; overflow: hidden; }
.app-avatar svg { width: 1.5em; height: 1.5em; fill: currentColor; align-self: end; }
.a1, .a2, .a3 { background: #8b5cf6; }
.app-info { display: grid; gap: 0.05em; min-width: 0; }
.app-info strong { font-size: 0.78em; }
.app-machine { font-size: 0.7em; color: #475569; }
.app-status-tag { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.64em; font-weight: 600; color: #15803d; }
.app-status-tag i { width: 0.4em; height: 0.4em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.app-tile { --tile: #eff6ff; width: 2.9em; height: 2.9em; border-radius: 0.8em; background: var(--tile); color: var(--k-accent-deep); display: grid; place-items: center; }
.app-tile svg { width: 2.1em; height: 2.1em; }

.app-tabs { display: flex; justify-content: space-around; padding: 0.65em 1.4em 1.35em; background: #fff; border-top: 1px solid #e2e8f0; }
.app-tabs span { color: #94a3b8; }
.app-tabs .on { color: var(--k-accent-deep); }
.app-tabs svg { width: 1.2em; height: 1.2em; }
.app-tabs svg [stroke] { stroke: currentColor; }
.app-tabs span svg { fill: currentColor; }

.app-stats { margin-top: 0.8em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.app-stats span { display: grid; padding: 0.4em 0.2em; border-radius: 0.7em; background: #eff6ff; color: #475569; font-size: 0.6em; text-align: center; }
.app-stats b { font-size: 1.58em; line-height: 1.2; color: var(--k-accent-deep); }
.app-status-tag.use { color: #1d4ed8; }
.app-status-tag.use i { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); }
.app-add {
	margin: 0 0.8em 0.8em; padding: 0.65em; border-radius: 0.9em; text-align: center;
	background: var(--k-ink); color: #fff; font-size: 0.75em; font-weight: 700;
}
.app-add span { display: inline-block; margin-right: 0.25em; color: #93c5fd; font-size: 1.27em; line-height: 1; }

/* page: dirt background */
body:has(.construccion) {
	overflow-x: clip;
	--bg: #3b2415; --surface: #ffffff; --text: #ffffff; --muted: #f1e6dc; --border: #e2e8f0;
	/* dirt photo (static/img/tierra.webp) under a dark veil so the text stays readable */
	background: linear-gradient(rgba(8, 12, 24, 0.62), rgba(8, 12, 24, 0.62)) 0 0 / 100% 100% no-repeat, url("/static/img/tierra.webp") center / cover no-repeat #3b2415;
	color: #fff;
}
.construccion-copy { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 3px 22px rgba(0, 0, 0, 0.6); }
.construccion-copy p { color: #fff; }
/* same blue as the phone's "konex" wordmark; the contrast comes from a dark halo behind the
   letters (stacked soft black shadows), not from a border or a lighter colour */
.construccion .construccion-pill {
	position: relative;
	color: var(--k-accent-deep);
	text-shadow:
		0 0 2px rgba(0, 0, 0, 0.95),
		0 0 6px rgba(0, 0, 0, 0.95),
		0 0 14px rgba(0, 0, 0, 0.9),
		0 0 26px rgba(0, 0, 0, 0.85),
		0 0 42px rgba(0, 0, 0, 0.75);
}
.construccion-copy { position: relative; z-index: 1; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.app-row { animation: none; opacity: 1; }
}