/* Company site at kavachtrade.com (PRD §44.53, guardians §44.53 4 Nov 2026). Self-contained: no external fonts, scripts or trackers. All motion is
   CSS (the page allows no scripts); everything stands still for visitors who ask for reduced motion. */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

@property --co-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --co-bg: #fbfbff;
  --co-bg-alt: #f3f4fb;
  --co-surface: #ffffff;
  --co-glass: rgb(255 255 255 / 0.72);
  --co-ink: #0f172a;
  --co-ink-2: #475569;
  --co-ink-3: #64748b;
  --co-line: #e3e6f0;
  --co-brand: #4f46e5;
  --co-brand-ink: #ffffff;
  --co-brand-soft: #eef2ff;
  --co-violet: #8b5cf6;
  --co-cyan: #06b6d4;
  --co-pink: #ec4899;
  --co-amber: #f59e0b;
  --co-blob-a: #c7d2fe;
  --co-blob-b: #a5f3fc;
  --co-blob-c: #fbcfe8;
  --co-dots: rgb(79 70 229 / 0.13);
  --co-orbit: rgb(79 70 229 / 0.22);
  --co-planet: #ffffff;
  --co-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 10px 30px rgb(15 23 42 / 0.07);
  --co-shadow-lg: 0 2px 4px rgb(15 23 42 / 0.05), 0 24px 60px rgb(79 70 229 / 0.16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --co-bg: #080c1a;
    --co-bg-alt: #0c1226;
    --co-surface: #111830;
    --co-glass: rgb(17 24 48 / 0.72);
    --co-ink: #e8ecf7;
    --co-ink-2: #aab4cc;
    --co-ink-3: #8691ab;
    --co-line: #222c47;
    --co-brand: #818cf8;
    --co-brand-ink: #0b1020;
    --co-brand-soft: #1c2246;
    --co-blob-a: #312e81;
    --co-blob-b: #134e4a;
    --co-blob-c: #4a1d3f;
    --co-dots: rgb(165 180 252 / 0.1);
    --co-orbit: rgb(165 180 252 / 0.25);
    --co-planet: #151d3a;
    --co-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.3);
    --co-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 60px rgb(99 102 241 / 0.25);
    color-scheme: dark;
  }
}

.kt-co,
.kt-co * {
  box-sizing: border-box;
}
.kt-co {
  margin: 0;
  background: var(--co-bg);
  color: var(--co-ink);
  font:
    400 16px/1.6 'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.kt-co :where(h1, h2, h3, p, ol, ul) {
  margin: 0;
}
.kt-co :where(a) {
  color: inherit;
}
.kt-co-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.kt-co-skip {
  position: absolute;
  left: -9999px;
}
.kt-co-skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  background: var(--co-surface);
  padding: 8px 12px;
  border-radius: 8px;
}

/* ---------- moving background ---------- */
.kt-co-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.kt-co-blob {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.kt-co-blob--a {
  background: var(--co-blob-a);
  top: -18vmax;
  right: -10vmax;
  animation: co-drift-a 26s ease-in-out infinite alternate;
}
.kt-co-blob--b {
  background: var(--co-blob-b);
  top: 30vh;
  left: -20vmax;
  animation: co-drift-b 32s ease-in-out infinite alternate;
}
.kt-co-blob--c {
  background: var(--co-blob-c);
  bottom: -24vmax;
  right: 10vw;
  opacity: 0.4;
  animation: co-drift-c 38s ease-in-out infinite alternate;
}
.kt-co-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--co-dots) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 30%, transparent 80%);
}
@keyframes co-drift-a {
  to {
    transform: translate(-12vmax, 10vmax) scale(1.15);
  }
}
@keyframes co-drift-b {
  to {
    transform: translate(14vmax, -8vmax) scale(0.9);
  }
}
@keyframes co-drift-c {
  to {
    transform: translate(-16vmax, -10vmax) scale(1.1);
  }
}

