/* ==========================================================================
   KEYVA — Design System
   "The operational graph": editorial serif headlines + grotesque body +
   mono data-labels, over a refined indigo identity. Built around the logo's
   node-convergence motif — scattered records resolving into one live system.
   Authoritative sheet: loaded after the vendor theme CSS, overrides Bootstrap.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --k-indigo: #5a5ff0;
  --k-indigo-600: #4a4fe0;
  --k-indigo-700: #3a3fc4;
  --k-violet: #8b6dff;
  --k-glow: rgba(90, 95, 240, 0.4);

  /* Ink / neutrals */
  --k-ink: #14152e;          /* darkest — hero / dark sections */
  --k-ink-2: #1c1e3d;
  --k-ink-3: #262a52;
  --k-slate: #23263a;        /* headings on light */
  --k-body: #4c516b;         /* body text */
  --k-muted: #767b95;        /* captions / muted */
  --k-line: rgba(36, 40, 82, 0.10);
  --k-line-strong: rgba(36, 40, 82, 0.16);

  /* Surfaces */
  --k-paper: #ffffff;
  --k-mist: #f5f6ff;         /* alt sections */
  --k-lilac: #eef0ff;        /* chips / soft fills */

  /* Signal (live/positive) — used sparingly */
  --k-live: #2fbf9b;

  /* Bootstrap remap */
  --bs-primary: var(--k-indigo);
  --bs-primary-rgb: 90, 95, 240;
  --bs-body-color: var(--k-body);
  --bs-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-border-color: var(--k-line);

  /* Type */
  --k-serif: 'Fraunces', 'Times New Roman', serif;
  --k-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --k-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radius / shadow */
  --k-r-sm: 10px;
  --k-r: 16px;
  --k-r-lg: 22px;
  --k-shadow-sm: 0 2px 8px rgba(20, 21, 46, 0.05);
  --k-shadow: 0 18px 48px -24px rgba(30, 32, 80, 0.28);
  --k-shadow-lg: 0 40px 90px -40px rgba(30, 32, 80, 0.40);

  --k-maxw: 1180px;
}

/* ---------- Base ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--k-sans);
  color: var(--k-body);
  background: var(--k-paper);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 { color: var(--k-slate); }
a { color: var(--k-indigo-600); text-decoration: none; }
a:hover { color: var(--k-indigo-700); }
::selection { background: var(--k-indigo); color: #fff; }

.container { max-width: var(--k-maxw); }

/* ---------- Typography scale ---------- */
.k-display {
  font-family: var(--k-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--k-slate);
}
.k-h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem); }
.k-h2 {
  font-family: var(--k-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--k-slate);
}
.k-h3 {
  font-family: var(--k-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.k-accent { color: var(--k-indigo); font-style: italic; }

/* Card / small titles stay in the sans for legibility */
.k-title {
  font-family: var(--k-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--k-slate);
  line-height: 1.25;
}

.k-lead {
  font-size: 1.175rem;
  line-height: 1.7;
  color: var(--k-body);
}
.k-body { color: var(--k-body); line-height: 1.7; }
.k-muted { color: var(--k-muted); }

/* Mono data label — the signature "operational" voice */
.k-eyebrow {
  font-family: var(--k-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-indigo);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  flex-wrap: wrap;
}
@media (max-width: 575.98px) { .k-eyebrow { letter-spacing: 0.12em; font-size: 0.7rem; } }
.k-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--k-indigo);
  box-shadow: 0 0 0 4px rgba(90, 95, 240, 0.14);
}
.k-eyebrow--light { color: #b9bcff; }
.k-eyebrow--light::before { background: #b9bcff; box-shadow: 0 0 0 4px rgba(185, 188, 255, 0.16); }
.k-eyebrow--plain::before { display: none; }

.k-mono { font-family: var(--k-mono); letter-spacing: 0.02em; }

/* ---------- Layout: sections ---------- */
.k-section { padding: clamp(4rem, 2.5rem + 5vw, 7.5rem) 0; }
.k-section--tight { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.k-mist { background: var(--k-mist); }
.k-dark { background: var(--k-ink); color: #c9cbe6; }
.k-dark h1, .k-dark h2, .k-dark h3, .k-dark h4, .k-dark h5, .k-dark h6 { color: #fff; }

.k-section-head { max-width: 46rem; }
.k-section-head--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.k-section-head .k-h2 { margin: 1rem 0 1rem; }
.k-section-head p { color: var(--k-body); font-size: 1.075rem; margin: 0; }
.k-dark .k-section-head p { color: #a7abcf; }

/* Hairline rule with a node — recurring structural motif */
.k-rule {
  height: 1px;
  background: var(--k-line);
  position: relative;
}

/* ---------- Buttons ---------- */
.btn { font-family: var(--k-sans); font-weight: 600; letter-spacing: -0.005em; }
.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; }

.k-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--k-sans); font-weight: 600;
  padding: 0.8rem 1.5rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  line-height: 1.2; text-decoration: none;
}
.k-btn i { font-size: 1.15em; }
.k-btn--primary {
  background: var(--k-indigo); color: #fff;
  box-shadow: 0 10px 26px -12px var(--k-glow);
}
.k-btn--primary:hover { background: var(--k-indigo-600); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px var(--k-glow); }
.k-btn--ghost {
  background: transparent; color: var(--k-slate);
  border-color: var(--k-line-strong);
}
.k-btn--ghost:hover { border-color: var(--k-indigo); color: var(--k-indigo); transform: translateY(-2px); }
.k-btn--on-dark { background: #fff; color: var(--k-ink); }
.k-btn--on-dark:hover { background: #eef0ff; color: var(--k-ink); transform: translateY(-2px); }
.k-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.22); }
.k-btn--ghost-dark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.k-btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* Bootstrap primary buttons follow suit */
.btn-primary { --bs-btn-bg: var(--k-indigo); --bs-btn-border-color: var(--k-indigo); --bs-btn-hover-bg: var(--k-indigo-600); --bs-btn-hover-border-color: var(--k-indigo-600); --bs-btn-active-bg: var(--k-indigo-700); border-radius: 999px; font-weight: 600; box-shadow: 0 10px 26px -12px var(--k-glow); }
.text-primary { color: var(--k-indigo) !important; }

/* ---------- Chips / tags ---------- */
.k-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: var(--k-lilac); color: var(--k-indigo-700);
  border: 1px solid rgba(90,95,240,0.14);
}
.k-chip--live { background: rgba(47,191,155,0.12); color: #16856a; border-color: rgba(47,191,155,0.22); }
.k-chip--live .k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-live); box-shadow: 0 0 0 3px rgba(47,191,155,0.18); }

/* ---------- Cards ---------- */
.k-card {
  background: var(--k-paper);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r);
  padding: 1.75rem;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.k-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow); border-color: rgba(90,95,240,0.25); }
