/* =============================================================================
   Kaitech — Кайдзэн Технологи | landing page
   Design tokens and layout follow the handoff spec 1:1.
   Re-theme the whole page from :root (accent + font family) or assets/js/config.js
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Brand — sampled from the logo. Override in config.js or the theme panel. */
  --kt-accent: #F94803;

  /* Type families, three roles, all swapped at runtime by config.js.
     --kt-display carries the brand voice and is deliberately used only on the
     big statements; Unbounded shares the logo's geometry (perfect circles,
     monolinear strokes, wide proportions) so headline and mark read as one. */
  --kt-display: 'Manrope';   /* build.mjs emits the real per-language face inline */
  --kt-head: 'Manrope';
  --kt-body: 'Manrope';
  --kt-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --kt-fallback: 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;

  /* Surface + ink */
  --kt-bg: #0A0A0C;
  --kt-ink: #EDEDEF;
  --kt-ink-2: #C9C9D2;
  --kt-ink-3: #B8B8C0;
  --kt-body-1: #A2A2AC;
  --kt-body-2: #A0A0A9;
  --kt-muted: #8A8A94;
  --kt-muted-2: #8D8D97;
  --kt-dim: #71717C;
  --kt-dim-2: #7C7C86;     /* was #5E5E69 - 2.97:1, below AA */
  --kt-dim-3: #7A7A84;     /* was #5A5A64 - 2.90:1, below AA */
  --kt-h2-dim: #62626C;    /* was #54545E - 2.64:1, below AA large */
  /* Decorative ink, split by the job it does. Both are aria-hidden, so neither
     owes AA — but a separator nobody can see is not separating anything.
     Measured against the page background rather than guessed. */
  --kt-ghost: #4F4F58;      /* card index numerals — present, deliberately faint (2.44:1) */
  --kt-sep: #5E5E66;        /* separators between links — a visible divider (3.08:1) */
  --kt-dot-idle: #2C2C34;
  --kt-marq-solid: #62626F;   /* was #4A4A56 - 2.27:1 */
  --kt-marq-stroke: #74748A;  /* outline reads lighter than solid, so it runs brighter than --kt-marq-solid to match it */

  /* Lines and panels */
  --kt-hair: rgba(255, 255, 255, .06);
  --kt-hair-strong: rgba(255, 255, 255, .08);
  --kt-card-bg: linear-gradient(165deg, #15151B 0%, #0E0E12 65%);
  --kt-frame-bg: #101014;

  /* Accent tints. Literal rgba() so the page still renders correctly where
     color-mix() is unsupported; config.js recomputes all of them from
     --kt-accent whenever the accent changes. */
  --kt-a-07: rgba(249, 72, 3, .07);
  --kt-a-09: rgba(249, 72, 3, .09);
  --kt-a-13: rgba(249, 72, 3, .13);
  --kt-a-15: rgba(249, 72, 3, .15);
  --kt-a-26: rgba(249, 72, 3, .26);
  --kt-a-28: rgba(249, 72, 3, .28);
  --kt-a-36: rgba(249, 72, 3, .36);
  --kt-a-38: rgba(249, 72, 3, .38);
  --kt-a-40: rgba(249, 72, 3, .40);
  --kt-a-45: rgba(249, 72, 3, .45);
  --kt-a-70: rgba(249, 72, 3, .70);
  --kt-a-mid: #FBA181;                     /* accent lightened 55% toward white */

  /* Rhythm */
  --kt-pad-x: clamp(20px, 5vw, 72px);
  --kt-maxw: 1160px;

  /* Fluid type scale */
  /* Floor lowered from the handoff's 40px: below ~385px the vw term stops
     scaling, and a 40px floor clipped "Understand." inside the line mask
     on 320px phones. Above 385px this is identical to the original. */
  --kt-fs-hero: clamp(32px, 10.4vw, 136px);
  --kt-fs-h2: clamp(28px, 5.4vw, 66px);
  --kt-fs-cta: clamp(28px, 5.6vw, 74px);
  --kt-fs-card: clamp(22px, 2.8vw, 38px);
  --kt-fs-step: clamp(21px, 3.2vw, 36px);
  --kt-fs-marq: clamp(24px, 4.4vw, 54px);
  --kt-fs-overline: clamp(11px, 1.3vw, 13px);
  --kt-fs-body: clamp(14px, 1.7vw, 17px);
  --kt-fs-num: clamp(12px, 1.4vw, 15px);

  /* Motion */
  --kt-marq-dur: 36s;
  --kt-marq-dur-alt: 45s;
  --kt-ease-out: cubic-bezier(.22, .66, .22, 1);
  --kt-ease-rise: cubic-bezier(.16, .84, .24, 1);
}