/* ---------- header ---------- */
.kt-co-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--co-glass);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--co-line) 70%, transparent);
  animation: co-drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes co-drop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.kt-co-top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  gap: 16px;
}
.kt-co-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.kt-co-brand--sm {
  font-size: 16px;
}
.kt-co-mark {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #06b6d4);
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  box-shadow: 0 6px 16px rgb(99 102 241 / 0.35);
}
.kt-co-brand:hover .kt-co-mark {
  animation: co-wobble 0.6s ease;
}
@keyframes co-wobble {
  30% {
    transform: rotate(-10deg) scale(1.08);
  }
  60% {
    transform: rotate(8deg);
  }
}
.kt-co-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.kt-co-nav a {
  position: relative;
  text-decoration: none;
  color: var(--co-ink-2);
}
.kt-co-nav a:not(.kt-co-btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--co-brand), var(--co-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.kt-co-nav a:hover {
  color: var(--co-ink);
}
.kt-co-nav a:hover::after {
  transform: scaleX(1);
}
.kt-co-nav a.kt-co-btn {
  color: #ffffff;
}

/* ---------- buttons ---------- */
.kt-co-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 8px 22px rgb(79 70 229 / 0.3);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.kt-co-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(79 70 229 / 0.38);
}
.kt-co-btn:focus-visible,
.kt-co-nav a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--co-brand) 45%, transparent);
  outline-offset: 3px;
}
.kt-co-btn--sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: none;
}
.kt-co-btn--ghost {
  background: var(--co-glass);
  color: var(--co-ink);
  border-color: var(--co-line);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.kt-co-btn--ghost:hover {
  box-shadow: var(--co-shadow);
}
.kt-co-btn--light {
  background: #ffffff;
  color: #312e81;
  box-shadow: 0 10px 30px rgb(15 10 60 / 0.3);
}
.kt-co-btn--shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: co-shine 4.5s ease-in-out 2s infinite;
}
@keyframes co-shine {
  0%,
  60% {
    transform: translateX(-120%);
  }
  85%,
  100% {
    transform: translateX(120%);
  }
}

/* ---------- hero ---------- */
.kt-co-hero {
  padding: 84px 0 88px;
}
.kt-co-hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}
.kt-co-in {
  animation: co-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kt-co-d1 {
  animation-delay: 0.12s;
}
.kt-co-d2 {
  animation-delay: 0.24s;
}
.kt-co-d3 {
  animation-delay: 0.36s;
}
.kt-co-d4 {
  animation-delay: 0.48s;
}
@keyframes co-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
  }
}
.kt-co-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--co-brand);
  background: var(--co-glass);
  border: 1px solid color-mix(in srgb, var(--co-brand) 25%, transparent);
  backdrop-filter: blur(8px);
}
.kt-co-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}
.kt-co-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #10b981;
  animation: co-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes co-ping {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}
.kt-co-hero h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.kt-co-hl {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #06b6d4, #8b5cf6, #4f46e5);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: co-flow 8s linear infinite;
}
@keyframes co-flow {
  to {
    background-position: 300% 0;
  }
}
.kt-co-hl__line {
  position: absolute;
  left: -2%;
  bottom: -0.12em;
  width: 104%;
  height: 0.3em;
  overflow: visible;
  fill: none;
  stroke: var(--co-amber);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: co-draw 1.1s cubic-bezier(0.6, 0, 0.2, 1) 1s forwards;
}
@keyframes co-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.kt-co-lead {
  margin-top: 24px;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--co-ink-2);
  max-width: 580px;
}
.kt-co-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.kt-co-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--co-ink-3);
}
.kt-co-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kt-co-ticks li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, #10b981 18%, transparent) url('/tick.svg') center / 16px no-repeat;
}

