/* =========================================================
   Kinis AI — WordPress theme stylesheet
   Hand-tuned mirror of the React app design system
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #ffffff;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
[hidden] { display: none !important; }

:root {
  --color-primary: #ff760c;
  --color-primary-foreground: #ffffff;
  --color-foreground: #111111;
  --color-muted-foreground: #6b6b6b;
  --color-border: #e5e5e5;
  --color-background: #ffffff;
}

.kn-font-display {
  font-family: "Phudu", "Manrope", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ===== Header ===== */
.kn-header {
  position: fixed;
  inset: 0 0 auto 0;
  top: 12px;
  z-index: 50;
  width: 100%;
}
@media (min-width: 640px) { .kn-header { top: 16px; } }
.kn-header__inner {
  margin: 0 auto;
  display: flex;
  height: 56px;
  width: calc(100% - 24px);
  max-width: 1152px;
  align-items: center;
  justify-content: space-between;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.4);
  padding: 0 8px 0 12px;
  box-shadow: 0 8px 30px rgba(15,23,42,0.06);
  backdrop-filter: blur(20px) saturate(140%);
}
@media (min-width: 640px) {
  .kn-header__inner { height: 64px; padding: 0 12px 0 20px; }
}
.kn-logo { display: inline-flex; align-items: center; padding-left: 4px; }
@media (min-width: 640px) { .kn-logo { padding-left: 8px; } }
.kn-logo img { height: 24px; width: auto; }
.kn-nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .kn-nav { display: flex; } }
.kn-nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,17,0.8);
  transition: color .2s ease;
}
.kn-nav a:hover { color: var(--color-primary); }

.kn-header__actions { display: flex; align-items: center; gap: 8px; }
@media (min-width: 640px) { .kn-header__actions { gap: 12px; } }

.kn-login {
  display: none;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(17,17,17,0.8);
  transition: color .2s ease;
}
.kn-login:hover { color: var(--color-primary); }
@media (min-width: 768px) { .kn-login { display: inline-flex; } }

.kn-btn-primary {
  display: none;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-primary);
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background .2s ease, box-shadow .2s ease;
}
.kn-btn-primary:hover { background: rgba(255,118,12,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .kn-btn-primary { display: inline-flex; } }

.kn-menu-btn {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.6);
  color: var(--color-foreground);
  transition: background .2s ease;
}
.kn-menu-btn:hover { background: rgba(255,255,255,0.8); }
@media (min-width: 1024px) { .kn-menu-btn { display: none; } }
.kn-menu-btn svg { height: 20px; width: 20px; }

/* ===== Drawer ===== */
.kn-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 60;
}
.kn-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.kn-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 85%;
  max-width: 384px;
  background: #000;
  color: #fff;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 70;
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
}
.kn-drawer.is-open { transform: translateX(0); }
.kn-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 32px;
  width: 32px;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.kn-drawer__close:hover { color: #fff; }
.kn-drawer__nav {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.kn-drawer__nav a {
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: background .2s ease, color .2s ease;
}
.kn-drawer__nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kn-drawer__cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
}
@media (min-width: 768px) { .kn-drawer__cta { display: none; } }
.kn-drawer__cta a {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease;
}
.kn-drawer__cta .kn-d-login {
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #fff;
}
.kn-drawer__cta .kn-d-login:hover { background: rgba(255,255,255,0.1); }
.kn-drawer__cta .kn-d-cta {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.kn-drawer__cta .kn-d-cta:hover { background: rgba(255,118,12,0.9); }

/* ===== Hero ===== */
.kn-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  padding-top: 80px;
  padding-bottom: 160px;
}
@media (min-width: 640px) { .kn-hero { padding-top: 96px; padding-bottom: 224px; } }
@media (min-width: 1024px) { .kn-hero { min-height: 100svh; padding-bottom: 288px; } }

.kn-hero__backdrop {
  pointer-events: none;
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(255,220,180,0.28) 45%, rgba(255,170,100,0.44) 80%, rgba(255,150,80,0.56) 100%);
  -webkit-clip-path: ellipse(180% 78% at 50% 0%);
          clip-path: ellipse(180% 78% at 50% 0%);
}
@media (min-width: 640px) {
  .kn-hero__backdrop {
    -webkit-clip-path: ellipse(140% 72% at 50% 0%);
            clip-path: ellipse(140% 72% at 50% 0%);
  }
}
.kn-hero__glow {
  pointer-events: none;
  position: absolute;
  top: -160px;
  left: 50%;
  height: 500px;
  width: 800px;
  transform: translateX(-50%);
  border-radius: 9999px;
  opacity: 0.25;
  filter: blur(64px);
  background: radial-gradient(closest-side, rgba(255,140,60,0.25), transparent);
}

.kn-hero__inner {
  position: relative;
  margin: 0 auto;
  display: flex;
  width: 100%;
  max-width: 1280px;
  flex: 1;
  flex-direction: column;
  padding: 8px 16px 0;
}
@media (min-width: 640px) { .kn-hero__inner { padding: 12px 24px 0; } }
@media (min-width: 1024px) { .kn-hero__inner { padding: 16px 32px 0; } }

.kn-hero__copy { margin: 0 auto; max-width: 56rem; text-align: center; }

.kn-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255,118,12,0.2);
  background: rgba(255,118,12,0.05);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
}
.kn-dot { position: relative; display: flex; height: 8px; width: 8px; }
.kn-dot__ping {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: var(--color-primary);
  opacity: 0.75;
  animation: kn-ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
.kn-dot__core {
  position: relative;
  display: inline-flex;
  height: 8px; width: 8px;
  border-radius: 9999px;
  background: var(--color-primary);
}
@keyframes kn-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.kn-hero__title {
  margin-top: 16px;
  text-wrap: balance;
  font-size: 30px;
  font-weight: 600;
  color: var(--color-foreground);
  line-height: 1.1;
}
@media (min-width: 640px) { .kn-hero__title { font-size: 36px; } }
@media (min-width: 768px) { .kn-hero__title { font-size: 48px; } }
@media (min-width: 1024px) { .kn-hero__title { font-size: 56px; line-height: 1.05; } }
.kn-hero__title .kn-accent { color: var(--color-primary); }

.kn-hero__sub {
  margin: 16px auto 0;
  max-width: 48rem;
  text-wrap: pretty;
  font-size: 14px;
  color: var(--color-muted-foreground);
  line-height: 1.6;
}
@media (min-width: 640px) { .kn-hero__sub { font-size: 16px; } }

.kn-cta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 640px) {
  .kn-cta { display: flex; flex-direction: row; gap: 12px; }
}

.kn-cta__primary {
  display: inline-flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 9999px;
  background: var(--color-primary);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background .2s ease, box-shadow .2s ease;
}
.kn-cta__primary:hover { background: rgba(255,118,12,0.9); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@media (min-width: 640px) {
  .kn-cta__primary { height: 44px; width: auto; gap: 8px; padding: 0 24px; font-size: 14px; }
}
.kn-cta__primary svg { height: 14px; width: 14px; transition: transform .2s ease; }
.kn-cta__primary:hover svg { transform: translateX(2px); }
@media (min-width: 640px) { .kn-cta__primary svg { height: 16px; width: 16px; } }

.kn-cta__ghost {
  display: inline-flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-foreground);
  transition: border-color .2s ease, color .2s ease;
}
.kn-cta__ghost:hover { border-color: rgba(255,118,12,0.4); color: var(--color-primary); }
@media (min-width: 640px) {
  .kn-cta__ghost { height: 44px; width: auto; padding: 0 24px; font-size: 14px; }
}

.kn-cta__app {
  grid-column: span 2;
  margin: 0 auto;
  display: inline-flex;
  height: 40px;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 9999px;
  background: #111;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: background .2s ease;
}
.kn-cta__app:hover { background: rgba(17,17,17,0.9); }
.kn-cta__app svg { height: 20px; width: 20px; fill: currentColor; }
@media (min-width: 640px) {
  .kn-cta__app { grid-column: auto; height: 44px; gap: 8px; padding: 0 24px; font-size: 14px; margin: 0; }
}

/* ===== Product visual ===== */
.kn-visual {
  position: relative;
  z-index: 10;
  margin: 24px auto 0;
  display: flex;
  width: 100%;
  flex: none;
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 640px) {
  .kn-visual { margin-top: 32px; flex: 1 1 0; align-items: flex-end; transform: translateY(96px); }
}
@media (min-width: 1024px) {
  .kn-visual { margin-top: 48px; transform: translateY(120px); }
}

/* Mobile combined layout */
.kn-visual__mobile {
  position: relative;
  margin-left: -16px;
  margin-right: -16px;
  display: flex;
  width: calc(100% + 32px);
  max-width: none;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 640px) { .kn-visual__mobile { display: none; } }
.kn-visual__mobile > img { display: block; width: 100%; object-fit: cover; }
.kn-floats-mobile {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(12% - 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  transform: translate(20%, 20%);
}
.kn-floats-mobile img {
  width: 30%;
  max-width: 144px;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.18));
}
.kn-floats-mobile .kn-float-1 { transform: scale(1.1) translate(-16px, -20px); }
.kn-floats-mobile .kn-float-2 { transform: scale(1.1) translate(-12px, 0); }

/* Tablet/desktop layout */
.kn-visual__desktop {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .kn-visual__desktop {
    display: flex;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
}
@media (min-width: 1024px) {
  .kn-visual__desktop { width: 100%; margin-left: auto; margin-right: auto; }
}
.kn-room {
  object-fit: cover;
}
@media (min-width: 640px) {
  .kn-room { width: 100vw; margin-top: -24px; }
}
@media (min-width: 1024px) {
  .kn-room { width: 85vw; margin-top: -52px; }
}
.kn-pose {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  max-width: 234px;
}
@media (min-width: 640px) {
  .kn-pose { margin-top: -24px; width: 22%; max-width: 210px; }
}
@media (min-width: 1024px) {
  .kn-pose { margin-top: -52px; width: 25%; max-width: 234px; }
}
.kn-floating {
  pointer-events: none;
  position: absolute;
  width: 20%;
  max-width: 200px;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.18));
}
.kn-floating--left {
  left: calc(22% - 12px);
  top: 42%;
  transform: translateY(-50%);
}
.kn-floating--right {
  right: calc(22% - 12px);
  top: 58%;
  transform: translateY(-50%);
}
@media (min-width: 640px) {
  .kn-floating--left  { left: calc(22% - 48px); margin-top: 12px; }
  .kn-floating--right { right: calc(22% - 48px); margin-top: 12px; }
}
@media (min-width: 1024px) {
  .kn-floating--left  { left: calc(22% - 12px); margin-top: -20px; }
  .kn-floating--right { right: calc(22% - 12px); margin-top: -20px; }
}

/* ===== Float animations ===== */
@keyframes kn-float-y {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
@keyframes kn-float-y-delay {
  0%, 100% { translate: 0 -10px; }
  50%      { translate: 0 6px; }
}
.kn-animate-float       { animation: kn-float-y 5s ease-in-out infinite; }
.kn-animate-float-delay { animation: kn-float-y-delay 6s ease-in-out infinite; }

/* Use individual transforms on desktop floats so animate translate doesn't break -translate-y-1/2 */
/* (we used `translate:` instead of transform: above, so transform stays for centering) */

/* Mobile floats: combine static transform with animation via individual translate */
.kn-floats-mobile .kn-animate-float       { animation: kn-float-y 5s ease-in-out infinite; }
.kn-floats-mobile .kn-animate-float-delay { animation: kn-float-y-delay 6s ease-in-out infinite; }


/* =========================================================
   Missing Signal section (v0.1.0)
   ========================================================= */
.kn-missing {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  margin-top: -80px;
  padding: 32px 0 48px;
}
@media (min-width: 640px) { .kn-missing { padding: 64px 0 24px; } }
@media (min-width: 1024px) { .kn-missing { margin-top: -160px; padding: 40px 0 64px; } }

.kn-missing__backdrop {
  pointer-events: none;
  position: absolute; inset: 0;
  opacity: .6;
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(255,170,100,0.10), transparent 70%),
    radial-gradient(50% 40% at 85% 75%, rgba(255,140,60,0.10), transparent 70%);
}