.k-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--k-indigo);
  background: var(--k-lilac); margin-bottom: 1.1rem;
}
.k-card .k-title { font-size: 1.15rem; margin-bottom: 0.5rem; }
.k-card p { color: var(--k-body); margin-bottom: 0; font-size: 0.975rem; }

.k-card--accent { border-top: 3px solid var(--k-indigo); }
.k-card--feature { padding: 2.25rem; }

/* Checklist inside cards */
.k-ticks { list-style: none; padding: 0; margin: 1rem 0 0; }
.k-ticks li { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.925rem; color: var(--k-body); }
.k-ticks li i { color: var(--k-indigo); font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }

/* ---------- Navbar ---------- */
.layout-navbar { background: transparent; }
.k-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.k-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--k-line);
  box-shadow: 0 6px 24px -20px rgba(20,21,46,0.5);
}
.k-nav__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.k-nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.k-nav__brand img { height: 34px; width: auto; }
.k-nav__wordmark { font-family: var(--k-serif); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: #fff; transition: color 0.3s ease; }
.k-nav__links { display: flex; align-items: center; gap: 0.25rem; margin: 0 auto; padding: 0; list-style: none; }
.k-nav__links a {
  font-size: 0.94rem; font-weight: 500; color: rgba(255,255,255,0.82);
  padding: 0.5rem 0.85rem; border-radius: 999px; transition: color 0.15s, background 0.15s;
}
.k-nav__links a:hover { color: #fff; }
.k-nav__links a.active { color: #fff; background: rgba(255,255,255,0.14); }
.k-nav__toggle { color: #fff; }

/* Scrolled: solid light bar → dark text */
.k-nav.is-scrolled .k-nav__wordmark { color: var(--k-slate); }
.k-nav.is-scrolled .k-nav__links a { color: var(--k-body); }
.k-nav.is-scrolled .k-nav__links a:hover { color: var(--k-indigo); }
.k-nav.is-scrolled .k-nav__links a.active { color: var(--k-indigo); background: var(--k-lilac); }
.k-nav.is-scrolled .k-nav__toggle { color: var(--k-slate); }
.k-nav__cta { flex-shrink: 0; }
.k-nav__toggle, .k-nav__close { display: none; background: none; border: 0; color: var(--k-slate); font-size: 1.6rem; line-height: 1; }

@media (max-width: 991.98px) {
  .k-nav__inner { height: 66px; }
  .k-nav__toggle { display: inline-flex; }
  .k-nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw);
    background: var(--k-paper); box-shadow: -20px 0 60px -30px rgba(20,21,46,0.4);
    transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; padding: 1.5rem; z-index: 1040; overflow-y: auto;
  }
  .k-nav__menu.is-open { transform: translateX(0); }
  .k-nav__close { display: inline-flex; align-self: flex-end; }
  .k-nav__links { flex-direction: column; align-items: stretch; gap: 0.15rem; margin: 1rem 0; }
  .k-nav__menu .k-nav__links a { padding: 0.8rem 0.9rem; font-size: 1.05rem; color: var(--k-body); }
  .k-nav__menu .k-nav__links a:hover, .k-nav__menu .k-nav__links a.active { color: var(--k-indigo); background: var(--k-lilac); }
  .k-nav__close { color: var(--k-slate); }
  .k-nav__overlay { position: fixed; inset: 0; background: rgba(20,21,46,0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 1035; }
  .k-nav__overlay.is-open { opacity: 1; visibility: visible; }
  .k-nav__menu .k-nav__cta { margin-top: auto; }
}

/* ---------- Hero ---------- */
.k-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 15% 0%, #1c1e42 0%, var(--k-ink) 55%, #101124 100%);
  color: #d6d8f2;
  padding: clamp(8rem, 6rem + 8vw, 11rem) 0 clamp(4rem, 3rem + 4vw, 6.5rem);
}
.k-hero__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%); }
.k-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.k-hero__glow--1 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(90,95,240,0.55), transparent 70%); top: -120px; left: -80px; }
.k-hero__glow--2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(139,109,255,0.4), transparent 70%); bottom: -160px; right: -60px; }
.k-hero .container { position: relative; z-index: 2; }