/* hero picture */
.kt-co-art {
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  width: 100%;
  justify-self: center;
}
.kt-co-art__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kt-co-art__svg * {
  transform-box: view-box;
}
.kt-co-art__glow {
  transform-origin: 220px 220px;
  animation: co-breathe 6s ease-in-out infinite;
}
@keyframes co-breathe {
  50% {
    transform: scale(1.08);
    opacity: 0.8;
  }
}
.kt-co-orbit {
  fill: none;
  stroke: var(--co-orbit);
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  transform-origin: 220px 220px;
  animation: co-turn 60s linear infinite;
}
.kt-co-orbit--far {
  stroke-dasharray: 2 14;
  animation-duration: 90s;
  animation-direction: reverse;
}
.kt-co-ring {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 2;
  transform-origin: 220px 220px;
  opacity: 0;
  animation: co-radar 4.5s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.kt-co-ring--2 {
  animation-delay: 1.5s;
}
.kt-co-ring--3 {
  animation-delay: 3s;
}
@keyframes co-radar {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
.kt-co-spin {
  transform-origin: 220px 220px;
  animation: co-turn 36s linear infinite;
}
@keyframes co-turn {
  to {
    transform: rotate(360deg);
  }
}
.kt-co-planet {
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-turn 36s linear infinite reverse;
}
.kt-co-planet__bg {
  fill: var(--co-planet);
  stroke: color-mix(in srgb, var(--co-brand) 30%, transparent);
  stroke-width: 1.5;
  filter: drop-shadow(0 8px 14px rgb(79 70 229 / 0.25));
}
.kt-co-planet__ico {
  fill: none;
  stroke: var(--co-brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kt-co-shield {
  transform-origin: 220px 220px;
  animation:
    co-pop 1s cubic-bezier(0.3, 1.5, 0.5, 1) 0.4s both,
    co-float 6s ease-in-out 1.6s infinite;
}
@keyframes co-pop {
  from {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
}
@keyframes co-float {
  50% {
    transform: translateY(-10px);
  }
}
.kt-co-shield__fill {
  opacity: 0;
  animation: co-fade 0.8s ease 1.4s forwards;
  filter: drop-shadow(0 20px 30px rgb(99 102 241 / 0.4));
}
@keyframes co-fade {
  to {
    opacity: 1;
  }
}
.kt-co-shield__line {
  fill: none;
  stroke: #6366f1;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: co-draw 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.5s forwards;
}
.kt-co-shield__tick {
  fill: none;
  stroke: #ffffff;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: co-draw 0.6s ease-out 2s forwards;
}
.kt-co-doodle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: co-draw 1.6s ease 1.8s forwards;
}
.kt-co-doodle--wave {
  stroke: var(--co-pink);
}
.kt-co-doodle--arc {
  stroke: var(--co-cyan);
  animation-delay: 2.2s;
}
.kt-co-star path {
  fill: var(--co-amber);
}
.kt-co-star {
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-twinkle 3.2s ease-in-out infinite;
}
.kt-co-star--2 path {
  fill: var(--co-pink);
}
.kt-co-star--2 {
  animation-delay: 1.1s;
}
.kt-co-star--3 path {
  fill: var(--co-cyan);
}
.kt-co-star--3 {
  animation-delay: 2.1s;
}
@keyframes co-twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
  50% {
    transform: scale(0.5) rotate(45deg);
    opacity: 0.5;
  }
}
.kt-co-plus {
  fill: none;
  stroke: var(--co-violet);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-turn 8s linear infinite;
}
.kt-co-plus--2 {
  stroke: var(--co-cyan);
  animation-duration: 11s;
  animation-direction: reverse;
}
.kt-co-dot {
  fill: var(--co-violet);
  animation: co-bob 4s ease-in-out infinite;
}
.kt-co-dot--2 {
  fill: var(--co-pink);
  animation-delay: 1.3s;
}
.kt-co-dot--3 {
  fill: var(--co-amber);
  animation-delay: 2.4s;
}
@keyframes co-bob {
  50% {
    transform: translateY(-14px);
  }
}

/* ---------- values band ---------- */
.kt-co-band {
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--co-line);
  background: var(--co-glass);
  backdrop-filter: blur(8px);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.kt-co-band__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 28px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--co-ink-2);
  animation: co-marquee 34s linear infinite;
}
.kt-co-band__track i {
  font-style: normal;
  color: var(--co-brand);
  display: inline-block;
  animation: co-turn 6s linear infinite;
}
.kt-co-band:hover .kt-co-band__track {
  animation-play-state: paused;
}
@keyframes co-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- sections ---------- */
.kt-co-sec {
  padding: 104px 0;
}
.kt-co-sec--alt {
  background: color-mix(in srgb, var(--co-bg-alt) 80%, transparent);
  border-block: 1px solid var(--co-line);
}
.kt-co-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--co-brand);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kt-co-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--co-brand), var(--co-cyan));
}
.kt-co-sec h2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.kt-co-sub {
  margin-top: 16px;
  color: var(--co-ink-2);
  font-size: 17px;
  max-width: 640px;
}
.kt-co-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 48px;
}
.kt-co-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* product cards with a turning gradient border on hover */
.kt-co-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  background: var(--co-surface);
  border: 1px solid var(--co-line);
  border-radius: 20px;
  box-shadow: var(--co-shadow);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
  isolation: isolate;
}
.kt-co-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--co-angle), #6366f1, #06b6d4, #ec4899, #f59e0b, #6366f1);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: co-angle 4s linear infinite;
}
@keyframes co-angle {
  to {
    --co-angle: 360deg;
  }
}
.kt-co-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--co-shadow-lg);
}
.kt-co-card:hover::before {
  opacity: 1;
}
.kt-co-card h3,
.kt-co-feat h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.kt-co-card p,
.kt-co-feat p {
  color: var(--co-ink-2);
  font-size: 15px;
}
.kt-co-card p {
  flex: 1;
}
.kt-co-ico {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--co-brand-soft), color-mix(in srgb, var(--co-cyan) 14%, transparent));
  margin-bottom: 6px;
}
.kt-co-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--co-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.kt-co-ico__draw {
  stroke-dasharray: 22;
  animation: co-redraw 3.4s ease-in-out infinite;
}
@keyframes co-redraw {
  0% {
    stroke-dashoffset: 22;
  }
  45%,
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -22;
  }
}
.kt-co-ico__swing {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: co-swing 3s ease-in-out infinite;
}
@keyframes co-swing {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(16deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(6deg);
  }
}
.kt-co-ico__shackle {
  animation: co-unlock 3.2s ease-in-out infinite;
}
@keyframes co-unlock {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
  20%,
  35% {
    transform: translateY(-3px);
  }
}
.kt-co-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--co-brand);
  background: var(--co-brand-soft);
}
.kt-co-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--co-amber);
  animation: co-blink 1.8s ease-in-out infinite;
}
@keyframes co-blink {
  50% {
    opacity: 0.25;
  }
}