/* ---------- Base --------------------------------------------------------- */
* { box-sizing: border-box; }

/* Class selectors outrank the user agent's `[hidden] { display: none }`,
   so make the attribute win everywhere. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;                       /* clip, not hidden: keeps position:sticky viewport-bound */
  background: var(--kt-bg);
  color: var(--kt-ink);
  font-family: var(--kt-body), var(--kt-fallback);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; transition: color .25s; }
a:hover { color: var(--kt-accent); }

::selection { background: var(--kt-accent); color: var(--kt-bg); }

:focus-visible {
  outline: 2px solid var(--kt-accent);
  outline-offset: 3px;
}

canvas { display: block; }

.kt-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--kt-accent);
  color: var(--kt-bg);
  font-weight: 800;
  font-size: 13px;
  transform: translateY(-160%);
  transition: transform .3s;
}
.kt-skip:focus-visible { transform: translateY(0); color: var(--kt-bg); }

/* ---------- Wordmark ----------------------------------------------------- */
/* One traced <symbol>, three lockups. Inline fills inside the symbol let the
   "kai" half follow --kt-accent and the "tech" half follow currentColor, so
   the real logo re-themes exactly like the rest of the page. */
.kt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kt-logo { display: inline-flex; align-items: center; color: var(--kt-ink); }
.kt-logo:hover { color: var(--kt-ink); }
.kt-logo__mark {
  display: block;
  height: var(--kt-logo-h, 20px);
  width: auto;
  aspect-ratio: 1583 / 330;
}
.kt-logo--curtain { --kt-logo-h: clamp(26px, 4.4vw, 42px); }
.kt-logo--nav     { --kt-logo-h: clamp(17.5px, 2vw, 21.7px); }   /* matches the 104px cap on the project pages */
.kt-logo--footer  { --kt-logo-h: 18px; }

/* ---------- Shared bits -------------------------------------------------- */
.kt-overline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--kt-fs-overline);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--kt-accent);
}
.kt-overline--center { justify-content: center; }
.kt-overline--padded { padding: 0 var(--kt-pad-x); }
.kt-overline__bar {
  flex: none;
  width: 30px;
  height: 2px;
  background: var(--kt-accent);
}
.kt-overline__rule {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent);
}

.kt-h2 {
  margin-top: clamp(18px, 3vh, 28px);
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 800;
  font-size: var(--kt-fs-h2);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--kt-ink);
}
.kt-h2--tight { margin-top: clamp(14px, 2.5vh, 24px); line-height: 1.1; }
.kt-h2__dim { color: var(--kt-h2-dim); }

/* ---------- Intro curtain ------------------------------------------------ */
/* Purely CSS so a JS failure can never leave the page covered. */
.kt-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--kt-bg);
  pointer-events: none;
  will-change: transform;
  animation: kt-curtain-up .56s cubic-bezier(.7, 0, .24, 1) .65s forwards;
}
.kt-curtain__track {
  width: min(170px, 40vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.kt-curtain__track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--kt-accent);
  transform: translateX(-100%);
  animation: kt-bar .8s cubic-bezier(.65, 0, .35, 1) .1s forwards;
}
.kt-curtain.is-done { display: none; }

/* ---------- Fixed nav ---------------------------------------------------- */
.kt-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--kt-pad-x);   /* same gutter as the sections below, and as the project pages */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
.kt-nav.is-scrolled {
  background: rgba(10, 10, 12, .78);
  border-bottom-color: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.kt-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
  font-size: clamp(12px, 1.4vw, 13.5px);
  font-weight: 700;
}
.kt-nav__links > a { color: var(--kt-body-1); }
.kt-nav__links > a:hover { color: var(--kt-ink); }
.kt-nav__cta {
  color: var(--kt-accent);
  border: 1px solid var(--kt-a-45);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .25s, color .25s;
}
.kt-nav__cta:hover { background: var(--kt-accent); color: var(--kt-bg); }
.kt-nav__cta:active { transform: scale(.97); }

/* ---------- Hero --------------------------------------------------------- */
.kt-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(110px, 16vh, 180px) var(--kt-pad-x) clamp(70px, 10vh, 110px);
}
.kt-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kt-hero__glow {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(75vw, 880px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kt-a-15) 0%, transparent 62%);
  pointer-events: none;
  will-change: transform;
}
.kt-hero__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 32% 42%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 95% 85% at 32% 42%, #000 25%, transparent 72%);
  pointer-events: none;
}
.kt-hero__glow2 {
  position: absolute;
  bottom: -28%;
  left: -16%;
  width: min(60vw, 700px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kt-a-09) 0%, transparent 60%);
  pointer-events: none;
  will-change: transform;
  animation: kt-drift 14s ease-in-out infinite alternate;
}
.kt-hero__inner {
  position: relative;
  max-width: 1500px;
  will-change: transform;
}
.kt-hero__title {
  margin-top: clamp(22px, 4vh, 40px);
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 800;
  font-size: var(--kt-fs-hero);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.kt-hero__title .kt-dot { color: var(--kt-accent); }
/* padding/margin pair keeps descenders from being clipped by the mask */
.kt-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .07em;
  margin-bottom: -.07em;
}
.kt-mask > span { display: block; will-change: transform; }