.k-hero__title { font-family: var(--k-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem); line-height: 1.03; letter-spacing: -0.025em; color: #fff; margin: 1.4rem 0 1.4rem; }
.k-hero__title em { font-style: italic; color: #b9bcff; }
.k-hero__sub { font-size: 1.2rem; line-height: 1.65; color: #a9adcf; max-width: 34rem; }
.k-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* Hero stat rail */
.k-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 3.25rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--k-r); overflow: hidden; }
.k-hero__stat { background: rgba(18,19,42,0.6); padding: 1.25rem 1.1rem; }
.k-hero__stat-v { font-family: var(--k-serif); font-weight: 500; font-size: 1.85rem; color: #fff; line-height: 1; letter-spacing: -0.02em; }
.k-hero__stat-v .arw { color: var(--k-violet); font-family: var(--k-sans); }
.k-hero__stat-l { font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8f93bd; margin-top: 0.5rem; }
@media (max-width: 767.98px) { .k-hero__stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Full-bleed convergence hero (single immersive screen) ---------- */
.k-herofb {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 6.5rem 0 3rem;
  background: radial-gradient(130% 120% at 50% -10%, #20224e 0%, #14152e 52%, #0d0e20 100%);
  color: #d6d8f2;
}
.k-herofb::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}
.k-herofb__field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.k-herofb__field svg { width: 100%; height: 100%; display: block; }
.k-herofb__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(48% 46% at 50% 46%, rgba(13,14,32,0.55) 0%, rgba(13,14,32,0.26) 48%, transparent 74%);
}
.k-herofb .container { position: relative; z-index: 3; }
.k-herofb__content { text-align: center; max-width: 54rem; margin: 0 auto; }
.k-herofb__title {
  font-family: var(--k-serif); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.9rem, 1.5rem + 5.4vw, 5.4rem); line-height: 1.02;
  letter-spacing: -0.028em; color: #fff; margin: 1.4rem 0 1.3rem;
  text-shadow: 0 2px 30px rgba(8, 9, 24, 0.55);
}
.k-herofb__title em { font-style: italic; color: #b9bcff; }
.k-herofb__sub { font-size: 1.2rem; line-height: 1.6; color: #a9adcf; max-width: 36rem; margin: 0 auto 2.1rem; text-shadow: 0 1px 16px rgba(8, 9, 24, 0.55); }
.k-herofb .k-hero__cta { justify-content: center; }
.k-herofb__proof { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; align-items: center; justify-content: center; }
.k-herofb__proof .lbl { font-family: var(--k-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7d81ad; }
.k-herofb__proof img { height: 26px; filter: brightness(0) invert(1); opacity: 0.82; }
.k-herofb__cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 3; color: #8f93bd; font-size: 1.5rem; line-height: 1;
  animation: kCue 2.1s ease-in-out infinite;
}
@keyframes kCue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.45; } 50% { transform: translate(-50%, 7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .k-herofb__cue { animation: none; } }
@media (max-width: 767.98px) {
  .k-herofb { min-height: 100vh; min-height: 100svh; padding: 6rem 0 2.5rem; }
  .k-herofb__sub { font-size: 1.08rem; }
}

/* ---------- Slideshow deck ---------- */
/* No-JS / SSR fallback: slides stack and scroll, all content readable.
   With JS (.is-deck) it becomes a fixed full-screen slideshow. */
.k-deck {
  position: relative; color: #d6d8f2;
  background: radial-gradient(130% 120% at 50% -10%, #20224e 0%, #14152e 52%, #0d0e20 100%);
}
.k-deck::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}
.k-slide {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem; overflow: hidden;
}
.k-slide__glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(100px); opacity: 0.4; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(90,95,240,0.55), transparent 70%); pointer-events: none; }
.k-slide__inner { position: relative; z-index: 3; width: 100%; max-width: 60rem; margin: 0 auto; text-align: center; }
.k-slide__title { font-family: var(--k-serif); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.5rem, 1.4rem + 4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.026em; color: #fff; margin: 1.4rem 0 1.2rem; text-shadow: 0 2px 30px rgba(8,9,24,0.5); overflow-wrap: break-word; }
.k-slide__title em { font-style: italic; color: #b9bcff; }
.k-slide__sub { font-size: 1.2rem; line-height: 1.6; color: #a9adcf; max-width: 40rem; margin: 0 auto; text-shadow: 0 1px 16px rgba(8,9,24,0.5); }
.k-slide__field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.k-slide__field svg { width: 100%; height: 100%; display: block; }
.k-slide__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(48% 46% at 50% 50%, rgba(13,14,32,0.55) 0%, rgba(13,14,32,0.24) 48%, transparent 74%); }

/* deck mode */
.k-deck.is-deck { position: fixed; inset: 0; height: 100vh; height: 100svh; overflow: hidden; }
.k-deck.is-deck::before { position: fixed; }
.k-deck.is-deck .k-slide {
  position: absolute; inset: 0; min-height: 0; padding: 5rem 1.5rem;
  opacity: 0; visibility: hidden; transform: scale(0.985);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.7s;
}
.k-deck.is-deck .k-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1), visibility 0s; }
html.deck-lock, html.deck-lock body { overflow: hidden; height: 100%; }

/* staggered reveal of slide content when active */
.k-deck.is-deck .k-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.k-deck.is-deck .k-slide.is-active .k-up { opacity: 1; transform: none; }
.k-up.d1 { transition-delay: 0.12s; } .k-up.d2 { transition-delay: 0.22s; } .k-up.d3 { transition-delay: 0.32s; } .k-up.d4 { transition-delay: 0.42s; } .k-up.d5 { transition-delay: 0.52s; }

/* deck chrome (only in JS mode) */
.k-deck__brand { position: fixed; top: 1.7rem; left: 2rem; z-index: 30; display: inline-flex; align-items: center; gap: 0.55rem; }
.k-deck__brand img { height: 30px; }
.k-deck__brand span { font-family: var(--k-serif); font-weight: 600; font-size: 1.25rem; color: #fff; letter-spacing: -0.02em; }
.k-deck__dots { position: fixed; right: 1.9rem; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 0.7rem; }
.k-deck__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: transparent; cursor: pointer; transition: all 0.2s; }
.k-deck__dot:hover { border-color: #fff; }
.k-deck__dot.is-active { background: var(--k-indigo); border-color: var(--k-indigo); transform: scale(1.25); }
.k-deck__arrows { position: fixed; bottom: 2rem; right: 2rem; z-index: 30; display: flex; gap: 0.55rem; }
.k-deck__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(6px); }
.k-deck__arrow:hover:not(:disabled) { background: var(--k-indigo); border-color: var(--k-indigo); }
.k-deck__arrow:disabled { opacity: 0.3; cursor: default; }
.k-deck__counter { position: fixed; bottom: 2.55rem; left: 2rem; z-index: 30; font-family: var(--k-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: #8f93bd; }
.k-deck__hint { position: fixed; bottom: 2.55rem; left: 50%; transform: translateX(-50%); z-index: 30; font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6f95; transition: opacity 0.4s; }
.k-deck__progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 31; pointer-events: none; }
.k-deck__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--k-indigo), var(--k-violet)); }
@keyframes kProgress { from { width: 0; } to { width: 100%; } }
/* hide deck-only chrome when JS is off */
.k-deck:not(.is-deck) .k-deck__dots,
.k-deck:not(.is-deck) .k-deck__arrows,
.k-deck:not(.is-deck) .k-deck__counter,
.k-deck:not(.is-deck) .k-deck__hint,
.k-deck:not(.is-deck) .k-deck__progress { display: none; }