/* approach: a timeline */
.kt-co-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.kt-co-sticky {
  position: sticky;
  top: 110px;
}
.kt-co-scribble {
  display: block;
  width: 160px;
  margin-top: 28px;
  fill: none;
  stroke: var(--co-pink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: co-draw 2.4s ease 0.5s forwards;
}
.kt-co-steps {
  position: relative;
  list-style: none;
  padding: 0 0 0 44px;
  counter-reset: co-step;
  display: grid;
  gap: 18px;
}
.kt-co-steps::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--co-brand), var(--co-cyan), var(--co-pink));
}
.kt-co-steps li {
  position: relative;
  counter-increment: co-step;
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  background: var(--co-surface);
  border: 1px solid var(--co-line);
  border-radius: 16px;
  box-shadow: var(--co-shadow);
  transition: transform 0.3s ease;
}
.kt-co-steps li:hover {
  transform: translateX(6px);
}
.kt-co-steps li::before {
  content: counter(co-step, decimal-leading-zero);
  position: absolute;
  left: -44px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 0 5px var(--co-bg-alt);
}
.kt-co-steps b {
  font-weight: 650;
  font-size: 17px;
}
.kt-co-steps span {
  color: var(--co-ink-2);
  font-size: 15px;
}

/* trust */
.kt-co-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  border-radius: 18px;
  background: var(--co-glass);
  border: 1px solid var(--co-line);
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease;
}
.kt-co-feat:hover {
  transform: translateY(-6px);
}
.kt-co-feat__ico {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--co-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: co-bob 5s ease-in-out infinite;
}
.kt-co-feat:nth-child(2) .kt-co-feat__ico {
  stroke: var(--co-violet);
  animation-delay: 0.8s;
}
.kt-co-feat:nth-child(3) .kt-co-feat__ico {
  stroke: var(--co-cyan);
  animation-delay: 1.6s;
}
.kt-co-feat:nth-child(4) .kt-co-feat__ico {
  stroke: var(--co-pink);
  animation-delay: 2.4s;
}