.kt-sheen {
  background: linear-gradient(90deg,
    var(--kt-accent) 0%,
    var(--kt-a-mid) 50%,
    var(--kt-accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: kt-sheen 5s linear infinite;
}

.kt-pills {
  margin-top: clamp(26px, 4.5vh, 46px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.kt-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600;
  color: var(--kt-ink-2);
}
.kt-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kt-accent);
}

.kt-scrollhint {
  transition: opacity .45s;
  margin-top: clamp(40px, 8vh, 80px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--kt-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.kt-scrollhint__track {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.kt-scrollhint__track i {
  position: absolute;
  inset: 0;
  background: var(--kt-accent);
  animation: kt-line 2.1s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* ---------- Process ------------------------------------------------------ */
.kt-process {
  position: relative;
  padding: clamp(90px, 15vh, 170px) var(--kt-pad-x) clamp(70px, 10vh, 120px);
}
.kt-process__inner { max-width: var(--kt-maxw); margin: 0 auto; }

.kt-steps { position: relative; margin-top: clamp(44px, 8vh, 84px); }
.kt-steps__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.kt-steps__base { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 2; }
.kt-steps__main { fill: none; stroke: var(--kt-accent); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.kt-steps__loop {
  fill: none;
  stroke: var(--kt-accent);
  stroke-width: 2;
  stroke-dasharray: 5 9;
  opacity: 0;
  transition: opacity .9s;
  animation: kt-ants 1.6s linear infinite;    /* marching ants: 06 → 01 */
}

.kt-step {
  display: grid;
  grid-template-columns: clamp(52px, 8vw, 90px) 1fr;
  align-items: start;
}
.kt-step__rail { position: relative; height: 100%; }
.kt-step__dot {
  position: absolute;
  left: 50%;
  top: calc(clamp(18px, 3vh, 34px) + clamp(12px, 1.8vw, 20px));
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kt-bg);
  border: 2px solid var(--kt-dot-idle);
  transition: background .4s, border-color .4s, box-shadow .4s, transform .3s var(--kt-ease-out);
}
/* step 06 sits inside the kaizen box, so its dot drops by the box padding */
.kt-step__dot--boxed { top: calc(clamp(18px, 3vh, 34px) + clamp(16px, 2.6vh, 26px) + clamp(12px, 1.8vw, 20px)); }
.kt-step__dot.is-active {
  background: var(--kt-accent);
  border-color: var(--kt-accent);
  box-shadow: 0 0 16px 2px var(--kt-a-38);
}

.kt-step__body { padding: clamp(18px, 3vh, 34px) 0 clamp(20px, 3.5vh, 38px); }
.kt-step__body--last { padding-bottom: clamp(8px, 1.5vh, 16px); }
.kt-step__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 400;
}
.kt-step__num {
  font-family: var(--kt-head), var(--kt-fallback);
  font-weight: 700;
  font-size: var(--kt-fs-num);
  letter-spacing: .14em;
  color: var(--kt-accent);
}
.kt-step__title {
  font-family: var(--kt-head), var(--kt-fallback);
  font-weight: 700;
  font-size: var(--kt-fs-step);
  letter-spacing: -.01em;
  color: var(--kt-ink);
  transition: color .3s;
}
.kt-step__title--accent { color: var(--kt-accent); }
.kt-step__body:hover .kt-step__title { color: var(--kt-accent); }
.kt-step:hover .kt-step__dot { border-color: var(--kt-accent); transform: translateX(-50%) scale(1.3); }
.kt-step__desc {
  margin-top: 10px;
  max-width: 600px;
  color: var(--kt-body-2);
  font-size: var(--kt-fs-body);
  line-height: 1.65;
}
.kt-step__desc--bright { color: var(--kt-ink-3); }

.kt-kaizen {
  background: var(--kt-a-07);
  border: 1px solid var(--kt-a-26);
  border-radius: 18px;
  padding: clamp(16px, 2.6vh, 26px) clamp(16px, 3vw, 28px);
}
.kt-chip {
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border: 1px solid var(--kt-a-40);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--kt-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Projects ----------------------------------------------------- */
.kt-proj { position: relative; }
.kt-proj__sticky { position: relative; padding: clamp(90px, 15vh, 150px) 0 clamp(30px, 5vh, 60px); }
.kt-proj__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: var(--kt-maxw);
  margin: 0 auto;
  padding: 0 var(--kt-pad-x);
}
/* The section's one factual line: what the four systems have in common and
   which of them are already carrying real traffic. Capped short of the counter
   so the two never collide on a wide screen. */
.kt-proj__lead {
  max-width: 62ch;
  margin-top: clamp(14px, 2.2vh, 22px);
  color: var(--kt-ink-2);
  font-size: clamp(14px, 1.6vw, 16.5px);
  line-height: 1.7;
}

.kt-proj__meter {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 8px;
}
.kt-proj__rail {
  display: block;
  width: clamp(90px, 12vw, 150px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.kt-proj__rail i {
  display: block;
  height: 100%;
  background: var(--kt-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.kt-proj__counter {
  font-family: var(--kt-head), var(--kt-fallback);
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .12em;
  color: var(--kt-accent);
  white-space: nowrap;
}
.kt-proj__track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(30px, 6vh, 54px);
  padding: 0 var(--kt-pad-x);
  will-change: transform;
}

/* Pinned horizontal showcase — JS adds .is-pinned at ≥900px */
.kt-proj.is-pinned .kt-proj__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 60px 0 0;              /* clears the fixed nav on short viewports */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
/* A definite track height lets .kt-shot flex, so the whole card always fits
   the viewport instead of overflowing the sticky frame on short screens. */
/* The track takes whatever the header leaves, rather than a guessed
   `100vh - 250px`. The guess was already 10px short once the section gained a
   lead paragraph, and the sticky frame's overflow:hidden ate the bottom edge of
   every card without a word. */
/* Everything above the track is height the cards do not get. In the pinned
   showcase the header pays for itself twice — once in its own pixels and once
   in the picture it takes off every card — so it runs tight here. */
.kt-proj.is-pinned .kt-proj__sticky { padding-top: clamp(22px, 4vh, 54px); }
.kt-proj.is-pinned .kt-proj__lead {
  margin-top: 10px;
  font-size: clamp(13px, 1.2vw, 15px);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.kt-proj.is-pinned .kt-proj__track {
  flex-direction: row;
  width: max-content;
  flex: 1;
  min-height: 0;
  max-height: 620px;
  margin-top: clamp(14px, 2.4vh, 34px);
}
.kt-proj.is-pinned .kt-card { width: min(66vw, 620px); flex-shrink: 0; }
/* Pinned cards live inside a fixed-height track, so the frame cannot claim a
   ratio's worth of height — on a 720px laptop that overflows the track. Here
   the frame takes whatever the text leaves instead, and the text is held to a
   fixed number of lines so "whatever is left" is the same on every card. */
.kt-proj.is-pinned .kt-shot { aspect-ratio: auto; flex: 1; min-height: 90px; }
.kt-proj.is-pinned .kt-card__title,
.kt-proj.is-pinned .kt-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Clamping caps the copy but does not level it — a one-line title still sits
   shorter than a two-line one, and the frame below inherits the difference.
   Reserving the lines makes every text block the same height. The em values
   are the fallback for browsers without `lh`. */
.kt-proj.is-pinned .kt-card__title {
  -webkit-line-clamp: 1;
  min-height: 1.15em;
  min-height: 1lh;
}
.kt-proj.is-pinned .kt-card__desc {
  -webkit-line-clamp: 2;
  min-height: 3.3em;
  min-height: 2lh;
}
/* A 720px-tall laptop leaves the pinned track about 400px. Spending three
   lines of description there squeezes the screenshot to a strip — the card's
   picture is worth more than its third line. */
@media (max-height: 820px) {
  .kt-proj.is-pinned .kt-card { padding: clamp(16px, 2vw, 22px); gap: 12px; }
}

.kt-proj.is-pinned .kt-proj__meter { display: flex; }

/* The card is the target, not just the words at the bottom of it. One
   stretched pseudo-element keeps a single link in the accessibility tree
   while the whole card takes the click. */
.kt-card { cursor: pointer; }
.kt-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 22px);
  border: 1px solid var(--kt-hair-strong);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 34px);
  background: var(--kt-card-bg);
  transition: border-color .35s, transform .35s var(--kt-ease-out), box-shadow .35s;
}
.kt-card:hover,
.kt-card:focus-within {
  border-color: var(--kt-a-40);
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .7), 0 0 34px -14px var(--kt-a-38);
}
.kt-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kt-card__tag {
  border: 1px solid var(--kt-a-36);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kt-accent);
  white-space: nowrap;
}
.kt-card__index {
  font-family: var(--kt-head), var(--kt-fallback);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--kt-ghost);
}
.kt-card__title {
  font-family: var(--kt-head), var(--kt-fallback);
  font-weight: 700;
  font-size: var(--kt-fs-card);
  letter-spacing: -.01em;
  color: var(--kt-ink);
}
.kt-card__desc {
  max-width: 560px;
  color: var(--kt-body-1);
  font-size: clamp(14px, 1.6vw, 16.5px);
  line-height: 1.7;
}
.kt-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 2px;
  color: var(--kt-accent);
  font-weight: 800;
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: .02em;
  cursor: pointer;
  transition: gap .3s;
}
.kt-card__link:hover { gap: 18px; color: var(--kt-accent); }
.kt-card__link:active { opacity: .75; }
/* No real case-study URL yet: keep it honest rather than a link that lies. */
.kt-card__link.is-inert { cursor: default; }
.kt-card__link.is-inert:hover { gap: 10px; }

/* Fake browser chrome around the screenshot placeholder */
/* A fixed ratio, not flex:1 — filling the leftover space made the frame a
   different height on every card, because the cards' descriptions are
   different lengths. A ratio ties the height to the width instead, so a row
   of cards lines up whatever the copy does. */
.kt-shot {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: var(--kt-frame-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kt-shot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.kt-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kt-hair);
  background: rgba(255, 255, 255, .02);
}
.kt-shot__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.kt-shot__bar i.is-accent { background: var(--kt-a-70); }
.kt-shot__bar span {
  margin-left: 10px;
  font-family: var(--kt-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--kt-dim-2);
}
.kt-shot__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .028) 0, rgba(255, 255, 255, .028) 10px,
    transparent 10px, transparent 22px);
}
.kt-shot__body span {
  padding: 0 16px;
  font-family: var(--kt-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
  color: var(--kt-dim-2);
}
/* When a real screenshot replaces the placeholder */
.kt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Skills marquee ----------------------------------------------- */
.kt-skills {
  position: relative;
  padding: clamp(80px, 12vh, 140px) 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  overflow: hidden;
}
.kt-marquees {
  margin-top: clamp(30px, 5vh, 50px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.5vh, 36px);
}
.kt-marquee { width: 100%; overflow: hidden; }
.kt-marquee__row { display: flex; width: max-content; }
.kt-marquee__row[data-marq="l"] { animation: kt-marq-l var(--kt-marq-dur) linear infinite; }
.kt-marquee__row[data-marq="r"] { animation: kt-marq-r var(--kt-marq-dur-alt) linear infinite; }
.kt-marquee__group { display: flex; }
.kt-marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
  padding-right: clamp(22px, 3vw, 44px);
  white-space: nowrap;
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 700;
  font-size: var(--kt-fs-marq);
  letter-spacing: -.01em;
  color: var(--kt-marq-solid);
}
.kt-marquee__item::after {
  content: '';
  flex: none;
  display: block;
  width: clamp(6px, .9vw, 9px);
  height: clamp(6px, .9vw, 9px);
  border-radius: 50%;
  background: var(--kt-accent);
}
/* Outlining a heavy geometric face closes its counters: at 700 the bowls of
   a, e, o and g filled in and the row read as blur rather than type. The fix is
   the weight, not the stroke — a 600 of the text face has counters open enough
   to survive being hollowed out. The stroke is tied to the type size too, so
   one outline holds from 24px to 54px instead of going chunky then wiry. */