.kn-missing__inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .kn-missing__inner { gap: 40px; } }
@media (min-width: 1024px) {
  .kn-missing__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 0 40px;
  }
}

/* ---- Copy ---- */
.kn-missing__copy { max-width: 36rem; }
@media (min-width: 768px) { .kn-missing__copy { max-width: none; } }
@media (min-width: 1024px) { .kn-missing__copy { max-width: 36rem; } }

.kn-missing__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  border: 1px solid #fed7aa;
  background: rgba(255,247,237,0.7);
  padding: 4px 12px;
  font-size: 12px; font-weight: 500;
  color: #c2410c;
}
.kn-missing__tag .kn-dot { position: relative; display: inline-flex; height: 8px; width: 8px; }
.kn-missing__tag .kn-dot__ping {
  position: absolute; inset: 0;
  border-radius: 9999px; background: #f97316; opacity: .75;
  animation: kn-ping 2s cubic-bezier(0,0,.2,1) infinite;
}
.kn-missing__tag .kn-dot__core {
  position: relative; display: inline-flex; height: 8px; width: 8px;
  border-radius: 9999px; background: #f97316;
}

.kn-missing__title {
  margin: 20px 0 0;
  font-size: 30px; line-height: 1.05; color: #171717;
  font-weight: 600;
}
@media (min-width: 640px) { .kn-missing__title { font-size: 36px; } }
.kn-br-lg { display: none; }
@media (min-width: 1024px) { .kn-br-lg { display: inline; } }