/* contact */
.kt-co-sec--cta {
  padding: 40px 0 104px;
}
.kt-co-contact {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 56px 56px;
  border-radius: 28px;
  color: #ffffff;
  background: linear-gradient(120deg, #4338ca, #6d28d9, #0e7490, #4338ca);
  background-size: 300% 300%;
  animation: co-sweep 14s ease-in-out infinite;
  box-shadow: 0 30px 80px rgb(67 56 202 / 0.35);
}
@keyframes co-sweep {
  50% {
    background-position: 100% 50%;
  }
}
.kt-co-contact__doodles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kt-co-c-star {
  fill: rgb(255 255 255 / 0.85);
  transform-box: fill-box;
  transform-origin: center;
  animation: co-twinkle 3s ease-in-out infinite;
}
.kt-co-c-star--2 {
  fill: #fde68a;
  animation-delay: 1s;
}
.kt-co-c-star--3 {
  animation-delay: 2s;
}
.kt-co-c-ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.14);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-turn 40s linear infinite;
}
.kt-co-c-ring--2 {
  animation-direction: reverse;
}
.kt-co-contact__text,
.kt-co-contact__act {
  position: relative;
}
.kt-co-contact h2 {
  color: #ffffff;
}
.kt-co-contact p {
  margin-top: 10px;
  color: #e0e7ff;
  max-width: 540px;
  font-size: 17px;
}
.kt-co-contact__act {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kt-co-arrow {
  width: 96px;
  height: 56px;
  fill: none;
  stroke: #fde68a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: co-nudge 2.2s ease-in-out infinite;
}
@keyframes co-nudge {
  50% {
    transform: translateX(8px);
  }
}
.kt-co-env {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kt-co-btn--light:hover .kt-co-env {
  animation: co-wobble 0.6s ease;
}

/* footer */
.kt-co-foot {
  border-top: 1px solid var(--co-line);
  padding: 32px 0;
  color: var(--co-ink-3);
  font-size: 14px;
  background: var(--co-glass);
}
.kt-co-foot__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* error page */
.kt-co-err {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 16px;
}

/* ---------- Kavi, the living shield (hero) ---------- */
.kt-co-kavi {
  transform-origin: 220px 326px;
  animation: co-recoil 6s ease-in-out 2.5s infinite;
}
@keyframes co-recoil {
  0%,
  38%,
  47%,
  88%,
  97%,
  100% {
    transform: none;
  }
  41% {
    transform: translateX(-7px) rotate(-4deg);
  }
  91% {
    transform: translateX(7px) rotate(4deg);
  }
}
.kt-co-shield .kt-co-kavi__arm,
.kt-co-shield .kt-co-kavi__hand,
.kt-co-kavi__feet,
.kt-co-kavi__face,
.kt-co-kavi__shine,
.kt-co-kavi__shadow {
  opacity: 0;
  animation: co-fade 0.6s ease 1.5s forwards;
}
.kt-co-kavi__shadow {
  fill: rgb(79 70 229 / 0.18);
}
.kt-co-kavi__feet,
.kt-co-kavi__foot {
  fill: #4338ca;
}
.kt-co-kavi__arm {
  fill: none;
  stroke: #6366f1;
  stroke-width: 10;
  stroke-linecap: round;
}
.kt-co-kavi__arm--sm {
  stroke-width: 7;
}
.kt-co-kavi__hand {
  fill: #6366f1;
}
.kt-co-kavi__wave {
  transform-origin: 293px 196px;
  animation: co-wave 3s ease-in-out 1.8s infinite;
}
@keyframes co-wave {
  0%,
  45%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-20deg);
  }
  20% {
    transform: rotate(14deg);
  }
  32% {
    transform: rotate(-10deg);
  }
}
.kt-co-kavi__shine {
  fill: none;
  stroke: rgb(255 255 255 / 0.4);
  stroke-width: 6;
  stroke-linecap: round;
}
.kt-co-kavi__eye {
  fill: #ffffff;
}
.kt-co-kavi__pupil {
  fill: #1e1b4b;
}
.kt-co-kavi__glint {
  fill: #ffffff;
}
.kt-co-kavi__cheek {
  fill: #f472b6;
  opacity: 0.55;
}
.kt-co-kavi__smile {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
}
.kt-co-kavi__smile--sm {
  stroke-width: 4.5;
}
.kt-co-kavi__eyes {
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-blinkeye 5s ease-in-out 2.5s infinite;
}
@keyframes co-blinkeye {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
.kt-co-kavi__look {
  animation: co-look 6s ease-in-out 2.5s infinite;
}
@keyframes co-look {
  0%,
  50%,
  100% {
    transform: none;
  }
  15%,
  40% {
    transform: translate(5px, -3px);
  }
  65%,
  90% {
    transform: translate(-5px, 2px);
  }
}

/* the bugs: fly in, bounce off the shield, tumble away */
.kt-co-bug {
  opacity: 0;
}
.kt-co-bug--1 {
  animation: co-bug1 6s ease-in 2.5s infinite;
}
.kt-co-bug--2 {
  animation: co-bug2 6s ease-in 5.5s infinite;
}
@keyframes co-bug1 {
  0% {
    transform: translate(440px, 30px);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  40% {
    transform: translate(306px, 166px);
    opacity: 1;
  }
  56% {
    transform: translate(400px, 100px) rotate(220deg);
    opacity: 1;
  }
  66%,
  100% {
    transform: translate(460px, 70px) rotate(340deg);
    opacity: 0;
  }
}
@keyframes co-bug2 {
  0% {
    transform: translate(-10px, 360px) scaleX(-1);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  40% {
    transform: translate(136px, 236px) scaleX(-1);
    opacity: 1;
  }
  56% {
    transform: translate(40px, 300px) scaleX(-1) rotate(220deg);
    opacity: 1;
  }
  66%,
  100% {
    transform: translate(-20px, 330px) scaleX(-1) rotate(340deg);
    opacity: 0;
  }
}
.kt-co-bug__body {
  fill: #ef4444;
}
.kt-co-bug__leg {
  fill: none;
  stroke: #b91c1c;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.kt-co-bug__eye {
  fill: #ffffff;
}
.kt-co-spark {
  fill: #fde047;
  transform-box: fill-box !important;
  transform-origin: center;
  opacity: 0;
  animation: co-spark 6s ease-out 2.5s infinite;
}
.kt-co-spark--2 {
  animation-delay: 5.5s;
}
@keyframes co-spark {
  0%,
  38% {
    transform: scale(0);
    opacity: 0;
  }
  41% {
    transform: scale(1.3) rotate(20deg);
    opacity: 1;
  }
  50%,
  100% {
    transform: scale(0) rotate(60deg);
    opacity: 0;
  }
}

/* ---------- the guardians ---------- */
.kt-co-guard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 26px;
  background: var(--co-surface);
  border: 1px solid var(--co-line);
  border-radius: 22px;
  box-shadow: var(--co-shadow);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
}
.kt-co-guard:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  box-shadow: var(--co-shadow-lg);
}
.kt-co-guard h3 {
  margin-top: 8px;
  padding: 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kt-co-guard h3 span {
  font-weight: 500;
  color: var(--co-ink-3);
  font-size: 15px;
}
.kt-co-guard p {
  padding: 0 8px;
  color: var(--co-ink-2);
  font-size: 15px;
}
.kt-co-stage {
  display: block;
  width: 100%;
  aspect-ratio: 240 / 200;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--co-brand-soft), color-mix(in srgb, var(--co-cyan) 10%, transparent));
  overflow: hidden;
}
.kt-co-stage * {
  transform-box: view-box;
}
.kt-co-ground {
  fill: rgb(15 23 42 / 0.1);
}
.kt-co-blink {
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-blinkeye 4.5s ease-in-out infinite;
}