.kt-marquee__group--outline .kt-marquee__item {
  font-family: var(--kt-body), var(--kt-fallback);
  font-weight: 600;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: max(1.2px, .03em) var(--kt-marq-stroke);
}
.kt-marquee__group--outline .kt-marquee__item::after { -webkit-text-stroke: 0; }

/* ---------- CTA ---------------------------------------------------------- */
.kt-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(110px, 18vh, 210px) var(--kt-pad-x);
}
.kt-cta__glow {
  position: absolute;
  left: 50%;
  bottom: -45%;
  transform: translateX(-50%);
  width: min(90vw, 1000px);
  aspect-ratio: 1.6 / 1;
  background: radial-gradient(ellipse, var(--kt-a-13) 0%, transparent 62%);
  pointer-events: none;
}
.kt-cta__inner { position: relative; max-width: 1000px; margin: 0 auto; }
.kt-cta__title {
  margin-top: clamp(18px, 3vh, 30px);
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 800;
  font-size: var(--kt-fs-cta);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--kt-ink);
  text-wrap: balance;
}
.kt-cta__act { margin-top: clamp(30px, 5vh, 52px); }
.kt-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2.2vh, 20px) clamp(28px, 4vw, 46px);
  border-radius: 999px;
  background: var(--kt-accent);
  color: var(--kt-bg);
  font-weight: 800;
  font-size: clamp(15px, 1.8vw, 18px);
  box-shadow: 0 12px 44px var(--kt-a-28);
  transition: transform .25s, filter .25s;
}
.kt-btn:hover { transform: translateY(-3px); filter: brightness(1.1); color: var(--kt-bg); }
.kt-btn:active { transform: translateY(-1px) scale(.985); }
.kt-btn span { font-size: 18px; }
.kt-cta__contacts {
  margin-top: clamp(26px, 4vh, 42px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px clamp(18px, 4vw, 44px);
  color: var(--kt-body-1);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
}
.kt-cta__sep { color: var(--kt-sep); }

/* ---------- Contact form ------------------------------------------------- */
.kt-cta__lead {
  max-width: 54ch;
  margin: clamp(16px, 2.6vh, 24px) auto 0;
  color: var(--kt-body-1);
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.65;
}
.kt-formwrap {
  max-width: 640px;
  margin: clamp(28px, 5vh, 46px) auto 0;
  text-align: left;                    /* the section is centred; forms must not be */
}
.kt-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--kt-hair-strong);
  border-radius: 24px;
  background: var(--kt-card-bg);
}
.kt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kt-field--wide, .kt-form__kind, .kt-form__foot { grid-column: 1 / -1; }