/* slide content bits */
.k-slide__metrics { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; margin-top: 2.5rem; }
.k-slide__metric .v { font-family: var(--k-serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: #fff; line-height: 1; }
.k-slide__metric .l { font-family: var(--k-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8f93bd; margin-top: 0.5rem; }
.k-slide__logos { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.k-slide__logos img { height: 30px; filter: brightness(0) invert(1); opacity: 0.85; }
.k-slide__proof { display: flex; flex-wrap: wrap; gap: 1.3rem 2.5rem; align-items: center; justify-content: center; margin-top: 2.4rem; }
.k-slide__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2.25rem; }
.k-slide__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 2rem; }
.k-slide__chip { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--k-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: #c4c7e6; padding: 0.6rem 1rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.04); }
.k-slide__chip svg, .k-slide__chip i { font-size: 1.1rem; }

/* Slide 3 — modular system tiles */
.k-slide__mods { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 2.4rem; }
.k-slide__mod { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--k-sans); font-weight: 600; font-size: 0.92rem; color: #d0d2ee; padding: 0.65rem 1.05rem; border: 1px solid rgba(90,95,240,0.3); border-radius: 12px; background: rgba(90,95,240,0.08); }
.k-slide__mod i { color: var(--k-indigo); font-size: 1.15rem; }
.k-slide__mod--more { border-style: dashed; border-color: rgba(139,109,255,0.5); color: #cbb8ff; background: rgba(139,109,255,0.08); }
.k-slide__mod--more i { color: var(--k-violet); }
.k-slide__note { font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: #8f93bd; margin-top: 1.15rem; }

/* Slide 4 — live dashboard */
.k-slide__dash { margin-top: 2.5rem; display: flex; justify-content: center; }
.k-slide__dash svg { width: min(340px, 82vw); height: auto; }

/* Split slides — copy beside a framed, self-contained live scene (the "Live
   slide" treatment applied to the story slides). */
.k-slide__inner--split {
  max-width: min(94rem, 93vw); display: grid;
  /* cap the copy for readable line length; let the animation panel take the
     rest so it grows to fill large screens */
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; text-align: left;
}
.k-slide__copy { min-width: 0; }
.k-slide__inner--split .k-slide__title { margin-left: 0; margin-right: 0; }
.k-slide__inner--split .k-slide__sub { margin-left: 0; margin-right: 0; }
.k-slide__inner--split .k-slide__cta { justify-content: flex-start; }
.k-slide__art { min-width: 0; }
/* No frame — the animation floats on the deck like the Live dashboard, with a
   soft radial glow to anchor it. */
.k-scene { position: relative; width: 100%; aspect-ratio: 12 / 7; }
.k-scene::before {
  content: ''; position: absolute; inset: 6% 4%; z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(90,95,240,0.12), transparent 72%);
  filter: blur(26px); pointer-events: none;
}
.k-scene svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 900px) {
  .k-slide__inner--split { grid-template-columns: 1fr; gap: 1.9rem; text-align: center; justify-items: center; }
  .k-slide__inner--split .k-slide__sub { margin-left: auto; margin-right: auto; }
  .k-slide__inner--split .k-slide__cta { justify-content: center; }
  .k-scene { width: min(100%, 38rem); }
}
/* Landscape phones: no room to stack copy + panel — show copy only. */
@media (max-height: 540px) {
  .k-slide__inner--split .k-slide__art { display: none; }
}

/* Below 1024px scenes are centred (meet) behind the text, so deepen the scrim
   through the middle to keep the copy legible over the nodes. */
@media (max-width: 1024px) {
  .k-slide__scrim { background: radial-gradient(62% 52% at 50% 50%, rgba(13,14,32,0.82) 0%, rgba(13,14,32,0.5) 46%, transparent 78%); }
  .k-slide__scrim--soft { background: linear-gradient(to bottom, rgba(13,14,32,0.85) 0%, rgba(13,14,32,0.5) 34%, transparent 60%); }
}

/* Deck responsive — phones & short viewports.
   Scenes switch slice→meet in JS below 1024px so nothing is cropped; here we
   scale the type and pull the fixed controls into the corners so they never
   crowd the content. */
@media (max-width: 767.98px) {
  .k-deck.is-deck .k-slide { padding: 4.25rem 1.15rem; }
  .k-slide__title { font-size: clamp(1.95rem, 1.1rem + 5vw, 3rem); margin: 1rem 0 0.85rem; }
  .k-slide__sub { font-size: 1.05rem; }
  .k-slide__inner--top { margin-top: 7vh; }
  .k-deck__brand { top: 1.05rem; left: 1.1rem; }
  .k-deck__brand img { height: 26px; }
  .k-deck__brand span { font-size: 1.08rem; }
  .k-deck__dots { right: 0.8rem; gap: 0.55rem; }
  .k-deck__dot { width: 8px; height: 8px; }
  .k-deck__arrows { bottom: 1.05rem; right: 1.1rem; gap: 0.5rem; }
  .k-deck__arrow { width: 42px; height: 42px; font-size: 1.25rem; }
  .k-deck__counter { bottom: 1.5rem; left: 1.1rem; font-size: 0.72rem; }
  .k-deck__hint { display: none; }
}
/* Landscape phones / very short screens — keep a slide within one viewport */
@media (max-height: 460px) {
  .k-deck.is-deck .k-slide { padding: 3.25rem 1.25rem; }
  .k-slide__title { font-size: clamp(1.7rem, 1rem + 4vw, 2.6rem); margin: 0.6rem 0; }
  .k-slide__sub { font-size: 1rem; }
  .k-deck__hint { display: none; }
}
.kd-card { fill: rgba(19,21,48,0.92); stroke: rgba(90,95,240,0.5); stroke-width: 1.5; }
.kd-line { fill: rgba(255,255,255,0.6); }
.kd-line2 { fill: rgba(255,255,255,0.22); }
.kd-live circle { fill: #2fbf9b; transform-box: fill-box; transform-origin: center; animation: kdPulse 1.7s ease-in-out infinite; }
.kd-live rect { fill: rgba(47,191,155,0.5); }
.kd-div { stroke: rgba(255,255,255,0.09); stroke-width: 1; }
.kd-row { fill: rgba(255,255,255,0.16); }
.kd-bar { transform-box: fill-box; transform-origin: bottom; }
.kd-bar.kb1 { fill: #5a5ff0; animation: kdBar 2.4s ease-in-out infinite; }
.kd-bar.kb2 { fill: #5a5ff0; animation: kdBar 2.1s ease-in-out infinite 0.25s; }
.kd-bar.kb3 { fill: #5a5ff0; animation: kdBar 2.7s ease-in-out infinite 0.1s; }
.kd-bar.kb4 { fill: #8b6dff; animation: kdBar 2.3s ease-in-out infinite 0.4s; }
.kd-bar.kb5 { fill: #2fbf9b; animation: kdBar 2.5s ease-in-out infinite 0.18s; }
@keyframes kdBar { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
@keyframes kdPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .kd-bar, .kd-live circle { animation: none; } .kd-bar { transform: scaleY(0.8); } }

/* Ambient per-slide motion — keeps every slide alive */
@media (prefers-reduced-motion: no-preference) {
  .k-slide__glow { animation: kGlowBreathe 7s ease-in-out infinite; }
  /* slide 2 — scattered sources drift */
  .k-slide[data-slide="1"] .k-slide__chip { animation: kFloat 5s ease-in-out infinite; }
  .k-slide[data-slide="1"] .k-slide__chip:nth-child(1) { animation-duration: 5.4s; }
  .k-slide[data-slide="1"] .k-slide__chip:nth-child(2) { animation-duration: 4.6s; animation-delay: -0.9s; }
  .k-slide[data-slide="1"] .k-slide__chip:nth-child(3) { animation-duration: 6.1s; animation-delay: -1.6s; }
  .k-slide[data-slide="1"] .k-slide__chip:nth-child(4) { animation-duration: 5.2s; animation-delay: -2.4s; }
  /* slide 3 — a glow ripples across the module tiles */
  .k-slide[data-slide="2"] .k-slide__mod { animation: kTileGlow 3.4s ease-in-out infinite; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(2) { animation-delay: 0.22s; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(3) { animation-delay: 0.44s; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(4) { animation-delay: 0.66s; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(5) { animation-delay: 0.88s; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(6) { animation-delay: 1.1s; }
  .k-slide[data-slide="2"] .k-slide__mod:nth-child(7) { animation-delay: 1.32s; }
  /* slide 5 — deployment domains pulse like live deployments */
  .k-slide[data-slide="4"] .k-slide__chip { animation: kChipPulse 3.6s ease-in-out infinite; }
  .k-slide[data-slide="4"] .k-slide__chip:nth-child(2) { animation-delay: 0.3s; }
  .k-slide[data-slide="4"] .k-slide__chip:nth-child(3) { animation-delay: 0.6s; }
  .k-slide[data-slide="4"] .k-slide__chip:nth-child(4) { animation-delay: 0.9s; }
  .k-slide[data-slide="4"] .k-slide__chip:nth-child(5) { animation-delay: 1.2s; }
  /* slide 6 — integration chips pulse like live connections */
  .k-slide[data-slide="5"] .k-slide__chip { animation: kChipPulse 3.4s ease-in-out infinite; }
  .k-slide[data-slide="5"] .k-slide__chip:nth-child(2) { animation-delay: 0.4s; }
  .k-slide[data-slide="5"] .k-slide__chip:nth-child(3) { animation-delay: 0.8s; }
  .k-slide[data-slide="5"] .k-slide__chip:nth-child(4) { animation-delay: 1.2s; }
  /* slide 7 — the primary CTA breathes */
  .k-slide[data-slide="6"] .k-slide__cta .k-btn--on-dark { animation: kBtnPulse 2.8s ease-in-out infinite; }
}
@keyframes kGlowBreathe { 0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes kFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes kTileGlow { 0%, 100% { box-shadow: 0 0 0 rgba(90,95,240,0); } 50% { box-shadow: 0 0 20px rgba(90,95,240,0.28); } }
@keyframes kChipPulse { 0%, 100% { transform: translateY(0); border-color: rgba(255,255,255,0.14); } 50% { transform: translateY(-5px); border-color: rgba(90,95,240,0.45); } }
@keyframes kBtnPulse { 0%, 100% { box-shadow: 0 8px 26px -12px rgba(255,255,255,0.2), 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 8px 26px -12px rgba(255,255,255,0.35), 0 0 0 7px rgba(255,255,255,0.06); } }

/* Living text — the emphasised phrase in each slide acts to its meaning */
@media (prefers-reduced-motion: no-preference) {
  /* default: a soft "destination" glow that breathes */
  .k-slide.is-active .k-slide__title em { animation: kEmGlow 4.5s ease-in-out infinite; }
  /* slide 2 · "everywhere" — restless, scattered, never settling */
  .k-slide[data-slide="1"].is-active .k-slide__title em { display: inline-block; animation: kJitter 3.4s ease-in-out infinite; }
  /* slide 4 · "as it happens" — a live highlight streams through, always now */
  .k-slide[data-slide="3"].is-active .k-slide__title em {
    background: linear-gradient(100deg, #b9bcff 22%, #ffffff 42%, #8b6dff 50%, #b9bcff 68%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: kShimmer 2.6s linear infinite;
  }
}
@keyframes kEmGlow { 0%, 100% { text-shadow: 0 0 22px rgba(139,109,255,0.22); } 50% { text-shadow: 0 0 42px rgba(139,109,255,0.55); } }
@keyframes kJitter { 0%, 100% { transform: translate(0, 0) skewX(0); } 22% { transform: translate(1.5px, -1px) skewX(-2.5deg); } 44% { transform: translate(-1.5px, 1px) skewX(1.5deg); } 66% { transform: translate(1px, 1.5px) skewX(2.5deg); } 84% { transform: translate(-1px, -1.5px) skewX(-1.5deg); } }
@keyframes kShimmer { to { background-position: -220% 0; } }

/* Problem scene — fragmentation, acted out */
.ps-glow, .ps-card { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ps-glow { animation: psGlow 4.5s ease-in-out infinite; }
  .ps-card { animation: psFloat 5s ease-in-out infinite; }
  .ps-card--1 { animation-duration: 4.4s; }
  .ps-card--2 { animation-duration: 5.2s; animation-delay: -1.2s; }
  .ps-card--3 { animation-duration: 4.8s; animation-delay: -2.4s; }
  .ps-card--4 { animation-duration: 5.6s; animation-delay: -0.8s; }
  .ps-card--5 { animation-duration: 5s; animation-delay: -3s; }
  .ps-link { animation: psMarch 1.6s linear infinite, psFlicker 3.4s ease-in-out infinite; }
}
@keyframes psGlow { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.78; transform: scale(1.16); } }
@keyframes psFloat {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  25% { transform: translate(16px, -22px) rotate(calc(var(--rot, 0deg) + 4deg)); }
  55% { transform: translate(-18px, 14px) rotate(calc(var(--rot, 0deg) - 3.5deg)); }
  80% { transform: translate(9px, 9px) rotate(calc(var(--rot, 0deg) + 1deg)); }
}
@keyframes psMarch { to { stroke-dashoffset: -28; } }
@keyframes psFlicker { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.34; } }

/* Shift / Integrate / Proven / CTA scenes */
.ss-glow, .ss-hub, .ss-mod, .pv-ping, .pv-node, .pv-live { transform-box: fill-box; transform-origin: center; }
.pv-bar { transform-box: fill-box; transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .ss-glow { animation: psGlow 5s ease-in-out infinite; }
  .ss-hub { animation: ssHub 3.2s ease-in-out infinite; }
  .ss-mod { animation: ssPulse 3.6s ease-in-out infinite; }
  .ss-mod--2 { animation-delay: 0.3s; } .ss-mod--3 { animation-delay: 0.6s; }
  .ss-mod--4 { animation-delay: 0.9s; } .ss-mod--5 { animation-delay: 1.2s; } .ss-mod--6 { animation-delay: 1.5s; }
  .pv-ping { animation: pvPing 2.6s ease-out infinite; }
  .pv-node { animation: ssFloat 5s ease-in-out infinite; }
  .pv-live { animation: pvLive 1.6s ease-in-out infinite; }
  .pv-bar { animation: pvBar 1s ease-in-out infinite; }
}
@keyframes pvBar { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
@keyframes ssHub { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.82; } }
@keyframes ssPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ssFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pvPing { 0% { transform: scale(0.7); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes pvLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.3); } }

/* Hero field — ambient life once the dashboard has assembled */
.hf-bar, .hf-live { transform-box: fill-box; }
.hf-live { transform-origin: center; }
.hf-bar { transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .hf-live { animation: pvLive 1.7s ease-in-out infinite; }
  .hf-bar { animation: hfBar 2.8s ease-in-out infinite; }
  .hf-bar--1 { animation-delay: 0.5s; } .hf-bar--2 { animation-delay: 1.1s; }
  .hf-bar--3 { animation-delay: 0.3s; } .hf-bar--4 { animation-delay: 0.8s; }
}
@keyframes hfBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.86); } }
.hf-mote { transform-box: fill-box; transform-origin: center; opacity: 0.32; }
@media (prefers-reduced-motion: no-preference) {
  .hf-mote { animation: hfMote 7s ease-in-out infinite; }
  .hf-mote--1 { animation-duration: 8.5s; animation-delay: -1.5s; }
  .hf-mote--2 { animation-duration: 6.2s; animation-delay: -3s; }
  .hf-mote--3 { animation-duration: 9s; animation-delay: -0.8s; }
  .hf-mote--4 { animation-duration: 7.6s; animation-delay: -4.2s; }
}
@keyframes hfMote {
  0%, 100% { transform: translate(0, 0); opacity: 0.16; }
  50% { transform: translate(-14px, -22px); opacity: 0.44; }
}

/* top-aligned content + soft top scrim (integrations slide) */
.k-slide__inner--top { align-self: flex-start; margin-top: 11vh; }
.k-slide__scrim--soft { background: linear-gradient(to bottom, rgba(13,14,32,0.72) 0%, rgba(13,14,32,0.28) 32%, transparent 56%); }

@media (max-width: 767.98px) {
  .k-deck__dots { right: 0.9rem; }
  .k-deck__arrows { bottom: 1.1rem; right: 0.9rem; }
  .k-deck__counter { bottom: 1.6rem; left: 1rem; }
  .k-deck__hint { display: none; }
  .k-slide { padding: 5rem 1.25rem; }
  .k-slide__title { font-size: clamp(1.9rem, 1rem + 5vw, 3rem); }
  .k-slide__sub { font-size: 1.05rem; }
  .k-slide__metrics { flex-direction: column; gap: 1.15rem; align-items: center; margin-top: 2rem; }
  .k-slide__logos { gap: 0.9rem 1.3rem; margin-top: 2rem; }
  .k-slide__logos .k-chip { font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .k-deck.is-deck .k-slide, .k-deck.is-deck .k-up { transition: none; }
}

/* ---------- Node-convergence graphic (hero signature) ---------- */
/* min-width:0 prevents the inline SVG from forcing its flex column to the viewBox width */
.k-hero [class*="col-"] { min-width: 0; }
.k-graph { position: relative; width: 100%; min-width: 0; max-width: 100%; }
.k-graph svg { width: 100%; max-width: 100%; height: auto; }
.k-graph .edge { stroke: rgba(90,95,240,0.55); stroke-width: 2; fill: none; stroke-linecap: round; }
.k-graph .edge-dim { stroke: rgba(255,255,255,0.14); stroke-width: 2; fill: none; stroke-dasharray: 4 6; stroke-linecap: round; }
.k-graph .node { fill: var(--k-indigo); }
.k-graph .node-hub { fill: #fff; }
.k-graph .node-loose { fill: #33365e; }
.k-graph .flow { stroke: var(--k-violet); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 8 220; }
.k-graph .src-chip { fill: rgba(28,30,66,0.92); stroke: rgba(255,255,255,0.12); rx: 8; }
.k-graph .src-label { font-family: var(--k-mono); font-size: 12px; fill: #b9bce0; letter-spacing: 0.04em; }
.k-graph .hub-panel { fill: rgba(90,95,240,0.10); stroke: rgba(90,95,240,0.5); }
.k-graph .hub-row { fill: rgba(255,255,255,0.14); }
.k-graph .hub-row--live { fill: var(--k-live); }

@media (prefers-reduced-motion: no-preference) {
  .k-graph .edge, .k-graph .node, .k-graph .src-chip, .k-graph .src-label, .k-graph .hub-panel, .k-graph .hub-row { opacity: 0; animation: kGraphIn 0.6s ease forwards; }
  .k-graph .node-hub { animation-delay: 0.1s; }
  .k-graph .g-e1 { animation-delay: 0.35s; } .k-graph .g-e2 { animation-delay: 0.5s; } .k-graph .g-e3 { animation-delay: 0.65s; } .k-graph .g-e4 { animation-delay: 0.8s; }
  .k-graph .g-s1 { animation-delay: 0.4s; } .k-graph .g-s2 { animation-delay: 0.55s; } .k-graph .g-s3 { animation-delay: 0.7s; } .k-graph .g-s4 { animation-delay: 0.85s; }
  .k-graph .g-panel { animation-delay: 0.25s; }
  .k-graph .flow { animation: kFlow 3.4s linear infinite; animation-delay: 1.1s; }
}
@keyframes kGraphIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kFlow { to { stroke-dashoffset: -456; } }

/* ---------- Page header (interior pages) ---------- */
.k-pagehead {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 20% 0%, #1c1e42 0%, var(--k-ink) 60%, #101124 100%);
  color: #cdd0ee; padding: clamp(8rem, 6rem + 6vw, 10rem) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem);
  text-align: center;
}
.k-pagehead .container { position: relative; z-index: 2; }
.k-pagehead h1 { font-family: var(--k-serif); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: #fff; letter-spacing: -0.02em; line-height: 1.05; margin: 1.1rem 0 1rem; }
.k-pagehead p { color: #a9adcf; font-size: 1.15rem; max-width: 40rem; margin: 0 auto; }
.k-pagehead .k-graph-strip { position: absolute; inset: 0; opacity: 0.5; }
.k-crumb { font-family: var(--k-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7d81ad; }
.k-crumb a { color: #a9adcf; }
.k-crumb a:hover { color: #fff; }

/* ---------- Comparison ---------- */
.k-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.k-compare__col { padding: 2.25rem; border-radius: var(--k-r); }
.k-compare__col--old { background: var(--k-mist); border: 1px solid var(--k-line); }
.k-compare__col--new { background: var(--k-ink); color: #cfd1ee; border: 1px solid var(--k-ink-3); box-shadow: var(--k-shadow); }
.k-compare__col h4 { font-family: var(--k-serif); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.25rem; }
.k-compare__col--new h4 { color: #fff; }
.k-compare__tag { font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 1.25rem; }
.k-compare__col--new .k-compare__tag { color: #9a9ec9; }
.k-compare__list { list-style: none; padding: 0; margin: 0; }
.k-compare__list li { display: flex; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--k-line); font-size: 0.95rem; line-height: 1.5; }
.k-compare__col--new .k-compare__list li { border-top-color: rgba(255,255,255,0.08); color: #c4c7e6; }
.k-compare__list li i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.k-compare__list--old i { color: #b6b9cc; }
.k-compare__list--new i { color: var(--k-violet); }
.k-compare__vs { align-self: center; font-family: var(--k-mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--k-muted); padding: 0 1.25rem; }
@media (max-width: 991.98px) {
  .k-compare { grid-template-columns: 1fr; gap: 1rem; }
  .k-compare__vs { padding: 0.25rem; }
}

/* ---------- Modules grid ---------- */
.k-module { text-align: left; padding: 1.5rem; border-radius: var(--k-r-sm); border: 1px solid var(--k-line); background: var(--k-paper); height: 100%; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.k-module:hover { border-color: rgba(90,95,240,0.3); transform: translateY(-3px); box-shadow: var(--k-shadow-sm); }
.k-module__icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--k-indigo); background: var(--k-lilac); margin-bottom: 0.9rem; }
.k-module h6 { font-family: var(--k-sans); font-weight: 700; color: var(--k-slate); margin-bottom: 0.35rem; font-size: 1rem; }
.k-module p { font-size: 0.88rem; color: var(--k-body); margin: 0; line-height: 1.55; }

/* ---------- Process / timeline (a real sequence → numbered) ---------- */
.k-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.k-step { position: relative; padding: 1.75rem 1.5rem; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: var(--k-r); }
.k-step__n { font-family: var(--k-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--k-indigo); }
.k-step__phase { font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); display: block; margin-bottom: 0.75rem; }
.k-step h5 { font-family: var(--k-sans); font-weight: 700; color: var(--k-slate); font-size: 1.1rem; margin: 0.75rem 0 0.5rem; }
.k-step p { font-size: 0.92rem; color: var(--k-body); margin: 0; }
.k-step__dot { position: absolute; top: 1.75rem; right: 1.5rem; width: 9px; height: 9px; border-radius: 50%; background: var(--k-lilac); border: 2px solid var(--k-indigo); }
@media (max-width: 991.98px) { .k-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .k-steps { grid-template-columns: 1fr; } }

/* ---------- Vertical timeline ---------- */
.k-timeline { position: relative; max-width: 46rem; margin: 0 auto; padding-left: 3.25rem; }
.k-timeline::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--k-indigo), rgba(90,95,240,0.15)); }
.k-tl { position: relative; padding-bottom: 2.25rem; }
.k-tl:last-child { padding-bottom: 0; }
.k-tl__marker { position: absolute; left: -3.25rem; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--k-paper); border: 2px solid var(--k-indigo); color: var(--k-indigo); font-family: var(--k-mono); font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; z-index: 1; }
.k-tl__phase { font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-muted); }
.k-tl h5 { font-family: var(--k-sans); font-weight: 700; color: var(--k-slate); font-size: 1.15rem; margin: 0.35rem 0 0.4rem; }
.k-tl p { color: var(--k-body); margin: 0; }

/* Pricing cards */
.k-price { border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 2rem; background: var(--k-paper); height: 100%; }
.k-price--accent { border-color: rgba(90,95,240,0.35); box-shadow: var(--k-shadow); }
.k-price__tag { font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-indigo); }
.k-price h4 { font-family: var(--k-serif); font-weight: 500; font-size: 1.5rem; color: var(--k-slate); margin: 0.5rem 0 0.75rem; }

/* ---------- Integrations ---------- */
.k-integration { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.5rem 1rem; border: 1px solid var(--k-line); border-radius: var(--k-r-sm); background: var(--k-paper); height: 100%; transition: border-color 0.2s, transform 0.2s; }
.k-integration:hover { border-color: rgba(90,95,240,0.3); transform: translateY(-3px); }
.k-integration__logo { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.k-integration h6 { font-weight: 700; color: var(--k-slate); margin: 0; font-size: 0.95rem; }
.k-integration small { color: var(--k-muted); font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.03em; }

/* ---------- Accordion (FAQ) ---------- */
.k-acc { border: 1px solid var(--k-line); border-radius: var(--k-r); overflow: hidden; background: var(--k-paper); }
.k-acc__item + .k-acc__item { border-top: 1px solid var(--k-line); }
.k-acc__btn { width: 100%; text-align: left; background: none; border: 0; padding: 1.35rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--k-sans); font-weight: 600; font-size: 1.05rem; color: var(--k-slate); cursor: pointer; transition: color 0.2s; }
.k-acc__btn:hover { color: var(--k-indigo); }
.k-acc__btn .k-acc__ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--k-lilac); color: var(--k-indigo); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: transform 0.28s ease, background 0.2s; }
.k-acc__item.is-open .k-acc__ico { transform: rotate(45deg); background: var(--k-indigo); color: #fff; }
.k-acc__panel { max-height: 0; overflow: hidden; transition: max-height 0.32s ease; }
.k-acc__panel-inner { padding: 0 1.5rem 1.4rem; color: var(--k-body); line-height: 1.7; }

/* ---------- Stat / metric blocks ---------- */
.k-metric { text-align: left; }
.k-metric__v { font-family: var(--k-serif); font-weight: 500; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); color: var(--k-slate); line-height: 1; letter-spacing: -0.02em; }
.k-dark .k-metric__v { color: #fff; }
.k-metric__l { font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); margin-top: 0.6rem; }
.k-dark .k-metric__l { color: #8f93bd; }

/* ---------- CTA band ---------- */
.k-cta {
  position: relative; overflow: hidden; border-radius: var(--k-r-lg);
  background: radial-gradient(120% 160% at 100% 0%, #2a2d63 0%, var(--k-ink) 55%, #0e0f22 100%);
  color: #cdd0ee; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.k-cta__glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle, rgba(90,95,240,0.5), transparent 70%); top: -120px; right: -60px; }
.k-cta h3 { font-family: var(--k-serif); font-weight: 500; color: #fff; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.08; }
.k-cta__list { list-style: none; padding: 0; margin: 0; }
.k-cta__list li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; }
.k-cta__list li .ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(90,95,240,0.25); color: #c3c5ff; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-top: 2px; }
.k-cta__list h6 { color: #fff; margin: 0 0 0.15rem; font-size: 0.98rem; font-weight: 700; }
.k-cta__list small { color: #9a9ec9; }

/* ---------- Case study ---------- */
.k-meta { border-left: 2px solid var(--k-indigo); padding-left: 1rem; }
.k-meta__l { font-family: var(--k-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); }
.k-meta__v { font-weight: 700; color: var(--k-slate); margin-top: 0.15rem; }
.k-ba { border-radius: var(--k-r); padding: 2.5rem 2rem; text-align: center; height: 100%; }
.k-ba--before { background: var(--k-mist); border: 1px solid var(--k-line); }
.k-ba--after { background: var(--k-ink); }
.k-ba__l { font-family: var(--k-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-muted); }
.k-ba--after .k-ba__l { color: #8f93bd; }
.k-ba__v { font-family: var(--k-serif); font-weight: 500; font-size: clamp(2.6rem, 2rem + 2.5vw, 3.6rem); line-height: 1; margin-top: 0.6rem; letter-spacing: -0.02em; }
.k-ba--before .k-ba__v { color: #b04a4a; }
.k-ba--after .k-ba__v { color: #fff; }
.k-ba-arrow { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--k-indigo); }
.k-stack { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.15rem; border: 1px solid var(--k-line); border-radius: var(--k-r-sm); background: var(--k-paper); width: 100%; font-weight: 600; color: var(--k-slate); font-size: 0.92rem; }
.k-stack i { color: var(--k-indigo); font-size: 1.3rem; }

/* ---------- Prose (legal / long text) ---------- */
.k-prose { max-width: 46rem; }
.k-prose h2 { font-family: var(--k-serif); font-weight: 500; font-size: 1.6rem; color: var(--k-slate); margin: 2.5rem 0 0.9rem; letter-spacing: -0.015em; }
.k-prose h3 { font-weight: 700; font-size: 1.15rem; color: var(--k-slate); margin: 1.75rem 0 0.6rem; }
.k-prose p, .k-prose li { color: var(--k-body); line-height: 1.75; }
.k-prose ul { padding-left: 1.2rem; }
.k-prose li { margin-bottom: 0.4rem; }
.k-prose a { color: var(--k-indigo-600); text-decoration: underline; text-underline-offset: 2px; }
.k-prose__meta { font-family: var(--k-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--k-muted); }

/* ---------- Footer ---------- */
.k-footer { background: var(--k-ink); color: #9a9ec3; }
.k-footer a { color: #b3b7d8; }
.k-footer a:hover { color: #fff; }
.k-footer__top { padding: clamp(3rem, 2.5rem + 2vw, 4.5rem) 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.k-footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.k-footer__brand img { height: 32px; }
.k-footer__wordmark { font-family: var(--k-serif); font-weight: 600; font-size: 1.3rem; color: #fff; letter-spacing: -0.02em; }
.k-footer__title { font-family: var(--k-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7d81ad; margin-bottom: 1.1rem; }
.k-footer__list { list-style: none; padding: 0; margin: 0; }
.k-footer__list li { margin-bottom: 0.6rem; font-size: 0.94rem; }
.k-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); color: #b3b7d8; font-size: 1.15rem; transition: all 0.2s; }
.k-footer__social:hover { background: var(--k-indigo); border-color: var(--k-indigo); color: #fff; transform: translateY(-2px); }
.k-footer__bottom { padding: 1.5rem 0; }
.k-footer__bottom, .k-footer__bottom a { font-size: 0.85rem; color: #7d81ad; }
.k-footer__contact { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.94rem; }

/* ---------- Reveal animation (scroll journey) ---------- */
.k-reveal { opacity: 1; transform: none; }
.js-ready .k-reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1), transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-ready .k-reveal.is-in { opacity: 1; transform: none; }
/* directional / scale variants for choreography */
.js-ready .k-reveal--l { transform: translateX(-46px); }
.js-ready .k-reveal--r { transform: translateX(46px); }
.js-ready .k-reveal--scale { transform: scale(0.93); }
.js-ready .k-reveal--rise { transform: translateY(60px); }
.js-ready .k-reveal--l.is-in, .js-ready .k-reveal--r.is-in, .js-ready .k-reveal--scale.is-in, .js-ready .k-reveal--rise.is-in { transform: none; }
.k-reveal.d1 { transition-delay: 0.07s; }
.k-reveal.d2 { transition-delay: 0.14s; }
.k-reveal.d3 { transition-delay: 0.21s; }
.k-reveal.d4 { transition-delay: 0.28s; }
.k-reveal.d5 { transition-delay: 0.35s; }
.k-reveal.d6 { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .k-reveal { opacity: 1; transform: none; transition: none; }
  .k-graph .flow { display: none; }
}

/* ---------- Back to top / loader ---------- */
.k-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 46px; height: 46px; border-radius: 50%; background: var(--k-indigo); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s; z-index: 1020; box-shadow: 0 12px 28px -12px var(--k-glow); }
.k-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.k-top:hover { background: var(--k-indigo-600); transform: translateY(-3px); }

/* ---------- Utilities ---------- */
.k-divider-node { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.k-divider-node::before, .k-divider-node::after { content: ''; height: 1px; width: 60px; background: var(--k-line-strong); }
.k-divider-node span { width: 8px; height: 8px; border-radius: 50%; background: var(--k-indigo); }