/* Kavi hops and says no to a bug */
.kt-co-hop {
  animation: co-hop 2.4s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
@keyframes co-hop {
  0%,
  45%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  8% {
    transform: translateY(2px) scale(1.04, 0.94);
  }
  25% {
    transform: translateY(-18px) scale(0.97, 1.04);
  }
}
.kt-co-g-bug {
  opacity: 0;
  animation: co-gbug 4.8s ease-in infinite;
}
@keyframes co-gbug {
  0% {
    transform: translate(256px, 60px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    transform: translate(176px, 100px);
    opacity: 1;
  }
  62% {
    transform: translate(230px, 30px) rotate(240deg);
    opacity: 1;
  }
  72%,
  100% {
    transform: translate(260px, 10px) rotate(360deg);
    opacity: 0;
  }
}
.kt-co-bubble {
  opacity: 0;
  transform-box: fill-box !important;
  transform-origin: 10% 100%;
  animation: co-bubble 4.8s ease infinite;
}
.kt-co-bubble rect,
.kt-co-bubble path {
  fill: var(--co-surface);
  stroke: var(--co-line);
  stroke-width: 1.5;
}
.kt-co-bubble text {
  fill: var(--co-brand);
  font:
    700 12px 'Inter',
    system-ui,
    sans-serif;
  text-anchor: middle;
}
@keyframes co-bubble {
  0%,
  44% {
    opacity: 0;
    transform: scale(0.5);
  }
  50%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Gaja, the armoured elephant */
.kt-co-gaja__skin {
  fill: #9aa8bf;
}
.kt-co-gaja__leg {
  fill: #8d9bb3;
}
.kt-co-gaja__leg--far {
  fill: #75839b;
}
.kt-co-gaja__armour {
  fill: #f59e0b;
  stroke: #b45309;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kt-co-gaja__trim {
  fill: none;
  stroke: #dc2626;
  stroke-width: 3;
}
.kt-co-gaja__bead {
  fill: #fde68a;
  stroke: #b45309;
  stroke-width: 1.2;
}
.kt-co-gaja__emblem {
  fill: #4f46e5;
  stroke: #fde68a;
  stroke-width: 1.5;
}
.kt-co-gaja__glint {
  fill: none;
  stroke: rgb(255 255 255 / 0.65);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 14 120;
  animation: co-glint 3.5s ease-in-out infinite;
}
@keyframes co-glint {
  from {
    stroke-dashoffset: 30;
  }
  to {
    stroke-dashoffset: -110;
  }
}
.kt-co-gaja__earback {
  fill: #a9b6cb;
}
.kt-co-gaja__earin {
  fill: #f9a8d4;
  opacity: 0.7;
}
.kt-co-gaja__ear {
  transform-origin: 96px 70px;
  animation: co-flap 1.8s ease-in-out infinite alternate;
}
@keyframes co-flap {
  to {
    transform: rotate(-12deg) scaleX(0.92);
  }
}
.kt-co-gaja__crown {
  fill: #f59e0b;
  stroke: #b45309;
  stroke-width: 1.5;
}
.kt-co-gaja__tusk {
  fill: #fffbeb;
  stroke: #e7e5e4;
  stroke-width: 1;
}
.kt-co-gaja__eyeball {
  fill: #0f172a;
}
.kt-co-gaja__trunk {
  transform-origin: 56px 100px;
  animation: co-trunk 2.6s ease-in-out infinite alternate;
}
@keyframes co-trunk {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(12deg);
  }
}
.kt-co-gaja__tail {
  fill: none;
  stroke: #75839b;
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: 196px 104px;
  animation: co-tail 0.9s ease-in-out infinite alternate;
}
@keyframes co-tail {
  to {
    transform: rotate(22deg);
  }
}
.kt-co-gaja__stomp {
  animation: co-stomp 4s ease-in infinite;
}
@keyframes co-stomp {
  0%,
  10%,
  27%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-16px) rotate(-2deg);
  }
}
.kt-co-gaja {
  animation: co-thud 4s ease-out infinite;
}
@keyframes co-thud {
  0%,
  26%,
  34%,
  100% {
    transform: translateY(0);
  }
  29% {
    transform: translateY(2px);
  }
}
.kt-co-dust circle {
  fill: #cbd5e1;
  opacity: 0;
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-dust 4s ease-out infinite;
}
@keyframes co-dust {
  0%,
  26% {
    opacity: 0;
    transform: scale(0.3);
  }
  30% {
    opacity: 0.9;
    transform: scale(1);
  }
  50%,
  100% {
    opacity: 0;
    transform: scale(2) translateY(-4px);
  }
}
.kt-co-note {
  animation: co-bob 3.4s ease-in-out infinite;
}
.kt-co-note rect {
  fill: var(--co-surface);
  stroke: var(--co-line);
  stroke-width: 1.5;
}
.kt-co-note__tick {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12;
  animation: co-redraw 4s ease-in-out infinite;
}
.kt-co-note__line {
  fill: none;
  stroke: var(--co-ink-3);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
}