.kt-field__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--kt-body-1);
}
.kt-req { color: var(--kt-accent); }

.kt-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  color: var(--kt-ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.kt-input::placeholder { color: var(--kt-dim); }

/* A select styled like the inputs loses the arrow the OS would draw, so it
   gets one back — otherwise it reads as a text field that will not type. */
.kt-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--kt-ink-2) 50%),
                    linear-gradient(135deg, var(--kt-ink-2) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-repeat: no-repeat;
  cursor: pointer;
}
.kt-select:invalid { color: var(--kt-dim); }
.kt-select option { background: #15151B; color: var(--kt-ink); }
.kt-input:hover { border-color: rgba(255, 255, 255, .22); }
.kt-input:focus {
  outline: none;
  border-color: var(--kt-accent);
  box-shadow: 0 0 0 3px var(--kt-a-15);
  background: rgba(255, 255, 255, .05);
}
/* Two rows, as the markup asks: the note is optional and a tall empty box
   reads as another thing to fill in. It still grows by dragging. */
.kt-textarea { min-height: 72px; resize: vertical; line-height: 1.6; }

.kt-input[aria-invalid="true"] { border-color: var(--kt-danger); }
.kt-field__err {
  min-height: 0;
  color: var(--kt-danger);
  font-size: 12.5px;
  line-height: 1.4;
}
.kt-field__err:empty { display: none; }

/* Segmented company / individual choice, built from the page's pill vocabulary */
.kt-form__kind { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.kt-form__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kt-body-1);
}
.kt-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  color: var(--kt-ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.kt-radio:hover { border-color: rgba(255, 255, 255, .3); }
.kt-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.kt-radio:has(input:checked) {
  border-color: var(--kt-a-45);
  background: var(--kt-a-07);
  color: var(--kt-ink);
}
.kt-radio input:checked {
  border-color: var(--kt-accent);
  background: var(--kt-accent);
  box-shadow: inset 0 0 0 3px var(--kt-bg);
}
.kt-radio input:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 3px; }
/* Fallback for engines without :has() — the dot alone still shows the state. */
@supports not selector(:has(*)) {
  .kt-radio { border-color: rgba(255, 255, 255, .13); }
}