.kn-missing__title-accent {
  background: linear-gradient(90deg, #ea580c, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kn-missing__sub {
  margin-top: 24px;
  font-size: 14px; line-height: 1.65; color: #525252;
}
.kn-missing__sub strong { color: #171717; font-weight: 700; }
@media (min-width: 640px) { .kn-missing__sub { font-size: 16px; } }

.kn-missing__quote {
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 2px solid #f97316;
}
.kn-missing__quote blockquote {
  margin: 0;
  font-size: 20px; line-height: 1.3; color: #171717;
}
@media (min-width: 640px) { .kn-missing__quote blockquote { font-size: 24px; } }
@media (min-width: 768px) { .kn-missing__quote blockquote { white-space: nowrap; } }
.kn-missing__quote-accent {
  font-weight: 700;
  color: #ea580c;
  white-space: nowrap;
}

/* ---- Cluster ---- */
.kn-cluster-wrap { position: relative; }

.kn-cluster-row {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
}
@media (min-width: 768px) {
  .kn-cluster-row {
    max-width: none;
    margin-top: -32px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
@media (min-width: 1024px) {
  .kn-cluster-row {
    display: block;
    max-width: 560px;
    margin-top: 0;
    gap: 0;
  }
}

.kn-cluster {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
@media (min-width: 768px) { .kn-cluster { width: 72%; flex-shrink: 0; } }
@media (min-width: 1024px) { .kn-cluster { width: 100%; } }

.kn-cluster__ring {
  position: absolute;
  inset: 4%;
}
@media (min-width: 640px) { .kn-cluster__ring { inset: 8%; } }

.kn-cluster__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.kn-cluster__core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.kn-cluster__core-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 80px; width: 80px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 10px 30px -10px rgba(234,88,12,0.45);
  outline: 1px solid #fed7aa;
  text-align: center;
}
@media (min-width: 640px) { .kn-cluster__core-inner { height: 96px; width: 96px; } }
@media (min-width: 768px) { .kn-cluster__core-inner { height: 112px; width: 112px; } }
@media (min-width: 1024px) { .kn-cluster__core-inner { height: 96px; width: 96px; } }

.kn-cluster__core-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #ea580c;
}
.kn-cluster__core-title {
  font-size: 14px; line-height: 1.15; color: #171717;
}
@media (min-width: 640px) { .kn-cluster__core-title { font-size: 16px; } }
@media (min-width: 768px) { .kn-cluster__core-title { font-size: 18px; } }
@media (min-width: 1024px) { .kn-cluster__core-title { font-size: 16px; } }

.kn-cluster__core-ping {
  pointer-events: none;
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 1px solid rgba(253,186,116,0.6);
  animation: kn-ping 3s cubic-bezier(0,0,.2,1) infinite;
}

/* ---- Bubble ---- */
.kn-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
}
.kn-bubble__inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 80px; width: 80px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  text-align: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
  outline: 1px solid #ffedd5;
  backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .kn-bubble__inner { height: 96px; width: 96px; } }
@media (min-width: 768px) { .kn-bubble__inner { height: 112px; width: 112px; } }
@media (min-width: 1024px) { .kn-bubble__inner { height: 96px; width: 96px; } }

.kn-bubble__icon { color: #ea580c; display: inline-flex; }
.kn-bubble__icon svg { height: 20px; width: 20px; }
@media (min-width: 640px) { .kn-bubble__icon svg { height: 24px; width: 24px; } }
@media (min-width: 768px) { .kn-bubble__icon svg { height: 28px; width: 28px; } }
@media (min-width: 1024px) { .kn-bubble__icon svg { height: 24px; width: 24px; } }

.kn-bubble__label {
  margin-top: 4px; padding: 0 4px;
  font-size: 10px; font-weight: 500; line-height: 1.15;
  color: #404040;
}
@media (min-width: 640px) { .kn-bubble__label { font-size: 11px; } }
@media (min-width: 768px) { .kn-bubble__label { font-size: 12px; } }
@media (min-width: 1024px) { .kn-bubble__label { font-size: 11px; } }

.kn-bubble__halo {
  pointer-events: none;
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(255,170,100,0.18), transparent 70%);
}

/* Missing bubble (Movement Health) */
.kn-bubble--missing .kn-bubble__inner {
  background: linear-gradient(135deg, #f97316, #f59e0b);
  outline: 1px solid #fed7aa;
  box-shadow: 0 12px 30px -10px rgba(234,88,12,0.6);
}
.kn-bubble--missing .kn-bubble__icon { color: #ffffff; }
.kn-bubble--missing .kn-bubble__label { color: #ffffff; }
.kn-bubble--missing .kn-bubble__halo {
  background: none;
}
.kn-bubble__badge {
  position: absolute; top: -6px; right: -6px;
  border-radius: 9999px;
  background: #ffffff;
  padding: 2px 6px;
  font-size: 9px; font-weight: 600;
  color: #ea580c;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  outline: 1px solid #fed7aa;
  white-space: nowrap;
  z-index: 2;
}

/* ---- Missing card ---- */
.kn-missing-card-wrap {
  margin-top: -16px;
  display: flex;
  justify-content: center;
}
@media (min-width: 640px) {
  .kn-missing-card-wrap {
    position: absolute;
    bottom: -16px;
    right: -16px;
    left: auto;
    margin-top: 0;
    justify-content: flex-end;
  }
}
@media (min-width: 768px) {
  .kn-missing-card-wrap {
    position: static;
    margin-top: 0;
    bottom: auto; right: auto;
    flex: 1;
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .kn-missing-card-wrap {
    position: absolute;
    bottom: -16px;
    right: -16px;
    left: auto;
    justify-content: flex-end;
  }
}

.kn-missing-card {
  position: relative;
  animation: kn-float-y 4s ease-in-out infinite;
}
.kn-missing-card__orbit {
  position: absolute; inset: -8px;
  border-radius: 16px;
  border: 2px dashed rgba(251,146,60,0.7);
}
.kn-missing-card__inner {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  padding: 12px 16px;
  color: #ffffff;
  box-shadow: 0 20px 40px -15px rgba(234,88,12,0.6);
}
@media (min-width: 640px) { .kn-missing-card__inner { padding: 16px 20px; } }

.kn-missing-card__icon {
  display: flex; align-items: center; justify-content: center;
  height: 40px; width: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  outline: 1px solid rgba(255,255,255,0.3);
}
.kn-missing-card__icon svg { height: 20px; width: 20px; }
@media (min-width: 640px) {
  .kn-missing-card__icon { height: 48px; width: 48px; }
  .kn-missing-card__icon svg { height: 24px; width: 24px; }
}

.kn-missing-card__text { line-height: 1.15; }
.kn-missing-card__kicker {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,0.8);
}
.kn-missing-card__title { font-size: 16px; }
@media (min-width: 640px) { .kn-missing-card__title { font-size: 18px; } }

.kn-missing-card__badge {
  position: absolute; top: -8px; right: -8px;
  border-radius: 9999px;
  background: #ffffff;
  padding: 2px 8px;
  font-size: 10px; font-weight: 600;
  color: #ea580c;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  outline: 1px solid #fed7aa;
}

/* ============================================================
   Differentiation section (v0.1.1)
   ============================================================ */
.kn-diff {
  position: relative;
  overflow: hidden;
  background: rgba(255,247,237,0.3);
  padding: 48px 0;
}
@media (min-width: 640px) { .kn-diff { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-diff { padding: 64px 0; } }

.kn-diff__backdrop {
  position: absolute; inset: 0;
  opacity: 0.6; pointer-events: none;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(255,170,100,0.14), transparent 70%),
    radial-gradient(50% 40% at 15% 85%, rgba(255,140,60,0.10), transparent 70%);
}
.kn-diff__hairline {
  position: absolute; left: 0; right: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(254,215,170,0.6), transparent);
}
.kn-diff__hairline--top { top: 0; }
.kn-diff__hairline--bottom { bottom: 0; }

.kn-diff__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .kn-diff__inner {
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 48px;
    padding: 0 40px;
  }
}

.kn-diff__copy { }
@media (min-width: 1024px) {
  .kn-diff__copy { position: sticky; top: 96px; }
}

.kn-diff__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  border: 1px solid #fed7aa;
  background: rgba(255,247,237,0.7);
  padding: 4px 12px;
  font-size: 12px; font-weight: 500;
  color: #c2410c;
}

.kn-diff__title {
  margin-top: 20px;
  font-size: 30px;
  line-height: 1.05;
  color: #171717;
}
@media (min-width: 640px) { .kn-diff__title { font-size: 36px; } }

.kn-diff__title-accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.kn-diff__sub {
  margin-top: 24px;
  font-size: 14px; line-height: 1.6;
  color: #525252;
}
@media (min-width: 640px) { .kn-diff__sub { font-size: 16px; } }

.kn-diff__note {
  margin-top: 12px;
  font-style: italic;
  font-size: 12px;
  color: #737373;
}
@media (min-width: 640px) { .kn-diff__note { font-size: 14px; } }

.kn-diff__table-wrap { position: relative; }

.kn-diff__table {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  box-shadow: 0 30px 80px -40px rgba(234,88,12,0.25);
}
@media (min-width: 640px) { .kn-diff__table { border-radius: 24px; } }

.kn-diff__row {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.1fr;
  align-items: center;
  transition: background-color .2s ease;
}
@media (min-width: 1024px) {
  .kn-diff__row { grid-template-columns: 1fr 1fr 1.2fr; }
}
.kn-diff__row--head { background: #fafafa; }
.kn-diff__row--bordered { border-bottom: 1px solid #f5f5f5; }
.kn-diff__body { position: relative; }
.kn-diff__body .kn-diff__row:hover { background: rgba(255,247,237,0.3); }

.kn-diff__cell {
  padding: 14px 12px;
}
@media (min-width: 640px) { .kn-diff__cell { padding: 16px; } }
@media (min-width: 1024px) { .kn-diff__cell { padding: 20px 24px; } }

.kn-diff__cell--head {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #737373;
  padding: 12px;
}
@media (min-width: 640px) {
  .kn-diff__cell--head { font-size: 10px; letter-spacing: 0.16em; padding: 16px; }
}
@media (min-width: 1024px) {
  .kn-diff__cell--head { font-size: 11px; letter-spacing: 0.18em; padding: 20px 24px; }
}
.kn-diff__cell--muted { color: #a3a3a3; }

.kn-diff__cell--kinis {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 12px;
}
@media (min-width: 640px) { .kn-diff__cell--kinis { gap: 8px; padding: 16px; } }
@media (min-width: 1024px) { .kn-diff__cell--kinis { padding: 20px 24px; } }

.kn-diff__logo {
  height: 20px; width: auto;
  object-fit: contain;
}
@media (min-width: 1024px) { .kn-diff__logo { height: 24px; } }

.kn-diff__stripe {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(to right, #f97316, #fbbf24);
  pointer-events: none;
}

.kn-diff__kinis-bg {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: calc((1.1 / 3) * 100%);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,247,237,0.7),
    rgba(255,247,237,0.4),
    transparent);
}
@media (min-width: 1024px) {
  .kn-diff__kinis-bg { width: calc((1.2 / 3.2) * 100%); }
}

.kn-diff__cell--cap {
  font-size: 12px;
  font-weight: 500;
  color: #171717;
}
.kn-diff__cell--fit {
  font-size: 12px;
  color: #737373;
}
@media (min-width: 640px) {
  .kn-diff__cell--cap, .kn-diff__cell--fit { font-size: 13px; }
}
@media (min-width: 1024px) {
  .kn-diff__cell--cap, .kn-diff__cell--fit { font-size: 16px; }
}

.kn-diff__cell--k {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
@media (min-width: 640px) { .kn-diff__cell--k { gap: 12px; } }

.kn-diff__k-text {
  font-size: 12px;
  font-weight: 500;
  color: #171717;
}
@media (min-width: 640px) { .kn-diff__k-text { font-size: 13px; } }
@media (min-width: 1024px) { .kn-diff__k-text { font-size: 16px; } }
.kn-diff__k-text--hl { color: #ea580c; }

/* ============================================================
   Differentiation — header alignment fix (v0.1.2)
   ============================================================ */
.kn-diff__row--head { align-items: center; }
.kn-diff__cell--head { display: flex; align-items: center; }
.kn-diff__cell--head.kn-diff__cell--kinis { display: flex; align-items: center; }

/* ============================================================
   Preventive Window section (v0.1.2)
   ============================================================ */
.kn-pw {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  color: #fff;
  padding: 48px 0;
}
@media (min-width: 640px) { .kn-pw { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-pw { padding: 64px 0; } }

.kn-pw__backdrop {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background:
    radial-gradient(50% 40% at 20% 30%, rgba(234,88,12,0.18), transparent 70%),
    radial-gradient(40% 30% at 85% 80%, rgba(255,170,100,0.10), transparent 70%);
}

.kn-pw__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) { .kn-pw__inner { padding: 0 40px; } }

.kn-pw__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  border: 1px solid rgba(3,105,161,0.55);
  background: rgba(3,105,161,0.18);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #0284c7;
}
.kn-pw__ping { background: #0284c7; }
.kn-pw__core { background: #0284c7; }

.kn-pw__title {
  margin: 16px 0 0;
  max-width: 64rem;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  text-wrap: balance;
}
@media (min-width: 640px) { .kn-pw__title { font-size: 36px; } }

.kn-pw__sub {
  margin: 16px 0 0;
  max-width: 56rem;
  font-size: 14px;
  line-height: 1.65;
  color: #a3a3a3;
  text-wrap: pretty;
}
@media (min-width: 640px) { .kn-pw__sub { font-size: 16px; } }

.kn-pw__quote {
  display: inline-block;
  margin: 24px 0 0;
  padding: 16px 20px;
  border-left: 2px solid #0ea5e9;
  background: rgba(14,165,233,0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.kn-pw__quote blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: #e0f2fe;
  font-weight: 600;
}
@media (min-width: 640px) { .kn-pw__quote blockquote { font-size: 20px; } }
@media (min-width: 1024px) { .kn-pw__quote blockquote { font-size: 24px; } }

/* ---- Stats grid ---- */
.kn-pw__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .kn-pw__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (min-width: 1024px) { .kn-pw__grid { margin-top: 64px; } }

.kn-pw__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 20px;
  transition: border-color .3s ease, background .3s ease;
}
@media (min-width: 640px) { .kn-pw__card { padding: 32px; } }

.kn-pw__card:hover {
  border-color: rgba(249,115,22,0.3);
  background: rgba(255,255,255,0.05);
}
.kn-pw__cardglow {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(249,115,22,0.07), transparent);
  opacity: 0;
  transition: opacity .5s ease;
}
.kn-pw__card:hover .kn-pw__cardglow { opacity: 1; }

.kn-pw__cardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 640px) {
  .kn-pw__cardtop { display: block; }
}

.kn-pw__num {
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(to bottom, #0284c7 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kn-pw__num-sm {
  font-size: 0.45em;
  font-weight: 300;
  color: rgba(186,230,253,0.6);
  margin: 0 0.35em;
  letter-spacing: 0;
  -webkit-text-fill-color: rgba(186,230,253,0.6);
}
@media (min-width: 640px) { .kn-pw__num { font-size: 48px; } }
@media (min-width: 1024px) { .kn-pw__num { font-size: 60px; } }

.kn-pw__label {
  text-align: right;
  font-size: 14px;
  line-height: 1.6;
  color: #a3a3a3;
}
@media (min-width: 640px) {
  .kn-pw__label {
    margin-top: 12px;
    text-align: left;
    font-size: 16px;
  }
}
.kn-pw-br-mobile { display: inline; }
@media (min-width: 640px) { .kn-pw-br-mobile { display: none; } }

.kn-pw__src {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #737373;
  transition: color .2s ease;
}
.kn-pw__src:hover { color: #fb923c; }
.kn-pw__ext { height: 12px; width: 12px; }

/* =========================================================
   Closed-Loop Platform
   ========================================================= */
.kn-cl {
  position: relative;
  overflow: hidden;
  background: rgba(255, 247, 237, 0.3);
  padding: 40px 0;
}
@media (min-width: 640px) { .kn-cl { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-cl { padding: 64px 0; } }

.kn-cl__backdrop {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background:
    radial-gradient(50% 40% at 15% 20%, rgba(255,170,100,0.14), transparent 70%),
    radial-gradient(50% 40% at 85% 85%, rgba(255,140,60,0.10), transparent 70%);
}
.kn-cl__hairline {
  position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(254,215,170,0.6), transparent);
}
.kn-cl__hairline--top { top: 0; }
.kn-cl__hairline--bottom { bottom: 0; }

.kn-cl__inner {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 0 24px;
}
@media (min-width: 1024px) { .kn-cl__inner { padding: 0 40px; } }

.kn-cl__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  border: 1px solid #fed7aa;
  background: rgba(255,247,237,0.7);
  padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: #c2410c;
}
.kn-cl__ping { background: #f97316; }
.kn-cl__core { background: #f97316; }

.kn-cl__title {
  margin: 16px 0 0;
  max-width: 64rem;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  color: #171717;
  text-wrap: balance;
}
@media (min-width: 640px) { .kn-cl__title { font-size: 36px; } }
@media (min-width: 1024px) {
  .kn-cl__title { max-width: none; }
}
.kn-cl__accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.kn-cl__sub {
  margin: 16px 0 0;
  max-width: 48rem;
  font-size: 14px; line-height: 1.65; color: #525252;
}
@media (min-width: 640px) { .kn-cl__sub { font-size: 16px; } }

.kn-cl__steps { position: relative; margin-top: 32px; }
@media (min-width: 1024px) { .kn-cl__steps { margin-top: 40px; } }

/* Timeline (desktop only) */
.kn-cl__timeline { position: relative; display: none; }
@media (min-width: 1024px) { .kn-cl__timeline { display: block; } }

.kn-cl__timeline-base {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; transform: translateY(-50%);
  background: #e5e5e5;
}
.kn-cl__timeline-progress {
  position: absolute; left: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: linear-gradient(to right, #f97316, #f59e0b);
  width: calc((100% / 6) * 0.5);
  transition: width 700ms ease-out;
}
.kn-cl__circles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.kn-cl__circle-wrap { display: flex; align-items: center; justify-content: center; }
.kn-cl__circle {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 36px; width: 36px;
  border-radius: 9999px;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #a3a3a3;
  font-size: 12px; font-weight: 600;
  transition: all 500ms ease;
}
.kn-cl__circle.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(234,88,12,0.55);
}
.kn-cl__circle.is-current { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(254,215,170,0.6), 0 8px 20px -8px rgba(234,88,12,0.55); }
.kn-cl__circle-check { display: none; width: 16px; height: 16px; }
.kn-cl__circle.is-done .kn-cl__circle-num { display: none; }
.kn-cl__circle.is-done .kn-cl__circle-check { display: inline-flex; }

/* Cards */
.kn-cl__cards {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 24px 12px 24px;
  scrollbar-width: thin;
  list-style: none;
}
@media (min-width: 1024px) {
  .kn-cl__cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
    overflow-x: visible;
    padding: 0;
  }
}
.kn-cl__card {
  position: relative;
  display: flex; flex-direction: column;
  flex: 0 0 200px;
  scroll-snap-align: start;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 16px;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
@media (min-width: 640px) { .kn-cl__card { padding: 16px; flex-basis: 220px; } }
@media (min-width: 768px) { .kn-cl__card { padding: 14px; } }
@media (min-width: 1024px) { .kn-cl__card { padding: 20px; flex: 1 1 auto; } }
.kn-cl__card:hover {
  transform: translateY(-2px);
  border-color: #fed7aa;
  box-shadow: 0 16px 40px -20px rgba(234,88,12,0.30);
}
.kn-cl__card.is-current {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -20px rgba(234,88,12,0.45);
}
.kn-cl__card-spin {
  position: absolute; inset: -1.5px; pointer-events: none;
  border-radius: 16px; overflow: hidden; display: none;
}
.kn-cl__card.is-current .kn-cl__card-spin { display: block; }
.kn-cl__card-spin-arc {
  position: absolute; left: 50%; top: 50%;
  aspect-ratio: 1 / 1; width: 200%;
  transform: translate(-50%, -50%);
  animation: kn-cl-spin 1.6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0deg, #fbbf24 60deg, #f97316 120deg, #fbbf24 180deg, transparent 240deg, transparent 360deg);
}
.kn-cl__card-spin-mask {
  position: absolute; inset: 2px;
  border-radius: 14px; background: #fff;
}
@keyframes kn-cl-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.kn-cl__card-body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; }
.kn-cl__card-mnum {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px;
  margin-bottom: 12px;
  border-radius: 9999px;
  background: #fff7ed;
  color: #ea580c;
  box-shadow: inset 0 0 0 1px #ffedd5;
  font-size: 12px; font-weight: 600;
}
@media (min-width: 1024px) { .kn-cl__card-mnum { display: none; } }

.kn-cl__card-head { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) {
  .kn-cl__card-head { flex-direction: column; align-items: flex-start; gap: 0; }
}
.kn-cl__card-icon { display: inline-flex; color: #404040; transition: color .25s ease; }
.kn-cl__card-icon svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .kn-cl__card-icon svg { width: 24px; height: 24px; } }
.kn-cl__card:hover .kn-cl__card-icon { color: #ea580c; }

.kn-cl__card-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
@media (min-width: 1024px) { .kn-cl__card-titles { display: block; margin-top: 16px; } }
.kn-cl__card-step {
  display: none; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: #a3a3a3; text-transform: uppercase;
}
@media (min-width: 1024px) { .kn-cl__card-step { display: block; } }
.kn-cl__card-title {
  margin: 0;
  font-size: 16px; line-height: 1.2; font-weight: 600; color: #171717;
}
@media (min-width: 640px) { .kn-cl__card-title { font-size: 18px; } }
@media (min-width: 1024px) { .kn-cl__card-title { font-size: 20px; margin-top: 6px; } }

.kn-cl__card-desc {
  margin: 8px 0 0;
  font-size: 12px; line-height: 1.6; color: #525252;
}
@media (min-width: 640px) { .kn-cl__card-desc { font-size: 13px; } }

.kn-cl__quote {
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 2px solid #f97316;
}
@media (min-width: 640px) { .kn-cl__quote { margin-top: 40px; } }
@media (min-width: 768px) { .kn-cl__quote { margin-top: 32px; } }
.kn-cl__quote blockquote {
  margin: 0;
  font-size: 18px; line-height: 1.3; font-weight: 600; color: #171717;
}
@media (min-width: 640px) { .kn-cl__quote blockquote { font-size: 20px; } }
@media (min-width: 1024px) { .kn-cl__quote blockquote { font-size: 24px; white-space: nowrap; } }
.kn-cl__quote-accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================
   Ecosystem
   ========================================================= */
.kn-eco { position: relative; overflow: hidden; background: #fff; padding: 48px 0; }
@media (min-width: 640px) { .kn-eco { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-eco { padding: 64px 0; } }

.kn-eco__backdrop {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255,170,100,0.10), transparent 70%),
    radial-gradient(40% 40% at 10% 100%, rgba(255,140,60,0.06), transparent 70%);
}
.kn-eco__inner {
  position: relative; margin: 0 auto; width: 100%; max-width: 80rem; padding: 0 24px;
}
@media (min-width: 1024px) { .kn-eco__inner { padding: 0 40px; } }

.kn-eco__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  border: 1px solid #fed7aa;
  background: rgba(255,247,237,0.7);
  padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: #c2410c;
}
.kn-eco__ping { background: #f97316; }
.kn-eco__core { background: #f97316; }

.kn-eco__title {
  margin: 16px 0 0;
  max-width: 64rem;
  font-size: 30px; line-height: 1.05; font-weight: 600;
  color: #171717; text-wrap: balance;
}
@media (min-width: 640px) { .kn-eco__title { font-size: 36px; } }
@media (min-width: 1024px) {
  .kn-eco__title { max-width: none; }
}
.kn-eco__accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-eco__sub {
  margin: 12px 0 0; max-width: 48rem;
  font-size: 14px; line-height: 1.65; color: #525252;
}
@media (min-width: 640px) { .kn-eco__sub { font-size: 16px; } }

.kn-eco__grid {
  margin-top: 32px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 640px) { .kn-eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kn-eco__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; align-items: stretch; } }

.kn-eco__card {
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #fff;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.kn-eco__card:hover {
  transform: translateY(-2px);
  border-color: #fed7aa;
  box-shadow: 0 16px 40px -20px rgba(234,88,12,0.30);
}
.kn-eco__card--featured {
  border: 0;
  padding: 2px;
  background: linear-gradient(135deg, #f97316, #fbbf24 50%, #f97316);
  color: #171717;
  box-shadow: 0 20px 60px -20px rgba(234,88,12,0.45);
}
@media (min-width: 640px) { .kn-eco__card--featured { grid-column: span 2 / span 2; } }
@media (min-width: 1024px) {
  .kn-eco__card--featured { grid-column: span 2 / span 2; }
}

.kn-eco__feat-bg {
  position: absolute; inset: 2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #fff7ed 50%, #ffedd5);
}
.kn-eco__feat-glow {
  position: absolute; right: -80px; top: -80px;
  height: 224px; width: 224px;
  border-radius: 9999px; opacity: 0.25;
  filter: blur(48px);
  background: radial-gradient(circle, rgba(255,220,170,0.6), transparent 60%);
  pointer-events: none;
}
.kn-eco__feat-glow--alt {
  right: auto; top: auto;
  left: -64px; bottom: -64px;
  height: 192px; width: 192px;
  opacity: 0.2;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 60%);
}
.kn-eco__feat-row {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center; height: 100%;
}
@media (min-width: 640px) { .kn-eco__feat-row { padding: 20px; } }
.kn-eco__feat-text { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kn-eco__feat-icon { display: none; }
.kn-eco__feat-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  flex-direction: column;
}
.kn-eco__feat-eyebrow-text {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  color: #c2410c; text-transform: uppercase;
}
.kn-eco__feat-name {
  margin: 2px 0 0;
  font-size: 16px; line-height: 1.15; font-weight: 600; color: #171717;
}
@media (min-width: 640px) { .kn-eco__feat-name { font-size: 18px; } }
.kn-eco__feat-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: #525252; }

.kn-eco__row { display: flex; gap: 12px; padding: 12px; flex: 1; align-items: center; }
@media (min-width: 640px) { .kn-eco__row { padding: 14px; } }
.kn-eco__thumb-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; flex-shrink: 0; }
@media (min-width: 640px) { .kn-eco__thumb-col { width: 88px; } }
.kn-eco__thumb {
  width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 8px;
  background: rgba(255,247,237,0.6);
  box-shadow: inset 0 0 0 1px #ffedd5;
}
.kn-eco__thumb img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 500ms ease;
}
.kn-eco__card:hover .kn-eco__thumb img { transform: scale(1.05); }
.kn-eco__thumb--icon {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f97316, #f59e0b);
  box-shadow: 0 8px 20px -10px rgba(234,88,12,0.45);
}
.kn-eco__thumb-icon { display: inline-flex; color: #fff; }
.kn-eco__thumb-icon svg { height: 32px; width: 32px; stroke-width: 1.6; }
.kn-eco__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kn-eco__row { justify-content: flex-start; }
.kn-eco__text:not(.kn-eco__text--full) { justify-content: center; text-align: left; }
.kn-eco__name {
  margin: 0;
  font-size: 16px; line-height: 1.2; font-weight: 600; color: #171717;
}
.kn-eco__desc { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: #525252; }

.kn-eco__pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 2px 6px;
  border-radius: 9999px;
  border: 1px solid;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.kn-eco__feat-eyebrow .kn-eco__pill { width: auto; padding: 2px 8px; font-size: 9px; letter-spacing: 0.12em; }
.kn-eco__pill--available { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.kn-eco__pill--expanding { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.kn-eco__pill--launching { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.kn-eco__pill--roadmap   { border-color: #e5e5e5; background: #fafafa; color: #525252; }
.kn-eco__pill--featured  {
  border-color: #fed7aa;
  background: linear-gradient(to right, #f97316, #f59e0b);
  color: #fff;
}
.kn-eco__pill--on-orange {
  width: auto; padding: 2px 8px; font-size: 9px; letter-spacing: 0.12em;
  border-color: #fed7aa;
  background: linear-gradient(to right, #f97316, #f59e0b);
  color: #fff;
}
.kn-eco__text--full { flex: 1; min-width: 0; }
.kn-eco__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.kn-eco__pill--inline {
  width: auto; padding: 2px 8px; flex-shrink: 0;
}

.kn-eco__footer {
  margin-top: 32px;
  border-top: 1px solid #e5e5e5;
  padding-top: 24px;
  text-align: center;
}
@media (min-width: 640px) { .kn-eco__footer { margin-top: 40px; } }
.kn-eco__strapline {
  margin: 0 auto;
  max-width: 64rem;
  font-size: 14px; line-height: 1.65;
  color: #737373;
}
@media (min-width: 1024px) { .kn-eco__strapline { max-width: none; white-space: nowrap; } }
.kn-eco__sf { font-weight: 600; color: #171717; }
.kn-eco__sf-accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ===================== Kinis App section ===================== */
.kn-app { position: relative; overflow: hidden; background: #0a0a0a; color: #fff; padding: 48px 0; }
@media (min-width: 640px) { .kn-app { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-app { padding: 64px 0; } }
.kn-app__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(251,146,60,0.22), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(234,88,12,0.14), transparent 70%);
}
.kn-app__rule { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
.kn-app__rule--top    { top: 0;    background: linear-gradient(to right, transparent, rgba(249,115,22,0.4), transparent); }
.kn-app__rule--bottom { bottom: 0; background: linear-gradient(to right, transparent, rgba(249,115,22,0.3), transparent); }
.kn-app__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .kn-app__inner { padding: 0 40px; } }

.kn-app__head { max-width: 720px; margin: 0 auto; text-align: center; }
.kn-app__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(251,146,60,0.3);
  background: rgba(249,115,22,0.1);
  color: #fdba74;
  border-radius: 9999px; padding: 4px 12px;
  font-size: 12px; font-weight: 500;
}
.kn-app__ping { background: #fb923c; }
.kn-app__core { background: #fb923c; }

.kn-app__title {
  font-size: 30px; line-height: 1.05; color: #fff; margin: 20px 0 0;
}
@media (min-width: 640px) { .kn-app__title { font-size: 36px; } }
.kn-app__accent {
  background: linear-gradient(to right, #fb923c, #fcd34d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-app__sub { margin: 16px auto 0; max-width: 580px; font-size: 14px; line-height: 1.6; color: #d4d4d4; }
@media (min-width: 640px) { .kn-app__sub { font-size: 16px; } }

.kn-app__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 40px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: #737373; text-align: center;
}
@media (min-width: 640px) { .kn-app__eyebrow { margin-top: 48px; } }
.kn-app__eyebrow-line { display: block; width: 32px; height: 1px; flex-shrink: 0; background: rgba(255,255,255,0.15); }

/* Tests — phone visibly overlaps card from the left */
.kn-app__tests {
  display: grid; row-gap: 24px; column-gap: 24px; margin-top: 24px; align-items: stretch;
}
@media (min-width: 640px) { .kn-app__tests { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .kn-app__tests { column-gap: 40px; } }
.kn-app__test {
  position: relative; display: flex; align-items: stretch; height: 100%;
}
.kn-app__test-phone { align-self: center; }
.kn-app__test-phone {
  position: relative; z-index: 2; flex-shrink: 0;
  margin-right: -40px;
}
@media (min-width: 640px) { .kn-app__test-phone { margin-right: -48px; } }
.kn-app__test-phone img {
  height: 208px; width: auto; display: block;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
  transition: transform .5s ease;
}
@media (min-width: 640px) { .kn-app__test-phone img { height: 240px; } }
.kn-app__test:hover .kn-app__test-phone img { transform: translateY(-4px); }
.kn-app__test-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 176px; height: 176px; border-radius: 9999px;
  opacity: .7; filter: blur(48px); z-index: -1;
  background: radial-gradient(circle, rgba(251,146,60,0.55), transparent 60%);
}
.kn-app__test-card {
  position: relative; flex: 0 0 auto; align-self: center; height: 140px; min-height: 140px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(24px) saturate(150%);
  border-radius: 26px;
  padding: 16px 12px 24px 48px;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22), 0 30px 60px -30px rgba(0,0,0,0.7);
  transition: border-color .3s ease, background .3s ease;
}
@media (min-width: 640px) { .kn-app__test-card { flex: 1 1 auto; align-self: stretch; height: auto; min-height: 148px; padding: 24px 16px 24px 64px; } }
@media (min-width: 768px) and (max-width: 1023px) { .kn-app__test-card { align-self: center; height: 176px; min-height: 176px; padding: 16px 16px 16px 64px; } }
@media (min-width: 1024px) { .kn-app__test-card { align-self: center; height: 168px; min-height: 168px; padding: 16px 24px 16px 80px; } }
.kn-app__test-card { display: flex; flex-direction: column; justify-content: center; }
.kn-app__test:hover .kn-app__test-card {
  border-color: rgba(253,186,116,0.4);
  background: rgba(255,255,255,0.10);
}
.kn-app__test-sheen {
  position: absolute; inset: 0; border-radius: 26px; pointer-events: none; opacity: .6;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%, rgba(251,146,60,0.06) 100%);
}
.kn-app__test-n {
  position: relative;
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  color: #fdba74; text-transform: uppercase;
}
.kn-app__test-title { position: relative; margin: 6px 0 0; font-size: 20px; font-weight: 600; color: #fff; }
@media (min-width: 640px) { .kn-app__test-title { font-size: 24px; } }
.kn-app__test-desc { position: relative; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #d4d4d4; }

.kn-app__synthesis { margin: 32px auto 0; max-width: 720px; text-align: center; }
@media (min-width: 1024px) { .kn-app__synthesis { max-width: 1024px; } }
.kn-app__synthesis-title {
  margin: 0; font-size: 20px; line-height: 1.3; color: #fff; font-weight: 600;
}
@media (min-width: 640px) { .kn-app__synthesis-title { font-size: 24px; } }
.kn-app__synthesis-accent {
  background: linear-gradient(90deg, #fb923c, #fcd34d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-app__score {
  margin: 12px auto 0; max-width: 620px;
  font-size: 14px; line-height: 1.6; color: #a3a3a3;
}
@media (min-width: 1024px) { .kn-app__score { max-width: none; white-space: nowrap; } }
.kn-app__score-strong { color: #fff; font-weight: 600; }

/* Features — Apple-style horizontal snap scroller with 1:1 tiles */
.kn-app__features-wrap { margin: 24px -24px 0 0; }
@media (min-width: 1024px) { .kn-app__features-wrap { margin-right: -40px; } }
.kn-app__features {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 24px 24px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
@media (min-width: 1024px) { .kn-app__features { padding-right: 40px; gap: 32px; } }
.kn-app__feature {
  display: flex; flex-direction: column;
  width: 300px; flex-shrink: 0;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .kn-app__feature { width: 340px; } }
.kn-app__feature-tile {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1d1d1f;
  transition: border-color .3s ease;
}
.kn-app__feature:hover .kn-app__feature-tile { border-color: rgba(253,186,116,0.3); }
.kn-app__feature-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .5s ease;
}
.kn-app__feature:hover .kn-app__feature-tile-img { transform: scale(1.03); }
.kn-app__feature-chip {
  position: absolute; left: 16px; top: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.1);
  color: #fdba74;
  backdrop-filter: blur(8px);
}
.kn-app__feature-chip svg { width: 16px; height: 16px; }
.kn-app__feature-caption {
  margin: 16px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4;
}
.kn-app__feature-caption-label { color: #FF760C; }
.kn-app__feature-caption-body { color: #d4d4d4; font-weight: 500; }

.kn-app__cta {
  margin-top: 48px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 24px; padding: 24px;
  overflow: hidden;
}
@media (min-width: 640px) { .kn-app__cta { padding: 32px; } }
@media (min-width: 1024px) { .kn-app__cta { padding: 40px; } }
.kn-app__cta-row {
  display: grid; gap: 32px; align-items: center;
}
@media (min-width: 768px) {
  .kn-app__cta-row { grid-template-columns: 7fr 5fr; }
}
@media (min-width: 1024px) {
  .kn-app__cta-row { grid-template-columns: 5fr 7fr; }
}
.kn-app__qr-wrap { display: flex; align-items: center; gap: 20px; }
.kn-app__qr {
  background: #fff; padding: 12px; border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(251,146,60,0.5);
}
.kn-app__qr { padding: 8px; }
.kn-app__qr img { display: block; width: 88px; height: 88px; }
@media (min-width: 640px) { .kn-app__qr img { width: 96px; height: 96px; } }
.kn-app__qr-eyebrow, .kn-app__qr-title, .kn-app__qr-sub { white-space: normal; }
@media (min-width: 640px) {
  .kn-app__qr-eyebrow, .kn-app__qr-title, .kn-app__qr-sub { white-space: nowrap; }
}
.kn-app__qr-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  color: #fdba74; text-transform: uppercase;
}
.kn-app__qr-title { margin: 4px 0 0; font-size: 18px; font-weight: 600; color: #fff; }
@media (min-width: 640px) { .kn-app__qr-title { font-size: 20px; } }
.kn-app__qr-sub { margin: 4px 0 0; font-size: 14px; color: #a3a3a3; }

.kn-app__buttons {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
@media (min-width: 640px) { .kn-app__buttons { flex-direction: row; align-items: center; gap: 12px; } }
@media (min-width: 768px) { .kn-app__buttons { flex-direction: column; align-items: stretch; gap: 8px; } }
@media (min-width: 1024px) { .kn-app__buttons { flex-direction: row; align-items: center; gap: 12px; justify-content: flex-end; } }
.kn-app__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
@media (min-width: 640px) { .kn-app__btn { padding: 12px 24px; font-size: 14px; gap: 8px; } }
.kn-app__btn svg { width: 14px; height: 14px; }
@media (min-width: 640px) { .kn-app__btn svg { width: 16px; height: 16px; } }
.kn-app__btn--white { background: #fff; color: #0a0a0a; }
.kn-app__btn--white:hover { transform: translateY(-2px); background: #f5f5f5; box-shadow: 0 16px 40px -12px rgba(255,255,255,0.4); }
.kn-app__btn--primary { background: linear-gradient(to right, #f97316, #f59e0b); color: #fff; }
.kn-app__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(234,88,12,0.6); }
.kn-app__btn--primary:hover svg { transform: translateX(2px); }

.kn-app__offer {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 24px; padding: 16px;
  border: 1px solid rgba(251,146,60,0.2);
  background: rgba(249,115,22,0.06);
  border-radius: 16px;
}
@media (min-width: 640px) { .kn-app__offer { padding: 20px; } }
.kn-app__offer-icon { flex-shrink: 0; color: #fdba74; margin-top: 2px; }
.kn-app__offer-icon svg { width: 20px; height: 20px; }
.kn-app__offer-text { margin: 0; font-size: 14px; line-height: 1.6; color: #e5e5e5; }
.kn-app__offer-strong { color: #fdba74; font-weight: 600; }

.kn-app__strapline {
  margin: 48px 0 0; text-align: center;
  font-size: 14px; line-height: 1.6; color: #737373;
}
@media (min-width: 640px) { .kn-app__strapline { font-size: 16px; } }
.kn-app__sf { color: #fff; font-weight: 600; }

/* ============================== */
/* Solutions section              */
/* ============================== */
.kn-sol { position: relative; overflow: hidden; background: #fff; padding: 48px 0; }
@media (min-width: 640px) { .kn-sol { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-sol { padding: 64px 0; } }
.kn-sol__backdrop {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 50% at 50% 0%, rgba(255,170,100,0.10), transparent 70%);
}
.kn-sol__inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .kn-sol__inner { padding: 0 40px; } }

.kn-sol__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #fed7aa; background: rgba(255,247,237,0.7);
  border-radius: 9999px; padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: #c2410c;
}
.kn-sol__core { background: #f97316; }
.kn-sol__ping { background: #f97316; }

.kn-sol__title {
  margin: 16px 0 0; max-width: 56rem;
  font-size: 30px; line-height: 1.05; color: #171717;
}
@media (min-width: 640px) { .kn-sol__title { font-size: 36px; } }
.kn-sol__title-accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.kn-sol__sub {
  margin: 16px 0 0; max-width: 48rem;
  font-size: 14px; line-height: 1.6; color: #525252;
}
@media (min-width: 640px) { .kn-sol__sub { font-size: 16px; } }

.kn-sol__grid {
  margin-top: 40px;
  display: flex; flex-wrap: nowrap; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 24px;
  margin-left: 0; margin-right: calc(-50vw + 50%);
  padding-left: 0; padding-right: 24px;
  scrollbar-width: thin;
}
@media (min-width: 1024px) {
  .kn-sol__grid {
    padding-right: 40px;
  }
}

.kn-sol__card {
  position: relative; display: flex; flex-direction: column;
  flex: 0 0 260px; scroll-snap-align: start;
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,0.18);
  transition: transform .3s ease;
}
@media (min-width: 640px) { .kn-sol__card { flex-basis: 280px; } }
@media (min-width: 1280px) { .kn-sol__card { flex-basis: 240px; } }
.kn-sol__card:hover { transform: translateY(-4px); }

.kn-sol__media {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  border-radius: 0; box-shadow: none;
}
.kn-sol__media-frame { aspect-ratio: auto; width: 100%; height: 100%; }

.kn-sol__spacer { aspect-ratio: 16 / 11; width: 100%; flex-shrink: 0; }

.kn-sol__body {
  position: relative; z-index: 1; margin-top: -40px;
  display: flex; flex: 1; flex-direction: column;
  background: #fff; border-radius: 12px 12px 0 0;
  padding: 16px;
}
.kn-sol__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.kn-sol__card:hover .kn-sol__media img { transform: scale(1.05); }

.kn-sol__name {
  margin: 0; font-size: 16px; font-weight: 600;
  line-height: 1.2; color: #171717;
}
.kn-sol__desc {
  margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: #525252;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kn-sol__cta {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: #FF760C;
  transition: color .2s ease;
}
.kn-sol__card:hover .kn-sol__cta { color: #e0660a; }
.kn-sol__cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.kn-sol__card:hover .kn-sol__cta svg { transform: translateX(2px); }

/* ============ Traction ============ */
.kn-trac { position: relative; overflow: hidden; background: #fafafa; padding: 48px 0; }
@media (min-width: 640px) { .kn-trac { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-trac { padding: 64px 0; } }
.kn-trac__backdrop {
  position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background: radial-gradient(45% 35% at 15% 30%, rgba(255,118,12,0.08), transparent 70%);
}
.kn-trac__inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .kn-trac__inner { padding: 0 40px; } }
.kn-trac__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) {
  .kn-trac__grid { grid-template-columns: 5fr 7fr; gap: 48px; }
}
.kn-trac__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(3,105,161,0.3); background: rgba(3,105,161,0.10);
  border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: #075985;
}
.kn-trac__ping { background: #0369a1 !important; }
.kn-trac__core { background: #0369a1 !important; }
.kn-trac__title { margin: 16px 0 0; font-size: clamp(28px, 4vw, 36px); line-height: 1.05; color: #0f172a; }
.kn-trac__sub { margin-top: 16px; max-width: 36rem; font-size: 15px; line-height: 1.6; color: #525252; }
.kn-trac__note { margin-top: 24px; font-size: 12px; color: #737373; }
.kn-trac__note em { font-style: italic; }
.kn-trac__cards { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 640px) { .kn-trac__cards { gap: 20px; } }
@media (min-width: 768px) { .kn-trac__cards { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (min-width: 1024px) { .kn-trac__cards { grid-template-columns: 1fr 1fr; } }
.kn-trac__glow {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%; opacity: .4; pointer-events: none;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(255,118,12,0.22) 0%, rgba(255,118,12,0.08) 45%, transparent 72%);
}
@media (min-width: 640px) {
  .kn-trac__glow { width: 520px; height: 520px; filter: blur(100px); }
}
.kn-trac__card {
  position: relative; z-index: 1;
  background: #ffffff; border-radius: 16px; padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  transition: box-shadow .25s ease;
}
.kn-trac__card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 16px 32px -12px rgba(255,118,12,0.18); }
.kn-trac__figure { font-family: "Phudu", "Manrope", sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #0369a1; }
.kn-trac__label { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #525252; }

/* ===== Traction partners ===== */
.kn-trac__partners { margin-top: 40px; }
@media (min-width: 640px) { .kn-trac__partners { margin-top: 56px; } }
.kn-trac__partners-eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #737373;
}
.kn-trac__partners-line { flex: 1; height: 1px; background: #e5e5e5; }
.kn-trac__logos-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-top: 24px;
}
@media (min-width: 640px) { .kn-trac__logos-wrap { gap: 16px; margin-top: 32px; } }
.kn-trac__logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; align-items: center; gap: 16px;
}
.kn-trac__logos--row1 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kn-trac__logos--row2 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 83.333%; }
@media (min-width: 640px) { .kn-trac__logos { gap: 24px; } }
@media (min-width: 1024px) { .kn-trac__logos { gap: 32px; } }
.kn-trac__logo { display: flex; align-items: center; justify-content: center; }
.kn-trac__logo img {
  max-height: 42px; width: auto; object-fit: contain;
  opacity: 0.7; filter: grayscale(100%);
  transition: opacity 300ms ease, filter 300ms ease;
}
@media (min-width: 640px) { .kn-trac__logo img { max-height: 50px; } }
@media (min-width: 1024px) { .kn-trac__logo img { max-height: 55px; } }
.kn-trac__logo img:hover { opacity: 1; filter: grayscale(0%); }

/* Mobile vs desktop logo wrap visibility */
.kn-trac__logos-wrap--desktop { display: none; }
.kn-trac__logos-wrap--mobile { display: flex; }
@media (min-width: 640px) {
  .kn-trac__logos-wrap--desktop { display: flex; }
  .kn-trac__logos-wrap--mobile { display: none; }
}
/* Mobile rows: 4 / 4 / 3 with larger logos */
.kn-trac__logos--m1, .kn-trac__logos--m2 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.kn-trac__logos--m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 75%; }
.kn-trac__logos-wrap--mobile .kn-trac__logo img { max-height: 56px; }


/* ===== Kai AI section ===== */
.kn-kai { position: relative; overflow: hidden; background: #fff; padding: 48px 0; }
@media (min-width: 640px) { .kn-kai { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-kai { padding-top: 80px; padding-bottom: 64px; } }
.kn-kai__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background: radial-gradient(40% 35% at 90% 15%, rgba(255,118,12,0.08), transparent 70%);
}
.kn-kai__inner { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .kn-kai__inner { padding: 0 40px; } }

.kn-kai__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .kn-kai__grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; } }

.kn-kai__main { text-align: left; }
.kn-kai__title { margin: 16px 0 0; font-size: 30px; line-height: 1.1; color: #0f172a; }
@media (min-width: 640px) { .kn-kai__title { font-size: 36px; } }
.kn-kai__sub { margin: 16px 0 0; max-width: 640px; color: #4b5563; font-size: 14px; line-height: 1.6; }
@media (min-width: 640px) { .kn-kai__sub { font-size: 16px; } }

.kn-kai__quote {
  margin: 20px 0 0; max-width: 640px;
  display: flex; align-items: flex-start; gap: 12px;
  border-left: 2px solid rgba(255,118,12,0.6);
  background: rgba(255,118,12,0.04);
  border-radius: 12px; padding: 12px 16px;
}
.kn-kai__quote-icon { width: 16px; height: 16px; flex-shrink: 0; color: #ff760c; margin-top: 2px; }
.kn-kai__quote blockquote { margin: 0; font-style: italic; color: #374151; font-size: 14px; line-height: 1.6; }

.kn-kai__cta { margin-top: 20px; }
.kn-kai__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ff760c; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 20px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 200ms ease;
}
.kn-kai__btn:hover { background: #e5670a; }
.kn-kai__btn svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.kn-kai__btn:hover svg { transform: translateX(2px); }

/* Vertical phase list alongside phone */
.kn-kai__phases {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0;
}

.kn-kai__phase {
  position: relative; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: opacity 200ms ease;
}
.kn-kai__phase-body { min-width: 0; flex: 1; }
.kn-kai__phase.is-live { border-color: rgba(255,118,12,0.25); box-shadow: 0 4px 16px -10px rgba(255,118,12,0.35); }
.kn-kai__phase.is-upcoming { border-style: dashed; border-color: #e5e7eb; opacity: 0.6; }
.kn-kai__phase.is-upcoming:hover { opacity: 0.9; }

.kn-kai__phase-head { display: flex; align-items: center; gap: 8px; }
.kn-kai__node {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6; flex-shrink: 0;
}
.kn-kai__node svg { width: 16px; height: 16px; color: #9ca3af; }
.kn-kai__phase.is-live .kn-kai__node { background: rgba(255,118,12,0.1); }
.kn-kai__phase.is-live .kn-kai__node svg { color: #ff760c; }

.kn-kai__status {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 2px 6px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  background: #f3f4f6; color: #6b7280;
}
.kn-kai__phase.is-live .kn-kai__status { background: rgba(16,185,129,0.1); color: #059669; }
.kn-dot--sm { width: 6px; height: 6px; }
.kn-dot--sm .kn-dot__ping, .kn-dot--sm .kn-dot__core { background: #10b981; }

.kn-kai__phase-n { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: #6b7280; }
.kn-kai__phase-title { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.kn-kai__phase-desc { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #4b5563; }

/* Visual */
.kn-kai__visual { position: relative; }
.kn-kai__visual-row {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
@media (min-width: 640px) {
  .kn-kai__visual-row { flex-direction: row; align-items: stretch; gap: 24px; }
}
.kn-kai__visual-inner {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.kn-kai__visual-glow {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 320px;
  transform: translate(-50%, -50%); border-radius: 9999px; opacity: 0.6;
  filter: blur(70px); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,118,12,0.22) 0%, rgba(255,118,12,0.08) 45%, transparent 72%);
}
.kn-kai__visual-inner img {
  position: relative; z-index: 1; width: 200px; max-width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(15,23,42,0.18));
}
@media (min-width: 1024px) { .kn-kai__visual-inner img { width: 260px; } }

/* ============ Platform Vision ============ */
.kn-pv { position: relative; overflow: hidden; background: #0a0a0a; color: #fff; padding: 48px 0; }
@media (min-width: 640px) { .kn-pv { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-pv { padding: 64px 0; } }
.kn-pv__inner { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .kn-pv__inner { padding: 0 24px; } }
@media (min-width: 1024px) { .kn-pv__inner { padding: 0 32px; } }

.kn-pv__head { max-width: 720px; margin: 0 auto; text-align: center; }
.kn-pv__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255,118,12,0.3); background: rgba(255,118,12,0.10);
  color: #ff760c; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
}
.kn-pv__dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.kn-pv__dot-ping {
  position: absolute; inset: 0; border-radius: 999px;
  background: #ff760c; opacity: 0.75; animation: kn-ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
.kn-pv__dot-core { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #ff760c; }
@keyframes kn-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.kn-pv__title { font-family: "Phudu", "Manrope", ui-sans-serif, system-ui, sans-serif; margin: 20px 0 0; font-size: 30px; line-height: 1.15; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
@media (min-width: 640px) { .kn-pv__title { font-size: 36px; } }
.kn-pv__title-accent { font-family: inherit; background: linear-gradient(90deg, #ff760c, #ffb27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kn-pv__sub { margin: 16px 0 0; color: #a1a1aa; font-size: 16px; line-height: 1.6; }
@media (min-width: 640px) { .kn-pv__sub { font-size: 16px; } }
.kn-pv__sub-strong { color: #e4e4e7; }

/* Stack */
.kn-pv__stack { position: relative; max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (min-width: 640px) { .kn-pv__stack { gap: 10px; } }
@media (min-width: 1024px) { .kn-pv__stack { margin-top: 48px; gap: 16px; } }
/* Tablet uses mobile layout — no overrides needed */

/* Rail (desktop only) */
.kn-pv__rail { display: none; }
@media (min-width: 1024px) {
  .kn-pv__rail {
    display: block; position: absolute; left: 100%; margin-left: 24px; top: 50%; transform: translateY(-50%);
    padding: 12px 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.12);
    border-radius: 16px; backdrop-filter: blur(4px); min-width: 200px;
  }
}
.kn-pv__rail-label { color: #d4d4d8; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; white-space: nowrap; }
.kn-pv__rail-name { color: #ff760c; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; white-space: nowrap; }
.kn-pv__rail-sub { color: #e4e4e7; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; white-space: nowrap; }

/* Layers */
.kn-pv__layer { position: relative; width: 100%; transition: transform 500ms ease; border-radius: 16px; }
.kn-pv__layer:hover { transform: translateY(-4px); }
.kn-pv__layer--age { width: 95%; }
.kn-pv__layer--score { width: 90%; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); backdrop-filter: blur(4px); padding: 14px 0; display: flex; align-items: center; justify-content: center; }
.kn-pv__layer--top { background: linear-gradient(180deg, #ff760c, #ea580c); padding: 1px; }
.kn-pv__layer--age { background: linear-gradient(180deg, rgba(96,165,250,0.5), rgba(37,99,235,0.5)); padding: 1px; }
.kn-pv__layer-inner {
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,10,0.8); backdrop-filter: blur(8px);
  padding: 12px 0;
}
@media (min-width: 640px) { .kn-pv__layer-inner { padding: 14px 0; } }
@media (min-width: 1024px) { .kn-pv__layer-inner { padding: 24px 0; } }
.kn-pv__layer--age .kn-pv__layer-inner { padding: 10px 0; background: rgba(10,10,10,0.6); border-color: rgba(255,255,255,0.05); }
@media (min-width: 640px) { .kn-pv__layer--age .kn-pv__layer-inner { padding: 12px 0; } }
@media (min-width: 1024px) { .kn-pv__layer--age .kn-pv__layer-inner { padding: 20px 0; } }
.kn-pv__layer--score { padding: 10px 0 !important; }
@media (min-width: 640px) { .kn-pv__layer--score { padding: 12px 0 !important; } }
@media (min-width: 1024px) { .kn-pv__layer--score { padding: 16px 0 !important; } }
.kn-pv__layer-label { color: #fff; font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.28em; }
@media (min-width: 640px) { .kn-pv__layer-label { font-size: 12px; } }
@media (min-width: 1024px) { .kn-pv__layer-label { font-size: 14px; font-weight: 700; letter-spacing: 0.3em; } }
.kn-pv__layer-label--blue { color: #dbeafe; font-size: 10px; letter-spacing: 0.2em; font-weight: 400; }
@media (min-width: 640px) { .kn-pv__layer-label--blue { font-size: 11px; } }
@media (min-width: 1024px) { .kn-pv__layer-label--blue { font-size: 12px; font-weight: 600; } }
.kn-pv__layer-label--mute { color: #f4f4f5; font-size: 10px; letter-spacing: 0.2em; font-weight: 400; }
@media (min-width: 640px) { .kn-pv__layer-label--mute { font-size: 11px; } }
@media (min-width: 1024px) { .kn-pv__layer-label--mute { font-size: 12px; font-weight: 600; } }

/* Sources */
.kn-pv__sources {
  position: relative; width: 85%; margin-top: 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
}
@media (min-width: 640px) { .kn-pv__sources { gap: 10px; } }
@media (min-width: 1024px) { .kn-pv__sources { margin-top: 12px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } }
@media (min-width: 1024px) { .kn-pv__src-br { display: none; } }
.kn-pv__src {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: rgba(24,24,27,0.4); border: 1px solid #27272a; border-radius: 12px;
  padding: 10px 8px;
}
@media (min-width: 640px) { .kn-pv__src { padding: 12px; } }
@media (min-width: 1024px) { .kn-pv__src { padding: 16px; } }
.kn-pv__src span:last-child { color: #d4d4d8; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 640px) { .kn-pv__src span:last-child { font-size: 11px; } }
@media (min-width: 1024px) { .kn-pv__src span:last-child { font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0.06em; } }
@media (min-width: 1024px) { .kn-pv__src span:last-child { font-weight: 600; } }
.kn-pv__src-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-bottom: 6px; }
@media (min-width: 1024px) { .kn-pv__src-dot { margin-bottom: 12px; } }
.kn-pv__src-dot--orange { background: #ff760c; }
.kn-pv__src-dot--blue { background: #60a5fa; }
@media (min-width: 1024px) { .kn-pv__src-br { display: none; } }

/* Mobile rail */
.kn-pv__rail-mobile {
    display: flex; flex-direction: column; justify-content: center; margin-top: 20px;
    min-width: 180px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.12); border-radius: 12px;
    backdrop-filter: blur(4px);
}
.kn-pv__rail-mobile .kn-pv__rail-label,
.kn-pv__rail-mobile .kn-pv__rail-name,
.kn-pv__rail-mobile .kn-pv__rail-sub { font-weight: 400; }
@media (min-width: 1024px) { .kn-pv__rail-mobile { display: none; } }

/* ===== About + Get Started ===== */
.kn-ac { position: relative; overflow: hidden; background: #fafafa; padding: 48px 0; }
@media (min-width: 640px) { .kn-ac { padding: 56px 0; } }
@media (min-width: 1024px) { .kn-ac { padding: 80px 0; } }
.kn-ac__bg {
  pointer-events: none; position: absolute; inset: 0; opacity: 0.6;
  background:
    radial-gradient(45% 35% at 12% 20%, rgba(255,118,12,0.10), transparent 70%),
    radial-gradient(45% 35% at 88% 80%, rgba(255,118,12,0.10), transparent 70%);
}
.kn-ac__inner {
  position: relative; margin: 0 auto; width: 100%; max-width: 1152px;
  padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 1024px) {
  .kn-ac__inner { grid-template-columns: 1fr 1fr; gap: 56px; padding: 0 40px; }
}
.kn-ac__tag {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 9999px; padding: 4px 12px;
  font-size: 12px; font-weight: 500;
}
.kn-ac__tag--blue { border: 1px solid rgba(14,165,233,0.3); background: rgba(14,165,233,0.10); color: #0369a1; }
.kn-ac__tag--orange { border: 1px solid rgba(255,118,12,0.3); background: rgba(255,118,12,0.10); color: #c2410c; }
.kn-ac__ping { position: absolute; inset: 0; border-radius: 9999px; opacity: 0.75; animation: kn-ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
.kn-ac__core { position: relative; display: inline-flex; height: 8px; width: 8px; border-radius: 9999px; }
.kn-ac__ping--blue, .kn-ac__core--blue { background: #0ea5e9; }
.kn-ac__ping--orange, .kn-ac__core--orange { background: #f97316; }

.kn-ac__title {
  margin-top: 16px; font-size: 24px; line-height: 1.2;
  color: #171717; font-weight: 600; letter-spacing: -0.02em;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
@media (min-width: 640px) { .kn-ac__title { font-size: 28px; } }
.kn-ac__accent--blue { background: linear-gradient(90deg, #0369a1, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kn-ac__accent--orange { background: linear-gradient(90deg, #c2410c, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kn-ac__p { margin-top: 16px; font-size: 14px; line-height: 1.65; color: #525252; }
@media (min-width: 640px) { .kn-ac__p { font-size: 16px; } }
.kn-ac__more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 24px; font-size: 14px; font-weight: 600; color: #c2410c;
  transition: color .2s ease;
}
.kn-ac__more:hover { color: #9a3412; }

.kn-ac__card {
  position: relative;
  border-radius: 24px; border: 1px solid #e5e5e5; background: #fff;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 60px -30px rgba(255,118,12,0.25);
}
@media (min-width: 640px) { .kn-ac__card { padding: 32px; } }
@media (min-width: 1024px) { .kn-ac__card { padding: 40px; } }

.kn-ac__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
@media (min-width: 640px) { .kn-ac__btns { flex-direction: row; flex-wrap: wrap; } }
.kn-ac__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; transition: all .2s ease;
}
.kn-ac__btn--primary {
  background: #f97316; color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.kn-ac__btn--primary:hover { background: #ea580c; box-shadow: 0 10px 24px -10px rgba(234,88,12,0.5); }
.kn-ac__btn--ghost {
  border: 1px solid #d4d4d4; background: #fff; color: #0a0a0a;
}
.kn-ac__btn--ghost:hover { border-color: rgba(255,118,12,0.4); color: #c2410c; }
.kn-ac__btn--dark {
  background: #171717; color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.kn-ac__btn--dark:hover { background: #262626; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.4); }
.kn-ac__btn { gap: 8px; }
.kn-ac__btn-ico { width: 16px; height: 16px; flex: 0 0 16px; }
.kn-ac__more-ico { width: 16px; height: 16px; transition: transform .2s ease; }
.kn-ac__more:hover .kn-ac__more-ico { transform: translateX(2px); }

/* ===== Footer ===== */
.kn-footer { position: relative; overflow: hidden; background: #0a0a0a; color: #d4d4d8; }
.kn-footer__bg {
  pointer-events: none; position: absolute; inset: 0; opacity: 0.4;
  background:
    radial-gradient(40% 60% at 10% 0%, rgba(255,118,12,0.10), transparent 70%),
    radial-gradient(40% 60% at 90% 100%, rgba(56,189,248,0.08), transparent 70%);
}
.kn-footer__inner {
  position: relative; margin: 0 auto; width: 100%; max-width: 1152px;
  padding: 40px 24px;
}
@media (min-width: 1024px) { .kn-footer__inner { padding: 48px 40px; } }
.kn-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 1024px) {
  .kn-footer__grid { grid-template-columns: 5fr 7fr; gap: 48px; }
}
.kn-footer__logo img { height: 28px; width: auto; }
.kn-footer__lead { margin-top: 20px; max-width: 28rem; font-size: 14px; font-weight: 500; color: #e4e4e7; }
.kn-footer__tag { margin-top: 12px; max-width: 28rem; font-size: 14px; line-height: 1.65; color: #a1a1aa; }
.kn-footer__contact { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #d4d4d8; }
.kn-footer__contact a { color: #d4d4d8; transition: color .2s ease; }
.kn-footer__contact a:hover { color: #fb923c; }
.kn-footer__contact span { color: #a1a1aa; }
.kn-footer__social { margin-top: 24px; }
.kn-footer__social h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #71717a; }
.kn-footer__social-row { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.kn-footer__social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; width: 36px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05);
  color: #d4d4d8; font-size: 12px; text-transform: uppercase; transition: all .2s ease;
}
.kn-footer__social-row a:hover { border-color: rgba(251,146,60,0.4); background: rgba(251,146,60,0.10); color: #fb923c; }
.kn-footer__social-row a svg { width: 16px; height: 16px; display: block; }
.kn-footer__cols { display: flex; flex-direction: column; }
.kn-footer__cols-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px;
}
@media (min-width: 640px) { .kn-footer__cols-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.kn-footer__cols h3 {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: #71717a;
}
.kn-footer__cols ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kn-footer__cols a { font-size: 14px; color: #d4d4d8; transition: color .2s ease; }
.kn-footer__cols a:hover { color: #fb923c; }
.kn-footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10);
}
.kn-footer__disclaimer { margin: 16px 0 0; font-size: 14px; font-style: italic; line-height: 1.65; color: #71717a; text-align: center; }
.kn-footer__bottom-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
@media (min-width: 640px) {
  .kn-footer__bottom-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.kn-footer__bottom-row p { margin: 0; font-size: 12px; color: #71717a; }
.kn-footer__legal { display: flex; align-items: center; gap: 20px; }
.kn-footer__legal a { font-size: 12px; color: #71717a; transition: color .2s ease; }
.kn-footer__legal a:hover { color: #e4e4e7; }

/* ===== Tablet (768–1023px): bump side padding to 40px ===== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .kn-hero__inner,
  .kn-missing__inner,
  .kn-diff__inner,
  .kn-pw__inner,
  .kn-cl__inner,
  .kn-eco__inner,
  .kn-app__inner,
  .kn-sol__inner,
  .kn-trac__inner,
  .kn-kai__inner,
  .kn-pv__inner,
  .kn-ac__inner,
  .kn-footer__inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* Let constrained copy use the available width on tablet */
  .kn-trac__copy p,
  .kn-missing__copy { max-width: none; }
}

/* --- Scroll reveal ------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Solution mega menu (desktop) --------------------------------------- */
.kn-nav__mega-wrap { position: relative; display: inline-flex; align-items: center; }
.kn-nav__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: rgba(15,23,42,0.8);
  text-decoration: none; transition: color .15s ease;
  cursor: pointer;
}
.kn-nav__trigger:hover { color: var(--color-primary); }
.kn-nav__trigger .kn-chev { transition: transform .2s ease; }
.kn-nav__mega-wrap:hover .kn-nav__trigger .kn-chev,
.kn-nav__mega-wrap:focus-within .kn-nav__trigger .kn-chev { transform: rotate(180deg); }

.kn-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px;
  width: min(64rem, 94vw);
  visibility: hidden; opacity: 0;
  transition: opacity .15s ease, visibility .15s ease;
  z-index: 60;
}
.kn-nav__mega-wrap:hover .kn-mega,
.kn-nav__mega-wrap:focus-within .kn-mega { visibility: visible; opacity: 1; }

.kn-mega__panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,0.14);
  overflow: hidden;
}
.kn-mega__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.kn-mega__col--platform { grid-column: span 3; display: flex; flex-direction: column; gap: 12px; }
.kn-mega__col--programs { grid-column: span 6; display: flex; flex-direction: column; gap: 12px; }
.kn-mega__promo { grid-column: span 3; }

.kn-mega__eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(15,23,42,0.45); margin: 0;
}

.kn-mega__feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px; border-radius: 12px; text-decoration: none;
  transition: background-color .15s ease;
}
.kn-mega__feature:hover { background: color-mix(in oklab, var(--color-primary) 6%, transparent); }
.kn-mega__icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9999px;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fcd34d 100%);
  color: #fff; box-shadow: 0 0 12px rgba(251,146,60,0.6);
  outline: 1px solid rgba(255,255,255,0.4); overflow: hidden;
}
.kn-mega__icon-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7), transparent 55%);
}
.kn-mega__sparkle {
  position: absolute; background: rgba(255,255,255,0.9); border-radius: 9999px;
  animation: kn-mega-pulse 2s ease-in-out infinite;
}
.kn-mega__sparkle--a { top: -4px; left: 8px; width: 4px; height: 4px; }
.kn-mega__sparkle--b { bottom: 4px; right: 8px; width: 2px; height: 2px; animation-delay: .3s; background: rgba(255,255,255,0.8); }
@keyframes kn-mega-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.7); }
}
.kn-mega__feature-body { display: flex; flex-direction: column; min-width: 0; }
.kn-mega__feature-title-row { display: inline-flex; align-items: center; gap: 8px; }
.kn-mega__feature-title { font-size: 14px; font-weight: 600; color: rgba(15,23,42,1); transition: color .15s ease; }
.kn-mega__feature:hover .kn-mega__feature-title { color: var(--color-primary); }
.kn-mega__badge {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  padding: 2px 6px; border-radius: 9999px;
}
.kn-mega__feature-desc { margin-top: 4px; font-size: 12px; color: rgba(15,23,42,0.6); }

.kn-mega__programs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 16px; }
.kn-mega__item {
  display: block; padding: 8px; border-radius: 8px;
  text-decoration: none; transition: background-color .15s ease;
}
.kn-mega__item:hover { background: color-mix(in oklab, var(--color-primary) 6%, transparent); }
.kn-mega__item-title { margin: 0; font-size: 14px; font-weight: 600; color: rgba(15,23,42,1); transition: color .15s ease; }
.kn-mega__item:hover .kn-mega__item-title { color: var(--color-primary); }
.kn-mega__item-desc { margin: 2px 0 0; font-size: 12px; color: rgba(15,23,42,0.6); }

.kn-mega__promo {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; border-radius: 16px; padding: 20px; text-decoration: none;
  background: linear-gradient(135deg, #fb923c 0%, #fdba74 50%, #fde68a 100%);
  color: #fff;
}
.kn-mega__promo-glow { position: absolute; pointer-events: none; border-radius: 9999px; filter: blur(28px); }
.kn-mega__promo-glow--a { top: -40px; right: -40px; width: 128px; height: 128px; background: rgba(255,255,255,0.3); }
.kn-mega__promo-glow--b { bottom: -48px; left: -32px; width: 128px; height: 128px; background: rgba(255,255,255,0.2); }
.kn-mega__promo-title { position: relative; font-size: 20px; line-height: 1.15; font-weight: 700; color: #fff; }
.kn-mega__promo-cta {
  position: relative; margin-top: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.kn-mega__promo-cta svg { transition: transform .2s ease; }
.kn-mega__promo:hover .kn-mega__promo-cta svg { transform: translateX(4px); }

/* --- Solution drawer (mobile) ------------------------------------------- */
.kn-drawer__solution-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px; background: transparent; border: 0; color: rgba(255,255,255,0.8);
  font: 500 16px/1.2 inherit; border-radius: 12px; cursor: pointer; text-align: left;
  transition: background-color .15s ease, color .15s ease;
}
.kn-drawer__solution-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kn-drawer__solution-toggle[aria-expanded="true"] .kn-chev { transform: rotate(180deg); }
.kn-drawer__solution-toggle .kn-chev { transition: transform .2s ease; }
.kn-drawer__solution { margin: 4px 0 8px 12px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 16px; }
.kn-drawer__solution[hidden] { display: none; }
.kn-drawer__group { display: flex; flex-direction: column; gap: 4px; }
.kn-drawer__group-title { margin: 8px 8px 0; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.kn-drawer__sub { display: block; padding: 8px; border-radius: 8px; text-decoration: none; transition: background-color .15s ease; }
.kn-drawer__sub:hover { background: rgba(255,255,255,0.1); }
.kn-drawer__sub-title { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.kn-drawer__sub-desc { margin: 2px 0 0; font-size: 12px; color: rgba(255,255,255,0.6); }

/* --- Coming soon page --------------------------------------------------- */
.kn-coming { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 96px 24px; background: var(--color-background, #fff); }
.kn-coming__inner { max-width: 480px; text-align: center; }
.kn-coming__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 9999px; margin: 0 auto 24px;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fcd34d 100%);
  color: #fff; box-shadow: 0 12px 32px rgba(251,146,60,0.35);
}
.kn-coming__title { font-size: clamp(40px, 6vw, 56px); margin: 0 0 12px; }
.kn-coming__sub { font-size: 16px; color: rgba(15,23,42,0.6); margin: 0 0 32px; }
.kn-coming__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: 9999px;
  background: var(--color-primary); color: var(--color-primary-foreground, #fff);
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  transition: opacity .15s ease, transform .15s ease;
}
.kn-coming__cta:hover { opacity: .9; transform: translateY(-1px); }

/* ===== Kinis Learn — Course Page ===== */
.kn-course-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 60%);
  border-bottom: 1px solid #e5e7eb;
}
.kn-course-hero__inner { max-width: 72rem; margin: 0 auto; padding: 48px 24px; }
@media (min-width: 768px) { .kn-course-hero__inner { padding: 64px 40px; } }
.kn-course-hero__crumbs { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #6b7280; margin: 0 0 16px; }
.kn-course-hero__crumbs a { color: #6b7280; text-decoration: none; }
.kn-course-hero__crumbs a:hover { color: #ea580c; }
.kn-course-hero__crumbs span { margin: 0 8px; color: #d1d5db; }
.kn-course-hero__crumbs span.is-current { color: #111827; margin-right: 0; }
.kn-course-hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #fed7aa; background: rgba(255,247,237,.8); color: #c2410c;
  padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500;
}
.kn-course-hero__title { margin: 16px 0 12px; font-size: 32px; line-height: 1.05; font-weight: 600; color: #0a0a0a; max-width: 48rem; }
@media (min-width: 640px) { .kn-course-hero__title { font-size: 40px; } }
@media (min-width: 1024px) { .kn-course-hero__title { font-size: 48px; } }
.kn-course-hero__title-accent { background: linear-gradient(90deg, #ea580c, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kn-course-hero__lead { max-width: 42rem; color: #525252; font-size: 16px; line-height: 1.65; }

.kn-course { max-width: 72rem; margin: 0 auto; padding: 48px 24px; }
@media (min-width: 768px) { .kn-course { padding: 64px 40px; } }
.kn-course__gate { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) { .kn-course__gate { grid-template-columns: 2fr 3fr; gap: 48px; } }
.kn-course__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #525252; }
.kn-course__pill--ok { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.kn-course__intro h2 { margin: 16px 0 12px; font-size: 24px; line-height: 1.2; color: #0a0a0a; }
@media (min-width: 640px) { .kn-course__intro h2 { font-size: 28px; } }
.kn-course__intro p { color: #525252; font-size: 14px; line-height: 1.65; }
.kn-course__benefits { margin: 24px 0 0; padding: 0; list-style: none; }
.kn-course__benefits li { position: relative; padding: 6px 0 6px 24px; color: #374151; font-size: 14px; }
.kn-course__benefits li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: #ea580c; font-weight: 700; }

.kn-course__form { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px -20px rgba(0,0,0,.15); }
@media (min-width: 640px) { .kn-course__form { padding: 32px; } }
.kn-course__form label { display: block; font-size: 14px; font-weight: 500; color: #1f2937; margin-bottom: 12px; }
.kn-course__form input, .kn-course__form select {
  display: block; width: 100%; height: 44px; margin-top: 6px;
  padding: 0 12px; border: 1px solid #d4d4d8; border-radius: 6px;
  background: #fff; font-size: 14px; color: #111827; font-family: inherit;
  box-sizing: border-box;
}
.kn-course__form input:focus, .kn-course__form select:focus {
  outline: none; border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.18);
}
.kn-course__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .kn-course__row { grid-template-columns: 1fr 1fr; gap: 16px; } }
.kn-course__row label { margin-bottom: 0; }
.kn-course__phone { display: flex; margin-top: 6px; }
.kn-course__phone select { width: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; margin-top: 0; }
.kn-course__phone input { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-top: 0; }
.kn-course__error { margin: 12px 0 0; color: #dc2626; font-size: 13px; font-weight: 500; }
.kn-course__submit {
  margin-top: 20px; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px; border: 0; border-radius: 9999px;
  background: #ff760c; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  font-family: inherit; transition: background .15s ease, box-shadow .15s ease;
}
.kn-course__submit:hover { background: #ea580c; box-shadow: 0 8px 24px -8px rgba(234,88,12,.5); }
.kn-course__legal { margin: 12px 0 0; color: #737373; font-size: 11px; line-height: 1.6; }

.kn-course__content h2 { margin: 12px 0 8px; font-size: 24px; line-height: 1.2; color: #0a0a0a; }
@media (min-width: 640px) { .kn-course__content h2 { font-size: 28px; } }
.kn-course__sub { color: #525252; font-size: 14px; }
.kn-course__lessons { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .kn-course__lessons { grid-template-columns: 1fr 1fr; } }
.kn-course__lessons li {
  display: flex; gap: 16px; padding: 20px; border: 1px solid #e5e7eb; border-radius: 16px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.kn-course__lessons li:hover { border-color: #fdba74; box-shadow: 0 10px 30px -15px rgba(234,88,12,.35); }
.kn-course__num {
  flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa;
  font-weight: 700; font-size: 14px;
}
.kn-course__meta { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a3a3a3; }
.kn-course__lessons h3 { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: #0a0a0a; }

/* ==================== Request Demo page ==================== */
.kn-rd { position: relative; overflow: hidden; padding: 112px 0 64px; }
@media (min-width: 640px) { .kn-rd { padding: 128px 0 80px; } }
@media (min-width: 1024px) { .kn-rd { padding: 144px 0 96px; } }
.kn-rd__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(255,170,100,0.20), transparent 65%),
    radial-gradient(45% 40% at 95% 90%, rgba(255,140,60,0.18), transparent 70%);
}
.kn-rd__inner {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: 1152px; margin: 0 auto; padding: 0 20px;
}
@media (min-width: 640px) { .kn-rd__inner { padding: 0 32px; } }
@media (min-width: 1024px) {
  .kn-rd__inner { grid-template-columns: 1.05fr 0.95fr; gap: 56px; padding: 0 40px; }
}

.kn-rd__tag {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500;
  color: #c2410c; background: rgba(255,247,237,0.8); border: 1px solid #fed7aa;
}
.kn-rd__ping {
  position: absolute; inset: 0; border-radius: 9999px;
  background: #f97316; opacity: .75;
  animation: kn-ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.kn-rd__core {
  position: relative; display: inline-flex; width: 8px; height: 8px;
  border-radius: 9999px; background: #f97316;
}
@keyframes kn-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

.kn-rd__title {
  margin: 20px 0 0; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: #171717;
}
@media (min-width: 640px) { .kn-rd__title { font-size: 48px; } }
@media (min-width: 1024px) { .kn-rd__title { font-size: 52px; } }
.kn-rd__accent {
  background: linear-gradient(to right, #ea580c, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-rd__sub {
  margin: 20px 0 0; max-width: 36rem; color: #525252;
  font-size: 16px; line-height: 1.65;
}
@media (min-width: 640px) { .kn-rd__sub { font-size: 18px; } }

.kn-rd__bullets {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  color: #404040; font-size: 14px;
}
@media (min-width: 640px) { .kn-rd__bullets { font-size: 15px; } }
.kn-rd__bullets li { display: flex; align-items: flex-start; gap: 12px; }
.kn-rd__ico {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #ffedd5; color: #ea580c;
}

.kn-rd__product {
  display: none; align-items: center; gap: 16px;
  margin: 40px 0 0; padding: 16px;
  border: 1px solid #ffedd5; border-radius: 24px;
  background: linear-gradient(to bottom right, #fff7ed, #ffffff, #fffbeb);
  box-shadow: 0 30px 60px -30px rgba(234,88,12,0.25);
}
@media (min-width: 1024px) { .kn-rd__product { display: flex; } }
.kn-rd__product img { height: 160px; width: auto; flex: none; object-fit: contain; }
.kn-rd__product-title { margin: 0; font-family: "Phudu","Manrope",sans-serif; font-size: 18px; line-height: 1.2; color: #171717; }
.kn-rd__product-sub { margin: 4px 0 0; font-size: 14px; color: #525252; }

.kn-rd__contact { margin: 32px 0 0; font-size: 14px; color: #525252; display: flex; flex-direction: column; gap: 4px; }
.kn-rd__contact-label { font-weight: 500; color: #262626; }
.kn-rd__contact-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kn-rd__contact-links a { display: inline-flex; align-items: center; gap: 6px; color: #ff760c; text-decoration: none; }
.kn-rd__contact-links a:hover { text-decoration: underline; }

.kn-rd__right { position: relative; }
.kn-rd__card {
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: 24px; padding: 24px;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,0.18);
}
@media (min-width: 640px) { .kn-rd__card { padding: 32px; } }
.kn-rd__head { margin-bottom: 24px; }
.kn-rd__h2 { margin: 0; font-size: 24px; color: #171717; }
@media (min-width: 640px) { .kn-rd__h2 { font-size: 28px; } }
.kn-rd__h2-sub { margin: 6px 0 0; font-size: 14px; color: #525252; }

.kn-rd__form { display: flex; flex-direction: column; gap: 20px; }
.kn-rd__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .kn-rd__row--2 { grid-template-columns: 1fr 1fr; } }
.kn-rd__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kn-rd__field > span { color: #404040; font-weight: 500; }
.kn-rd__field input, .kn-rd__field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #e5e7eb; border-radius: 12px;
  font: inherit; font-size: 14px; color: #171717; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.kn-rd__field input:focus, .kn-rd__field textarea:focus {
  outline: none; border-color: #ff760c; box-shadow: 0 0 0 3px rgba(255,118,12,0.15);
}
.kn-rd__field--ta textarea { resize: vertical; min-height: 110px; }

.kn-rd__label { display: block; font-size: 14px; font-weight: 500; color: #262626; }
.kn-rd__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.kn-rd__chip {
  border: 1px solid #e5e7eb; background: #fff; color: #404040;
  border-radius: 9999px; padding: 6px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.kn-rd__chip:hover { border-color: rgba(255,118,12,0.4); color: #ff760c; }
.kn-rd__chip.is-active { border-color: #ff760c; background: #ff760c; color: #fff; }

.kn-rd__consents {
  display: flex; flex-direction: column; gap: 12px;
  background: #fafafa; padding: 16px; border-radius: 16px;
}
.kn-rd__consent { display: flex; gap: 10px; font-size: 13px; color: #404040; line-height: 1.45; cursor: pointer; }
.kn-rd__consent input { margin-top: 3px; accent-color: #ff760c; }

.kn-rd__submit-wrap { display: flex; justify-content: flex-end; }
.kn-rd__submit {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 28px; border: 0; border-radius: 9999px;
  background: #ff760c; color: #fff; font-weight: 600; font-size: 14px;
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: all .2s;
}
.kn-rd__submit:hover { background: #ea580c; box-shadow: 0 6px 14px -6px rgba(234,88,12,.5); }
.kn-rd__submit:disabled { opacity: .6; cursor: not-allowed; }
.kn-rd__submit svg { transition: transform .2s; }
.kn-rd__submit:hover svg { transform: translateX(2px); }

.kn-rd__error {
  margin-top: 4px; padding: 10px 14px; border-radius: 12px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px;
}

.kn-rd__success {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px 16px; text-align: center;
  background: rgba(236,253,245,0.6); border-radius: 16px;
}
.kn-rd__success[hidden] { display: none !important; }
.kn-rd__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 9999px; background: #d1fae5; color: #059669;
}
.kn-rd__success h3 { margin: 0; font-size: 20px; color: #171717; }
.kn-rd__success p { margin: 8px 0 0; max-width: 28rem; font-size: 14px; color: #525252; }
.kn-rd__success a { color: #ff760c; }
.kn-rd__again {
  margin-top: 8px; height: 40px; padding: 0 20px;
  border: 1px solid #e5e7eb; background: #fff; color: #404040;
  border-radius: 9999px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.kn-rd__again:hover { border-color: rgba(255,118,12,0.4); color: #ff760c; }

.kn-rd__privacy {
  margin: 16px 0 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; color: #737373;
}