/* Veer, the little guardian on watch: day turns to night behind him */
.kt-co-guard--night .kt-co-stage {
  animation: co-daynight 12s ease-in-out infinite alternate;
}
@keyframes co-daynight {
  0%,
  30% {
    background-color: #e0f2fe;
  }
  70%,
  100% {
    background-color: #1e1b4b;
  }
}
.kt-co-sun {
  fill: #fbbf24;
}
.kt-co-moonbite {
  opacity: 0;
  animation:
    co-moon 12s ease-in-out infinite alternate,
    co-moonfill 12s ease-in-out infinite alternate;
}
@keyframes co-moon {
  0%,
  30% {
    opacity: 0;
  }
  70%,
  100% {
    opacity: 1;
  }
}
@keyframes co-moonfill {
  0%,
  30% {
    fill: #e0f2fe;
  }
  70%,
  100% {
    fill: #1e1b4b;
  }
}
.kt-co-tw {
  fill: #ffffff;
  opacity: 0;
  animation: co-moon 12s ease-in-out infinite alternate;
}
.kt-co-veer {
  animation: co-breath 3s ease-in-out infinite;
}
@keyframes co-breath {
  50% {
    transform: translateY(-3px);
  }
}
.kt-co-veer__leg {
  fill: #334155;
}
.kt-co-veer__tunic {
  fill: #4f46e5;
}
.kt-co-veer__plate {
  fill: #fbbf24;
  stroke: #b45309;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kt-co-veer__emblem,
.kt-co-veer__emblem2 {
  fill: #4f46e5;
}
.kt-co-veer__arm {
  fill: none;
  stroke: #4f46e5;
  stroke-width: 9;
  stroke-linecap: round;
}
.kt-co-veer__string {
  stroke: #b45309;
  stroke-width: 2;
}
.kt-co-veer__lantern {
  transform-origin: 92px 126px;
  animation: co-lantern 2.8s ease-in-out infinite alternate;
}
@keyframes co-lantern {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(6deg);
  }
}
.kt-co-veer__glow {
  fill: #fde047;
  opacity: 0.3;
  transform-box: fill-box !important;
  transform-origin: center;
  animation: co-flicker 1.4s ease-in-out infinite alternate;
}
@keyframes co-flicker {
  to {
    opacity: 0.55;
    transform: scale(1.15);
  }
}
.kt-co-veer__lamp {
  fill: #fef3c7;
  stroke: #b45309;
  stroke-width: 2;
}
.kt-co-veer__flame {
  fill: #f97316;
  transform-box: fill-box !important;
  transform-origin: 50% 100%;
  animation: co-flame 0.5s ease-in-out infinite alternate;
}
@keyframes co-flame {
  to {
    transform: scale(0.8, 1.15);
  }
}
.kt-co-veer__shield {
  fill: #f59e0b;
  stroke: #b45309;
  stroke-width: 3;
}
.kt-co-veer__shieldin {
  fill: #fde68a;
}
.kt-co-veer__skin {
  fill: #f5c9a0;
}
.kt-co-veer__helmet,
.kt-co-veer__nose {
  fill: #f59e0b;
  stroke: #b45309;
  stroke-width: 2;
  stroke-linejoin: round;
}
.kt-co-veer__plume {
  fill: #ef4444;
  transform-origin: 122px 46px;
  animation: co-plume 1.6s ease-in-out infinite alternate;
}
@keyframes co-plume {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(10deg);
  }
}
.kt-co-veer__eye {
  fill: #0f172a;
}
.kt-co-veer__eyes {
  animation: co-watch 5s ease-in-out infinite;
}
@keyframes co-watch {
  0%,
  100% {
    transform: none;
  }
  25%,
  40% {
    transform: translateX(-4px);
  }
  42% {
    transform: translateX(-4px) scaleY(0.1);
  }
  44%,
  50% {
    transform: translateX(-4px);
  }
  65%,
  85% {
    transform: translateX(4px);
  }
}
.kt-co-veer__smile {
  fill: none;
  stroke: #7c2d12;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Kavi peeks into the contact panel */
.kt-co-peek {
  position: absolute;
  right: 340px;
  bottom: -2px;
  width: 92px;
  height: 69px;
  transform: translateY(70%);
  animation: co-peek 7s ease-in-out 1s infinite;
}
@keyframes co-peek {
  0%,
  15%,
  85%,
  100% {
    transform: translateY(70%);
  }
  25%,
  75% {
    transform: translateY(0);
  }
}

/* the film */
.kt-co-film {
  margin: 56px auto 0;
  max-width: 880px;
}
.kt-co-film__frame {
  position: relative;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #06b6d4);
  box-shadow: 0 30px 80px rgb(79 70 229 / 0.3);
}
.kt-co-film__frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 34px;
  background: conic-gradient(from var(--co-angle), #6366f1, #06b6d4, #ec4899, #f59e0b, #6366f1);
  filter: blur(26px);
  opacity: 0.45;
  animation: co-angle 6s linear infinite;
}
.kt-co-film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #0b1020;
}
.kt-co-film figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  color: var(--co-ink-3);
}
.kt-co-film figcaption b {
  color: var(--co-ink);
  font-weight: 650;
}