.kt-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 2px;
}
.kt-btn--submit { font-size: clamp(14px, 1.6vw, 16px); padding: 15px clamp(24px, 3vw, 34px); }
.kt-btn--submit[disabled] { opacity: .6; cursor: progress; transform: none; filter: none; }

.kt-form__status {
  flex: 1;
  min-width: 200px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kt-body-1);
}
.kt-form__status[data-tone="ok"] { color: var(--kt-success); }
.kt-form__status[data-tone="error"] { color: var(--kt-danger); }
.kt-form__status:empty { display: none; }

/* Bot trap: off-screen rather than display:none, which some bots skip. */
.kt-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kt-cta__or {
  margin-top: clamp(24px, 4vh, 38px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kt-muted);
}
.kt-cta__contacts { margin-top: 12px; }

@media (max-width: 559px) {
  .kt-form { grid-template-columns: 1fr; }
}

/* ---------- Project case page -------------------------------------------- */
.kt-case { padding: clamp(96px, 14vh, 150px) var(--kt-pad-x) clamp(60px, 9vh, 100px); }
.kt-case__head { max-width: var(--kt-maxw); margin: 0 auto clamp(34px, 6vh, 60px); }
.kt-case__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(20px, 3.5vh, 34px);
  color: var(--kt-body-1);
  font-size: 13.5px;
  font-weight: 700;
  transition: gap .25s, color .25s;
}
.kt-case__back:hover { gap: 14px; color: var(--kt-accent); }
.kt-case__title {
  margin-top: clamp(14px, 2.5vh, 24px);
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 68px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--kt-ink);
  text-wrap: balance;
}
.kt-case__lede {
  margin-top: clamp(14px, 2.4vh, 22px);
  max-width: 62ch;
  color: var(--kt-body-1);
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.65;
}

