/* ALVIS preview: hero. "We build ___" in a giant word filled with the thing it names, over a dimmed,
   tilted product screen that reassembles on every change. Motion pauses off screen, on demand and under reduced motion. */
.hero.kt { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 24px) 0 40px; overflow-x: clip; }
.kt-top { position: relative; }
.kt-top > h1, .kt-word, .kt-prog { position: relative; z-index: 1; }
.kt-h1 { margin: 0; }
.kt-pre { display: block; font: 500 clamp(1.8rem, 3.4vw, 3.2rem)/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink-2); }
.kt-word { margin-top: clamp(4px, 1vh, 12px); }
.kt-word svg { display: block; width: 100%; height: auto; overflow: visible; }
.kt-letter { font-family: var(--font-display); font-weight: 500; }
.kt-prog { height: 1px; background: var(--line); margin-top: clamp(16px, 3vh, 28px); overflow: hidden; }
.kt-prog i { position: absolute; inset: 0; background: var(--ink-2); transform-origin: left; transform: scaleX(0); }

.kt-low { margin-top: clamp(40px, 8vh, 88px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; position: relative; z-index: 1; }
.kt-lede { margin: 0 0 22px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 42ch; }
.kt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kt-side { justify-self: end; width: min(460px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.kt-now { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; min-height: 112px; }
.kt-n { font: 400 12px var(--font-mono); color: var(--ink-3); padding-top: 4px; white-space: nowrap; }
.kt-now b { display: block; font: 500 1.2rem var(--font-display); letter-spacing: -0.02em; }
.kt-now p { margin: 4px 0 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.kt-now a { display: inline-block; margin-top: 8px; font-size: 0.88rem; color: var(--accent); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .kt-now a:hover { color: var(--accent-2); } }

/* fills inside the letters */
.kt-pat { transition: opacity 500ms ease; }
.kt-pat * { transform-box: fill-box; }
.kt-f-cut { fill: var(--bg); opacity: 0.55; }
.kt-f-cut2 { fill: var(--bg); opacity: 0.42; }
.kt-f-cut3 { fill: var(--bg); opacity: 0.35; }
.kt-f-acc { fill: var(--accent); }
.kt-f-line { fill: none; stroke: var(--bg); stroke-width: 3; opacity: 0.7; }
@keyframes kt-up { to { transform: translateY(var(--d)); } }
@keyframes kt-bar { 0%, 100% { transform: scaleY(var(--a)); } 50% { transform: scaleY(var(--b)); } }
.kt-loop { animation: kt-up var(--t, 6s) linear infinite; }
.kt-bar { transform-origin: 50% 100%; animation: kt-bar var(--t, 2.4s) var(--ease-in-out) infinite; animation-delay: var(--dl, 0s); }
.kt-paused .kt-loop, .kt-paused .kt-bar, .kt-paused .kt-ui { animation-play-state: paused; }

/* ── tilted product screen behind the word ── */
.kt-scene { position: absolute; z-index: 0; right: -80px; top: -96px; width: 800px; height: 500px; perspective: 2400px; pointer-events: none; opacity: 0.58; }
[data-theme="light"] .kt-scene { opacity: 0.66; }
.kt-ui { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-33deg) scale(0.92); animation: kt-float 7s var(--ease-in-out) infinite alternate; }
@keyframes kt-float { to { transform: rotateX(52deg) rotateZ(-33deg) scale(0.92) translateZ(18px); } }
.kt-ui::before { content: ""; position: absolute; inset: -10px; border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: 10px; background: color-mix(in oklab, var(--bg-2) 70%, transparent); }
.kt-tile { position: absolute; background: var(--panel); border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); border-radius: var(--r-3); box-shadow: inset 0 1px 0 var(--hi); overflow: hidden; font: 400 12px/1.4 var(--font-body); color: var(--ink); }
.kt-tile > * { transition: opacity 450ms ease; }
.kt-tile[data-raw] > * { opacity: 0; }
.kt-tile.flat { background: transparent; border-color: transparent; box-shadow: none; }
.kt-tile .m { font-family: var(--font-mono); letter-spacing: -0.02em; }
.kt-tile .mu { color: var(--ink-3); }
.kt-tile .mu2 { color: var(--ink-2); }
.kt-tile .ac { color: var(--accent); }
.kt-tile .ok { color: var(--ok); }
.kt-tile .dn { color: var(--danger); }
.kt-tile b { font-weight: 600; }
.kt-tile i.ph { font-size: 15px; color: var(--ink-2); }
.kt-acc { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kt-acc i.ph { color: var(--accent-ink); }

.k-pad { padding: 14px 16px; display: grid; gap: 6px; align-content: start; height: 100%; }
.k-gap0 { gap: 0; } .k-gap2 { gap: 2px; } .k-gap10 { gap: 10px; padding-bottom: 6px; } .k-pb10 { padding-bottom: 10px; }
.k-row { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px; }
.k-px20 { padding: 0 20px; } .k-center { justify-content: center; gap: 8px; padding: 0; }
.k-hd { display: flex; align-items: center; gap: 12px; }
.k-base { align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.k-sp { margin-left: auto; }
.k-stack { display: grid; } .k-stack .mu { font-size: 11px; }
.k-icons { display: flex; gap: 14px; align-items: center; }
.k-ink { font-size: 18px !important; color: var(--ink) !important; }
.k-av { width: 26px; height: 26px; border-radius: 50%; background: var(--inset); display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: var(--ink-2); flex: none; }
.k-av.a { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-2); }
.k-av.a i.ph { color: var(--accent-ink); }
.k-av-s { width: 18px; height: 18px; }
.k-avs { display: flex; } .k-avs .k-av { width: 22px; height: 22px; border: 2px solid var(--panel); margin-left: -6px; font-size: 8.5px; }
.k-title { font: 500 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
.k-t17 { font-size: 17px; } .k-t22 { font-size: 22px; }
.k-big { font: 500 22px/1.05 var(--font-mono); letter-spacing: -0.04em; }
.k-b17 { font-size: 17px; } .k-b18 { font-size: 18px; }
.k-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; justify-self: start; }
.k-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 500 10px/18px var(--font-mono); text-align: center; }
.k-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; font: 400 10.5px var(--font-mono); }
.k-seg span { padding: 3px 8px; color: var(--ink-3); } .k-seg span.on { background: var(--raised); color: var(--ink); }
.k-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.k-btn.p { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-btn.p i.ph { color: var(--bg); }
.k-list { display: grid; }
.k-li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); }
.k-li.on { background: var(--raised); }
.k-li div { min-width: 0; } .k-li div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: 11px; }
.k-li > span:last-child { display: grid; justify-items: end; gap: 3px; font: 400 10px var(--font-mono); color: var(--ink-3); }
.k-search { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-2); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; }
.k-url { margin: 0 auto; width: 300px; height: 24px; justify-content: center; }
.k-url i.ph { font-size: 12px; }
.k-msg { padding: 10px 14px; display: grid; gap: 3px; }
.k-msg .n { display: flex; gap: 8px; align-items: center; font-size: 11.5px; } .k-msg .n time { font: 400 10px var(--font-mono); color: var(--ink-3); }
.k-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.k-kpis > div { padding: 8px 12px; display: grid; gap: 2px; } .k-kpis > div + div { border-left: 1px solid var(--line); }
.k-kpis span { font-size: 10.5px; color: var(--ink-3); } .k-kpis b { font: 500 15px var(--font-mono); letter-spacing: -0.03em; }
.k-chart { padding: 6px 8px 0; }
.k-kpi { gap: 4px; }
.k-delta { font-size: 11px; } .k-delta i.ph { font-size: 11px; color: inherit; }
.k-svg { display: block; width: 100%; }
.k-axis { font: 400 9.5px var(--font-mono); fill: var(--ink-3); }
.k-gl { stroke: var(--line); stroke-width: 1; } .k-gl2 { stroke: var(--line-2); }
.k-tg { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.k-ar { fill: var(--accent); opacity: 0.12; } .k-ln { fill: none; stroke: var(--accent); }
.k-dot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.k-legend { display: inline-flex; gap: 12px; font-size: 11px; }
.k-lg-a { display: inline-block; width: 10px; height: 2px; background: var(--accent); vertical-align: middle; }
.k-lg-t { display: inline-block; width: 10px; border-top: 1px dashed var(--ink-3); vertical-align: middle; }
.k-br { display: grid; gap: 5px; padding: 9px 0; border-top: 1px solid var(--line); }
.k-meter { height: 4px; border-radius: 2px; background: var(--inset); overflow: hidden; } .k-meter i { display: block; height: 100%; background: var(--ink-2); } .k-meter i.a { background: var(--accent); }
.k-rail { justify-items: center; gap: 16px; padding: 16px 0; } .k-rail .k-av { width: 28px; height: 28px; } .k-rail i.ph { font-size: 18px; } .k-rail i.ph.on { color: var(--ink); }
.k-dots { display: flex; gap: 6px; } .k-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--inset); }
.k-nav { padding: 0 40px; gap: 28px; } .k-logo { font-size: 19px; font-weight: 600; }
.k-hero { gap: 14px; padding: 20px 22px; }
.k-h40 { font: 500 40px/0.98 var(--font-display); letter-spacing: -0.04em; }
.k-sub { font-size: 13px; max-width: 34ch; }
.k-ctas { padding: 0; gap: 8px; } .k-ctas .k-btn { height: 46px; padding: 0 18px; }
.k-prod { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; } .k-prod .k-pad { gap: 4px; height: auto; border-top: 1px solid var(--line); }
.k-prod-img { display: grid; place-items: center; background: var(--bg-2); }
.k-bag { fill: var(--raised); stroke: var(--line-2); } .k-bag2 { fill: var(--inset); stroke: var(--line-2); } .k-scr { fill: var(--bg-2); }
.k-lbl { fill: var(--panel); stroke: var(--line-2); }
.k-lbl-t { font: 600 10px var(--font-display); fill: var(--ink); } .k-lbl-s { font: 400 7px var(--font-body); fill: var(--accent); }
.k-stats { padding: 0; gap: 0; } .k-stats > div { flex: 1; padding: 0 16px; } .k-stats > div + div { border-left: 1px solid var(--line); }
.k-stats b { font-size: 15px; } .k-stats .mu { font-size: 10.5px; }
.k-menubar { gap: 16px; font-size: 11.5px; } .k-menubar > i.ph { color: var(--ink); font-size: 14px; } .k-menubar .k-icons { gap: 12px; } .k-menubar .k-icons .m { font-size: 10.5px; }
.k-notif { gap: 10px; padding: 0 12px; } .k-notif .k-av { width: 30px; height: 30px; }
.k-about { justify-items: center; text-align: center; gap: 10px; padding: 20px 28px; }
.k-dl { display: grid; grid-template-columns: 96px 1fr; gap: 7px 14px; font-size: 12px; text-align: left; margin: 4px 0 0; } .k-dl dt { color: var(--ink-3); } .k-dl dd { margin: 0; }
.k-desk { justify-items: center; gap: 6px; text-align: center; font-size: 10.5px; } .k-desk i.ph { font-size: 30px; color: var(--ink); } .k-desk span + i.ph { margin-top: 6px; }
.k-dock { display: flex; justify-content: center; align-items: center; gap: 10px; height: 100%; }
.k-dock span { position: relative; width: 38px; height: 38px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-2); display: grid; place-items: center; }
.k-dock span i.ph { font-size: 20px; color: var(--ink); }
.k-dock span.on::after { content: ""; position: absolute; bottom: -7px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }
.k-dock span.a { background: var(--accent); border-color: var(--accent); } .k-dock span.a i.ph { color: var(--accent-ink); }
.k-num { font: 400 10.5px var(--font-mono); color: var(--accent); }
.k-step { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.k-tl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.k-tl span { height: 22px; border-radius: var(--r-1); background: var(--inset); display: grid; place-items: center; font: 400 10px var(--font-mono); color: var(--ink-3); }
.k-tl span.a { background: var(--accent); color: var(--accent-ink); } .k-tl span.b { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.k-est { gap: 28px; padding: 0 20px; } .k-est .mu { font-size: 11px; }

@media (max-width: 959px) {
  .kt-low { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kt-side { justify-self: start; }
  .kt-scene { right: -300px; top: -130px; opacity: 0.28; transform: scale(0.68); transform-origin: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-loop, .kt-bar, .kt-ui { animation: none; }
}