/* reveal on scroll where the browser can tie an animation to scrolling; elsewhere everything is simply shown */
@supports (animation-timeline: view()) {
  .kt-co-reveal {
    animation: co-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .kt-co-hero__in {
    grid-template-columns: 1fr;
  }
  .kt-co-art {
    max-width: 420px;
    order: -1;
  }
  .kt-co-grid,
  .kt-co-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kt-co-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .kt-co-sticky {
    position: static;
  }
  .kt-co-contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 36px;
  }
  .kt-co-peek {
    right: 24px;
    width: 72px;
    height: 54px;
  }
}
@media (max-width: 640px) {
  .kt-co-wrap {
    padding: 0 16px;
  }
  .kt-co-nav a:not(.kt-co-btn) {
    display: none;
  }
  .kt-co-hero {
    padding: 36px 0 64px;
  }
  .kt-co-art {
    max-width: 300px;
  }
  .kt-co-sec {
    padding: 72px 0;
  }
  .kt-co-grid,
  .kt-co-grid--4 {
    grid-template-columns: 1fr;
  }
  .kt-co-contact {
    padding: 40px 22px;
    border-radius: 22px;
  }
  .kt-co-contact__act,
  .kt-co-contact .kt-co-btn {
    width: 100%;
  }
  .kt-co-arrow {
    display: none;
  }
  .kt-co-film__frame {
    padding: 6px;
    border-radius: 18px;
  }
  .kt-co-film__video {
    border-radius: 13px;
  }
  .kt-co-band__track {
    font-size: 16px;
  }
}

/* visitors who ask for less motion get a still page, with everything visible */
@media (prefers-reduced-motion: reduce) {
  .kt-co *,
  .kt-co *::before,
  .kt-co *::after {
    animation: none !important;
    transition: none !important;
  }
  .kt-co-hl__line,
  .kt-co-shield__line,
  .kt-co-shield__tick,
  .kt-co-doodle,
  .kt-co-scribble {
    stroke-dashoffset: 0;
  }
  .kt-co-shield__fill,
  .kt-co-shield .kt-co-kavi__arm,
  .kt-co-shield .kt-co-kavi__hand,
  .kt-co-kavi__feet,
  .kt-co-kavi__face,
  .kt-co-kavi__shine,
  .kt-co-kavi__shadow {
    opacity: 1;
  }
  .kt-co-peek {
    transform: none;
  }
}