/* The designed body lives here. Its own CSS is scoped to this container at
   integration time so it can never reach the site chrome around it. */
.kt-case__body { max-width: var(--kt-maxw); margin: 0 auto; }

.kt-case__cta {
  max-width: var(--kt-maxw);
  margin: clamp(50px, 9vh, 90px) auto 0;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--kt-a-26);
  border-radius: 24px;
  background: var(--kt-a-07);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.kt-case__ctaText {
  flex: 1;
  min-width: 240px;
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kt-ink);
  text-wrap: balance;
}

/* ---------- Footer ------------------------------------------------------- */
.kt-footer {
  border-top: 1px solid var(--kt-hair);
  padding: clamp(26px, 4vh, 40px) var(--kt-pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.kt-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.kt-footer__tagline { font-size: 11px; letter-spacing: .06em; color: var(--kt-dim-3); }
.kt-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 32px);
  font-size: 13px;
  font-weight: 600;
}
.kt-footer__links a { color: var(--kt-muted-2); }
.kt-footer__links a:hover { color: var(--kt-ink); }
.kt-footer__copy { font-size: 12px; color: var(--kt-dim-3); }

/* ---------- Theme panel (client-side font / accent switcher) ------------- */
.kt-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kt-a-45);
  border-radius: 999px;
  background: rgba(10, 10, 12, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--kt-accent);
  font-size: 17px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s;
}
.kt-theme-toggle:hover { background: var(--kt-accent); color: var(--kt-bg); transform: translateY(-2px); }

.kt-theme {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 91;
  width: min(300px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(14, 14, 18, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  font-size: 13px;
  display: none;
}
.kt-theme.is-open { display: block; }
.kt-theme__title {
  font-family: var(--kt-head), var(--kt-fallback);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 4px;
  color: var(--kt-ink);
}
.kt-theme p { color: var(--kt-dim); font-size: 11.5px; line-height: 1.5; }
/* Specificity has to beat `.kt-theme p` above. */
.kt-theme .kt-theme__sample {
  font-family: var(--kt-display), var(--kt-fallback);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kt-ink);
}
.kt-theme__group { margin-top: 18px; }
.kt-theme__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kt-muted);
}
.kt-theme__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-theme__opt {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: var(--kt-body-1);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.kt-theme__opt:hover { color: var(--kt-ink); border-color: rgba(255, 255, 255, .3); }
.kt-theme__opt[aria-pressed="true"] {
  border-color: var(--kt-accent);
  background: var(--kt-a-15);
  color: var(--kt-accent);
}
.kt-theme__swatches { display: flex; gap: 8px; }
.kt-theme__swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset;
  cursor: pointer;
  padding: 0;
}
.kt-theme__swatch[aria-pressed="true"] { border-color: var(--kt-ink); }
.kt-theme__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--kt-body-1);
  font-weight: 600;
}
.kt-theme input[type="range"] { width: 130px; accent-color: var(--kt-accent); }
.kt-theme input[type="checkbox"] { accent-color: var(--kt-accent); width: 16px; height: 16px; }
.kt-theme__reset {
  margin-top: 18px;
  width: 100%;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: transparent;
  color: var(--kt-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.kt-theme__reset:hover { color: var(--kt-ink); border-color: rgba(255, 255, 255, .3); }

/* ---------- Language switcher -------------------------------------------- */
.kt-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(11px, 1.3vw, 12.5px);
  font-weight: 800;
  letter-spacing: .1em;
}
.kt-lang a { color: var(--kt-muted); }
.kt-lang a:hover { color: var(--kt-ink); }
.kt-lang a[aria-current] { color: var(--kt-ink); cursor: default; }
.kt-lang__sep { color: var(--kt-sep); }

/* ---------- Current section in the nav ----------------------------------- */
/* A one-pager still needs to say where you are. */
.kt-nav__links > a { position: relative; }
.kt-nav__links > a:not(.kt-nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--kt-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--kt-ease-out);
}
.kt-nav__links > a[aria-current]:not(.kt-nav__cta) { color: var(--kt-ink); }
.kt-nav__links > a[aria-current]:not(.kt-nav__cta)::after { transform: scaleX(1); }
.kt-nav__cta[aria-current] { background: var(--kt-accent); color: var(--kt-bg); }

/* ---------- Kaizen chip (returns to step 01) ----------------------------- */
.kt-chip:hover {
  background: var(--kt-a-15);
  border-color: var(--kt-a-70);
  color: var(--kt-accent);
}
.kt-chip:active { transform: scale(.97); }

/* ---------- Marquee: hold still while it is being read ------------------- */
@media (hover: hover) {
  .kt-marquee:hover .kt-marquee__row { animation-play-state: paused; }
}
.kt-marquee:focus-within .kt-marquee__row { animation-play-state: paused; }

/* ---------- Hero: retire the scroll hint once you have scrolled ---------- */
.kt-hero.is-left .kt-scrollhint { opacity: 0; }

/* ---------- Short viewports ---------------------------------------------- */
/* Tighten the hero's rhythm (never its type scale) so the scroll cue stays
   above the fold on 720-800px laptops. */
@media (max-height: 800px) {
  .kt-hero {
    padding-top: clamp(88px, 12vh, 130px);
    padding-bottom: clamp(44px, 6vh, 72px);
  }
  .kt-hero__title { margin-top: clamp(14px, 2.4vh, 24px); }
  .kt-pills { margin-top: clamp(18px, 3vh, 30px); }
  .kt-scrollhint { margin-top: clamp(22px, 4vh, 40px); }
}

/* ---------- Touch targets ------------------------------------------------ */
/* Padding grows the hit area to >=44px; the matching negative margin keeps the
   visual layout byte-identical to the design. */
@media (pointer: coarse) {
  .kt-nav__links > a:not(.kt-nav__cta),
  .kt-footer__links a,
  .kt-card__link,
  .kt-logo { padding-block: 14px; margin-block: -14px; }
  .kt-lang a { padding-block: 15px; margin-block: -15px; }
  /* iOS Safari zooms the whole page in when a text field under 16px takes
     focus, and never zooms back out — so the rest of the form is filled in
     at 1.3x with the layout shoved sideways. 16px is the exact threshold. */
  .kt-input { font-size: 16px; }
  /* The form's first interaction, and the only control still under the 44px
     touch target. Labels carry meaning while you type, so they come up too. */
  .kt-radio { min-height: 44px; }
  .kt-field__label,
  .kt-form__legend { font-size: 13.5px; }
  .kt-nav__cta { padding-block: 13px; margin-block: -5px; }
  .kt-chip { padding-block: 14px; margin-block: -7px; }
  .kt-cta__contacts { gap: 22px clamp(18px, 4vw, 44px); }
  .kt-cta__contacts a { padding-block: 13px; margin-block: -13px; }
  .kt-nav__links > a:not(.kt-nav__cta)::after { bottom: 8px; }
}

/* ---------- Keyframes ---------------------------------------------------- */
@keyframes kt-marq-l { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes kt-marq-r { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
@keyframes kt-ants   { from { stroke-dashoffset: 0; }          to { stroke-dashoffset: -84; } }
@keyframes kt-sheen  { from { background-position: 0% 0; }     to { background-position: -200% 0; } }
@keyframes kt-bar    { to { transform: translateX(0); } }
@keyframes kt-curtain-up { to { transform: translateY(-101%); } }
@keyframes kt-drift  { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -50px) scale(1.12); } }
@keyframes kt-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Reduced motion ----------------------------------------------- */
/* One switch: the OS preference, or KT_CONFIG.reduceMotion via .kt-no-motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kt-curtain { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
}
.kt-no-motion { scroll-behavior: auto; }
.kt-no-motion .kt-curtain { display: none; }
.kt-no-motion *, .kt-no-motion *::before, .kt-no-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
}

/* ---------- Small screens ------------------------------------------------ */
@media (max-width: 560px) {
  .kt-nav__links { gap: 14px; }
  .kt-footer { justify-content: flex-start; }
}

/* The nav has to keep the CTA reachable before it keeps the section links. */
@media (max-width: 420px) {
  .kt-nav { padding-inline: 14px; }
  .kt-nav__links { gap: 10px; }
  .kt-nav__cta { padding-inline: 13px; }
}
/* On a phone the nav's job is brand, language and contact. Section jumps are
   secondary on a page you scroll anyway, and the footer still lists them. */
@media (max-width: 480px) {
  .kt-nav__links > a:not(.kt-nav__cta) { display: none; }

  /* The label wraps at this width, and as a flex item the arrow then floated
     in the vertical middle of the pill, detached from the words. As a block
     the text wraps naturally and the arrow trails the last word — and a
     full-width primary action is the better mobile pattern anyway. */
  .kt-btn {
    display: block;
    width: 100%;
    padding-inline: 22px;
    text-align: center;
  }
  .kt-btn span { display: inline; margin-left: 10px; }
}