:root {
  color-scheme: dark;
  --bg: #080c12;
  --bg-deep: #05080d;
  --surface: #101722;
  --surface-2: #101925;
  --surface-3: #151f2d;
  --line: #263449;
  --line-bright: #36516d;
  --text: #e7eef8;
  --muted: #8fa2bb;
  --mint: #72e4bf;
  --blue: #6da8ff;
  --coral: #ff7d8a;
  --gold: #f5bf6f;
  --radius: 14px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-width: 290px;
  background:
    radial-gradient(circle at 80% -10%, rgba(109, 168, 255, .12), transparent 34rem),
    radial-gradient(circle at 12% 18%, rgba(114, 228, 191, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
button, input { font: inherit; }
img { max-width: 100%; }
code, kbd { font-family: "Cascadia Code", Consolas, monospace; }
code { color: #b8d8ff; }
kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #3a4c63;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #111a27;
  color: #dce8f6;
  font-size: .82em;
}

.skip-link { position: fixed; top: -50px; left: 12px; z-index: 1000; padding: 9px 13px; background: var(--mint); color: #061018; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; position: relative; }
.eyebrow { color: var(--mint); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.gradient-text { background: linear-gradient(100deg, var(--mint), #86d8ff 65%, #aaa0ff); background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(54, 81, 109, .68);
  background: rgba(8, 12, 18, .89);
  backdrop-filter: blur(18px);
}
.nav { min-height: 66px; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.04rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand img { width: 31px; height: 31px; border-radius: 9px; }
.version { padding: 2px 7px; border: 1px solid #35506c; border-radius: 999px; color: #9fc9f5; font-size: .65rem; letter-spacing: .06em; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; color: var(--muted); font-size: .87rem; font-weight: 650; }
.nav-actions { display: flex; gap: 8px; }
.mobile-menu { display: none !important; margin-left: auto; }

.btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: #111b28;
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: translateY(-1px); border-color: #5f83a5; background: #172435; color: #fff; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.btn-primary { border-color: transparent; background: linear-gradient(110deg, var(--mint), var(--blue)); color: #07111a; box-shadow: 0 8px 25px rgba(92, 184, 203, .2); }
.btn-primary:hover { background: linear-gradient(110deg, #8aebcb, #84b8ff); color: #061018; box-shadow: 0 10px 32px rgba(92, 184, 203, .28); }
.btn-small { min-height: 34px; padding: 6px 11px; font-size: .82rem; }

.hero { padding: 92px 0 76px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr); gap: 68px; align-items: center; }
.hero h1 { max-width: 720px; margin: 15px 0 20px; font-size: clamp(2.8rem, 5.8vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.hero-copy { max-width: 650px; color: #a9b9cd; font-size: clamp(1.02rem, 1.6vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-note { margin-top: 14px; color: #71879f; font-size: .82rem; }
.signal-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 29px; }
.signal { padding: 6px 10px; border: 1px solid #2a4058; border-radius: 999px; background: #0d151f; color: #9fb1c6; font-size: .77rem; }
.signal::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(114, 228, 191, .7); }

.app-frame { position: relative; margin: 0; padding: 8px; border: 1px solid #34516b; border-radius: 18px; background: linear-gradient(140deg, #182537, #0b111a); box-shadow: var(--shadow); transform: perspective(1000px) rotateY(-2deg) rotateX(1deg); }
.app-frame::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 50px rgba(109, 168, 255, .1); pointer-events: none; }
.app-frame img { display: block; width: 100%; height: auto; border-radius: 11px; border: 1px solid #1d2b3c; }
.hero-visual-caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 13px; align-items: start; padding: 12px 7px 5px; }
.hero-visual-caption strong { color: #e7eef8; font-size: .82rem; white-space: nowrap; }
.hero-visual-caption span { color: #8fa2bb; font-size: .75rem; line-height: 1.45; }

.demo-section { background: radial-gradient(circle at 50% 28%, rgba(42,102,133,.14), transparent 43%); }
.kc-walkthrough { overflow: hidden; border: 1px solid #35516d; border-radius: 18px; background: #080d14; box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 50px rgba(109,168,255,.07); }
.kc-walkthrough-head { min-height: 62px; display: flex; align-items: center; gap: 22px; padding: 12px 16px; border-bottom: 1px solid #26364b; background: linear-gradient(180deg,#131d2a,#0d151f); }
.kc-walkthrough-head > div { display: grid; gap: 2px; }
.kc-walkthrough-head span { color: #72e4bf; font-size: .58rem; font-weight: 900; letter-spacing: .15em; }
.kc-walkthrough-head strong { color: #edf5ff; font-size: .96rem; }
.kc-walkthrough-head p { margin: 0 0 0 auto; color: #8094aa; font-size: .72rem; }
.kc-walkthrough-steps { display: flex; gap: 1px; overflow-x: auto; padding: 1px; border-bottom: 1px solid #1e2d3e; background: #1e2d3e; scrollbar-width: thin; }
.kc-walkthrough-steps button { flex: 1 0 105px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 6px; border: 0; background: #0e1722; color: #71869d; font: inherit; font-size: .67rem; font-weight: 750; cursor: pointer; transition: background 150ms ease,color 150ms ease; }
.kc-walkthrough-steps button:hover, .kc-walkthrough-steps button.is-active { background: #172435; color: #eef5ff; }
.kc-walkthrough-steps button.is-active { box-shadow: inset 0 -2px #72e4bf; }
.kc-walkthrough-steps span { min-width: 24px; padding: 2px 4px; border: 1px solid #314961; border-radius: 6px; color: #72e4bf; font-family: Consolas,monospace; font-size: .55rem; text-align: center; }
.kc-walkthrough-stage { position: relative; overflow: hidden; background: #05090e; }
.kc-walkthrough-stage > img { display: block; width: 100%; height: auto; background: #080c12; transition: opacity 150ms ease; }
.kc-walkthrough-hotspots { position: absolute; inset: 0; pointer-events: none; }
.kc-walkthrough-hotspot { position: absolute; min-width: 32px; min-height: 28px; border: 2px solid #72e4bf; border-radius: 9px; background: rgba(114,228,191,.1); box-shadow: 0 0 0 4px rgba(114,228,191,.08),0 0 26px rgba(114,228,191,.28); color: #061019; cursor: pointer; pointer-events: auto; animation: walkthroughPulse 2.6s ease-in-out infinite; }
.kc-walkthrough-hotspot.secondary { border-color: #6da8ff; background: rgba(109,168,255,.08); box-shadow: 0 0 0 4px rgba(109,168,255,.07),0 0 24px rgba(109,168,255,.2); animation-delay: -.6s; }
.kc-walkthrough-hotspot:hover, .kc-walkthrough-hotspot:focus-visible { z-index: 20; }
.kc-walkthrough-hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kc-walkthrough-cursor-tip { position: absolute; z-index: 30; width: max-content; max-width: min(380px,calc(100% - 24px)); padding: 10px 12px; border: 1px solid #4d708d; border-radius: 10px; background: rgba(8,15,23,.96); color: #e7eef8; font-size: clamp(.65rem,1vw,.76rem); font-weight: 650; line-height: 1.45; box-shadow: 0 12px 34px rgba(0,0,0,.55),0 0 22px rgba(109,168,255,.12); backdrop-filter: blur(10px); pointer-events: none; }
.kc-walkthrough-cursor-tip[hidden] { display: none; }
.kc-walkthrough-build { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; padding: 24px; background: rgba(4,8,13,.89); text-align: center; }
.kc-walkthrough-build[hidden], .kc-demo-shell[hidden] { display: none; }
.kc-walkthrough-build i { width: 44px; height: 44px; margin-bottom: 15px; border: 3px solid #294057; border-top-color: #72e4bf; border-right-color: #6da8ff; border-radius: 50%; animation: demoSpin .8s linear infinite; }
.kc-walkthrough-build span { color: #72e4bf; font-size: .57rem; font-weight: 900; letter-spacing: .15em; }
.kc-walkthrough-build strong { margin: 8px 0 15px; color: #e7eef8; font-size: clamp(.95rem,2vw,1.35rem); }
.kc-walkthrough-build > div { width: min(420px,70vw); height: 7px; overflow: hidden; border-radius: 99px; background: #142131; }
.kc-walkthrough-build > div b { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#72e4bf,#6da8ff,#ad91ff); animation: walkthroughBuild 1.35s ease forwards; }
.kc-walkthrough-build small { margin-top: 11px; color: #6f849a; font-size: .65rem; }
@keyframes walkthroughPulse { 0%,100% { opacity: .84; filter: brightness(.94); } 50% { opacity: 1; filter: brightness(1.06); } }
@keyframes walkthroughBuild { 0% { width: 12%; } 55% { width: 68%; } 100% { width: 100%; } }
.kc-demo-shell { --demo-tab-scale: .9; overflow: hidden; border: 1px solid #35516d; border-radius: 18px; background: #080d14; box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 50px rgba(109,168,255,.07); }
.kc-demo-topbar { min-height: 58px; display: flex; align-items: center; gap: 7px; padding: 8px; border-bottom: 1px solid #26364b; background: linear-gradient(180deg,#131d2a,#0d151f); }
.kc-demo-brand { display: flex; align-items: center; gap: 8px; padding: 0 9px 0 4px; white-space: nowrap; }
.kc-demo-brand img { width: 29px; height: 29px; border-radius: 8px; }
.kc-demo-brand strong { font-size: .9rem; }
.kc-demo-brand span { padding: 2px 6px; border: 1px solid #35506c; border-radius: 999px; color: #9fc9f5; font-size: .56rem; font-weight: 850; letter-spacing: .08em; }
.kc-demo-tab { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 calc(11px * var(--demo-tab-scale)); border: 1px solid #26384e; border-radius: 10px; background: #111a26; color: #aebed0; font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; transition: padding 150ms ease, border-color 150ms ease, background 150ms ease; }
.kc-demo-tab:hover, .kc-demo-tab.is-active { border-color: #48657f; background: linear-gradient(180deg,#1c2b3d,#152130); color: #fff; }
.kc-demo-tab img { width: 20px; height: 20px; object-fit: contain; }
.kc-demo-tab img.invert { filter: invert(1); }
.kc-demo-question { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #35516d; border-radius: 6px; color: #fff; font-weight: 900; }
.kc-demo-drag { flex: 1; }
.kc-demo-window { border: 0; background: transparent; color: #7f94aa; font: inherit; font-size: .8rem; white-space: nowrap; }
.kc-demo-dock { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 5px 12px; border-bottom: 1px solid #1c2a3a; background: #0c131d; }
.kc-demo-dock > span { color: #637b94; font-size: .58rem; font-weight: 850; letter-spacing: .15em; }
.kc-demo-dock button { min-height: 27px; padding: 4px 9px; border: 1px solid #26384e; border-radius: 8px; background: #111a26; color: #667b92; font: inherit; font-size: .68rem; }
.kc-demo-dock button i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 2px; background: #53677d; }
.kc-demo-dock button.is-ready { border-color: #3c6b72; color: #dbeaf3; cursor: pointer; box-shadow: inset 0 0 18px rgba(114,228,191,.05); }
.kc-demo-dock button.is-ready i { background: #72e4bf; box-shadow: 0 0 8px rgba(114,228,191,.55); }
.kc-demo-dock strong { margin-left: auto; color: #5f748b; font-size: .64rem; font-weight: 650; }
.kc-demo-stage { position: relative; min-height: 470px; background: linear-gradient(145deg,#0c131d,#090e15); }
.kc-demo-panel[hidden] { display: none; }
.kc-demo-manager-panel { min-height: 470px; display: grid; grid-template-columns: 180px minmax(0,1fr); }
.kc-demo-sidebar { padding: 20px 12px; border-right: 1px solid #1e2c3d; background: #0d151f; }
.kc-demo-sidebar small { display: block; margin: 5px 8px 8px; color: #617991; font-size: .56rem; font-weight: 850; letter-spacing: .15em; }
.kc-demo-sidebar button { width: 100%; min-height: 35px; display: flex; align-items: center; gap: 7px; margin: 3px 0; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8196ac; font: inherit; font-size: .72rem; text-align: left; cursor: pointer; }
.kc-demo-sidebar button.is-active { border-color: #27405a; background: #172435; color: #e7eef8; }
.kc-demo-sidebar b { margin-left: auto; color: #60778e; font-size: .65rem; }
.kc-demo-manager { min-width: 0; padding: 22px; }
.kc-demo-heading { display: flex; align-items: flex-end; gap: 18px; }
.kc-demo-heading > div:first-child { min-width: 0; }
.kc-demo-heading span { color: #72e4bf; font-size: .56rem; font-weight: 900; letter-spacing: .15em; }
.kc-demo-heading h3 { margin: 3px 0; font-size: 1.45rem; }
.kc-demo-heading p { margin: 0; color: #71879f; font-size: .76rem; }
.kc-demo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.kc-demo-actions button, .kc-demo-apps article > button { min-height: 32px; padding: 6px 10px; border: 1px solid #2a4058; border-radius: 8px; background: #111b28; color: #c4d3e3; font: inherit; font-size: .69rem; font-weight: 750; cursor: pointer; }
.kc-demo-actions button.primary { border-color: transparent; background: linear-gradient(110deg,#72e4bf,#6da8ff); color: #07111a; }
.kc-demo-search { margin: 18px 0 13px; padding: 11px 13px; border: 1px solid #26394f; border-radius: 9px; background: #09111a; color: #50677f; font-size: .72rem; }
.kc-demo-search span { float: right; color: #7b91a7; }
.kc-demo-apps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.kc-demo-apps article { min-height: 210px; padding: 15px; border: 1px solid #24364b; border-radius: 12px; background: linear-gradient(145deg,#121c29,#0e1621); }
.kc-demo-appicon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid currentColor; border-radius: 10px; font-size: .7rem; font-weight: 900; }
.kc-demo-appicon.blue { color: #79b5ff; background: #10233a; }.kc-demo-appicon.mint { color: #72e4bf; background: #102820; }.kc-demo-appicon.violet { color: #b29aff; background: #21183a; }
.kc-demo-appicon.coral { color: #ff8d99; background: #321922; }
.kc-demo-apps h4 { margin: 0 0 6px; font-size: .85rem; }
.kc-demo-apps p { min-height: 54px; margin: 0 0 11px; color: #7e93a9; font-size: .7rem; line-height: 1.45; }
.kc-demo-apps article > span { display: inline-block; margin: 0 5px 11px 0; padding: 3px 7px; border-radius: 999px; background: #132337; color: #7ca7d2; font-size: .57rem; }
.kc-demo-apps article > button { display: block; border-color: #326d62; background: #12352f; color: #bff9e8; }
.kc-demo-generated-card { position: relative; border-color: #3e7d6c !important; box-shadow: 0 0 0 1px rgba(114,228,191,.08) inset, 0 0 24px rgba(114,228,191,.06); }
.kc-demo-new { position: absolute; top: 15px; right: 12px; margin: 0 !important; color: #72e4bf !important; font-size: .5rem !important; font-weight: 900; letter-spacing: .1em; }
.kc-demo-pagehead { padding: 22px 22px 13px; }
.kc-demo-pagehead > span, .kc-demo-help-panel > span { color: #72e4bf; font-size: .56rem; font-weight: 900; letter-spacing: .15em; }
.kc-demo-pagehead h3, .kc-demo-help-panel h3 { margin: 3px 0; font-size: 1.45rem; }
.kc-demo-pagehead p, .kc-demo-help-panel > p { margin: 0; color: #71879f; font-size: .76rem; }
.kc-demo-tabs-panel { padding-bottom: 20px; }
.kc-demo-tabsize { display: grid; grid-template-columns: 1fr minmax(250px,.9fr); gap: 24px; align-items: center; margin: 0 22px 13px; padding: 14px 16px; border: 1px solid #2b4158; border-radius: 12px; background: #101925; }
.kc-demo-tabsize small { color: #72e4bf; font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.kc-demo-tabsize strong { display: block; margin: 2px 0; font-size: .82rem; }
.kc-demo-tabsize p { margin: 0; color: #6e849a; font-size: .67rem; }
.kc-demo-tabsize label span { display: flex; justify-content: space-between; color: #8fa2bb; font-size: .66rem; }
.kc-demo-tabsize output { color: #72e4bf; font-weight: 900; }
.kc-demo-tabsize input { width: 100%; margin-top: 8px; accent-color: #72e4bf; }
.kc-demo-tabrows { margin: 0 22px; overflow: hidden; border: 1px solid #24364b; border-radius: 12px; background: #0f1824; }
.kc-demo-tabrows > div { min-height: 57px; display: grid; grid-template-columns: 52px 30px 150px minmax(160px,1fr) 82px; gap: 9px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #1f2d3e; color: #71879f; font-size: .67rem; }
.kc-demo-tabrows > div:last-child { border: 0; }
.kc-demo-tabrows img, .kc-demo-tabrows .siteicon { width: 27px; height: 27px; object-fit: contain; }
.kc-demo-tabrows img.invert { filter: invert(1); }
.kc-demo-tabrows .siteicon { display: grid; place-items: center; border-radius: 8px; background: #172a43; color: #91c4ff; font-size: .55rem; }
.kc-demo-tabrows .siteicon.red { background: #3b151b; color: #ff7d8a; }
.kc-demo-tabrows strong { color: #dbe6f2; font-size: .73rem; }
.kc-demo-tabrows code { overflow: hidden; color: #7fa9d0; text-overflow: ellipsis; white-space: nowrap; }
.kc-demo-tabrows i { padding: 3px 6px; border: 1px solid #2b4158; border-radius: 999px; font-style: normal; text-align: center; }
.kc-demo-tabrows i.mint { color: #72e4bf; }
.kc-demo-help-panel { min-height: 470px; padding: 54px 7%; text-align: center; }
.kc-demo-helpmark { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid #4c87a4; border-radius: 15px; background: linear-gradient(135deg,#72e4bf,#6da8ff); color: #07111a; font-size: 1.6rem; font-weight: 900; box-shadow: 0 12px 32px rgba(77,181,197,.18); }
.kc-demo-helpgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 28px; text-align: left; }
.kc-demo-helpgrid article { padding: 17px; border: 1px solid #26394f; border-radius: 12px; background: #101925; }
.kc-demo-helpgrid b { color: #72e4bf; font-family: Consolas,monospace; font-size: .6rem; }
.kc-demo-helpgrid strong { display: block; margin: 14px 0 6px; font-size: .82rem; }
.kc-demo-helpgrid p { margin: 0; color: #788ea5; font-size: .69rem; line-height: 1.5; }
.kc-demo-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(2,6,11,.88); }
.kc-demo-modal[hidden], .kc-demo-appwindow[hidden], .kc-demo-progress[hidden], .kc-demo-result[hidden], .kc-demo-form[hidden] { display: none; }
.kc-demo-modalwindow { width: min(850px,96%); overflow: hidden; border: 1px solid #36516d; border-radius: 15px; background: #101925; box-shadow: 0 30px 80px rgba(0,0,0,.65); }
.kc-demo-modalhead { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #26364a; }
.kc-demo-modalhead span { color: #72e4bf; font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.kc-demo-modalhead h3 { margin: 2px 0 0; font-size: 1.1rem; }
.kc-demo-modalhead button, .kc-demo-appwindow-head button { width: 32px; height: 32px; margin-left: auto; border: 1px solid #36516d; border-radius: 9px; background: #152131; color: #c8d7e6; font: inherit; font-size: 1rem; cursor: pointer; }
.kc-demo-form { padding: 16px; }
.kc-demo-draftline { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px; border: 1px solid #2a4058; border-radius: 10px; background: #0c1520; }
.kc-demo-draftline strong { font-size: .72rem; }.kc-demo-draftline span { color: #73899f; font-size: .65rem; }
.kc-demo-draftline select { margin-left: auto; padding: 7px 28px 7px 9px; border: 1px solid #314962; border-radius: 8px; background: #111c29; color: #dce7f3; font: inherit; font-size: .66rem; }
.kc-demo-form label { display: block; margin-bottom: 7px; color: #98abc0; font-size: .65rem; font-weight: 750; }
.kc-demo-form textarea { width: 100%; min-height: 92px; resize: vertical; padding: 12px; border: 1px solid #3e6d8b; border-radius: 10px; outline: none; background: #09111a; color: #e7eef8; font: inherit; font-size: .76rem; line-height: 1.5; }
.kc-demo-form textarea:focus { border-color: #72e4bf; box-shadow: 0 0 0 3px rgba(114,228,191,.08); }
.kc-demo-formactions { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.kc-demo-formactions span { color: #657b91; font-size: .63rem; }.kc-demo-formactions button { margin-left: auto; }
.kc-demo-modal .primary { padding: 8px 12px; border: 0; border-radius: 8px; background: linear-gradient(110deg,#72e4bf,#6da8ff); color: #07111a; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer; }
.kc-demo-progress { min-height: 290px; padding: 48px 18%; text-align: center; }
.kc-demo-spinner { width: 42px; height: 42px; margin: 0 auto 16px; border: 3px solid #21374c; border-top-color: #72e4bf; border-right-color: #6da8ff; border-radius: 50%; animation: demoSpin .8s linear infinite; }
.kc-demo-progress > span, .kc-demo-resultcopy > span { color: #72e4bf; font-size: .54rem; font-weight: 900; letter-spacing: .15em; }
.kc-demo-progress h4 { margin: 7px 0 16px; font-size: 1rem; }.kc-demo-progress p { color: #70869c; font-size: .68rem; }
.kc-demo-progressbar { height: 7px; overflow: hidden; border-radius: 99px; background: #0a111a; }.kc-demo-progressbar i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#72e4bf,#6da8ff,#ad91ff); transition: width .45s ease; }
.kc-demo-result { display: grid; grid-template-columns: .75fr 1.25fr; gap: 15px; padding: 16px; }
.kc-demo-resultcopy { padding: 18px 10px 10px; }.kc-demo-resultcopy h4 { margin: 6px 0; font-size: 1.2rem; }.kc-demo-resultcopy p { color: #7d92a8; font-size: .7rem; line-height: 1.5; }.kc-demo-resultcopy > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }.kc-demo-resultcopy button { padding: 8px 10px; border: 1px solid #2b4159; border-radius: 8px; background: #111b28; color: #bdcddd; font: inherit; font-size: .66rem; cursor: pointer; }
.kc-demo-miniapp { padding: 13px; border: 1px solid #2f4b63; border-radius: 12px; background: #0a111a; }.kc-demo-miniapp header { display: flex; justify-content: space-between; color: #dce8f5; font-size: .72rem; }.kc-demo-miniapp header span { color: #72e4bf; font-size: .58rem; }.kc-demo-miniapp .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 13px 0; }.kc-demo-miniapp .stats b { padding: 9px; border: 1px solid #26394f; border-radius: 8px; color: #92c4ff; font-size: .9rem; }.kc-demo-miniapp .stats small { display: block; margin-top: 3px; color: #647b92; font-size: .5rem; }.kc-demo-miniapp .chart { height: 67px; display: flex; align-items: end; gap: 7px; padding: 9px; border: 1px solid #213248; border-radius: 8px; }.kc-demo-miniapp .chart i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: linear-gradient(#6da8ff,#294f82); }.kc-demo-miniapp .chart i:nth-child(2){height:48%}.kc-demo-miniapp .chart i:nth-child(3){height:44%}.kc-demo-miniapp .chart i:nth-child(4){height:70%}.kc-demo-miniapp .chart i:nth-child(5){height:88%;background:linear-gradient(#72e4bf,#2b725e)}.kc-demo-miniapp .tasks { display: grid; gap: 5px; margin-top: 9px; }.kc-demo-miniapp .tasks span { display: flex; justify-content: space-between; padding: 5px 7px; border-radius: 6px; background: #111b28; color: #71879e; font-size: .56rem; }.kc-demo-miniapp .tasks b { color: #91c4ff; }
.kc-demo-appwindow { position: absolute; inset: 14px; z-index: 25; overflow: hidden; border: 1px solid #3a5872; border-radius: 14px; background: #0b121b; box-shadow: 0 24px 70px rgba(0,0,0,.72); }
.kc-demo-appwindow-head { min-height: 47px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid #24354a; background: #111b28; }.kc-demo-appwindow-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #4e718d; border-radius: 8px; color: #72e4bf; font-size: .62rem; font-weight: 900; }.kc-demo-appwindow-head strong { font-size: .77rem; }.kc-demo-appwindow-head span { color: #60778e; font-size: .59rem; }
.kc-demo-liveapp { padding: 20px; }.kc-demo-livehead { display: flex; align-items: end; gap: 16px; }.kc-demo-livehead span { color: #72e4bf; font-size: .52rem; font-weight: 900; letter-spacing: .14em; }.kc-demo-livehead h3 { margin: 3px 0; font-size: 1.35rem; }.kc-demo-livehead p { margin: 0; color: #70869c; font-size: .67rem; }.kc-demo-livehead button { margin-left: auto; padding: 8px 10px; border: 0; border-radius: 8px; background: linear-gradient(110deg,#72e4bf,#6da8ff); color: #07111a; font: inherit; font-size: .66rem; font-weight: 800; }
.kc-demo-livestats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 18px 0 10px; }.kc-demo-livestats article { position: relative; overflow: hidden; padding: 12px; border: 1px solid #26394f; border-radius: 10px; background: #101925; }.kc-demo-livestats span { display: block; color: #71879d; font-size: .58rem; }.kc-demo-livestats strong { font-size: 1.25rem; }.kc-demo-livestats i { position: absolute; inset: auto 0 0; height: 3px; }.kc-demo-livestats i.violet{background:#a98cff}.kc-demo-livestats i.blue{background:#6da8ff}.kc-demo-livestats i.mint{background:#72e4bf}
.kc-demo-livegrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; }.kc-demo-livegrid article { min-height: 175px; padding: 13px; border: 1px solid #26394f; border-radius: 10px; background: #101925; }.kc-demo-livegrid article > strong { font-size: .7rem; }.kc-demo-livegrid p { display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; border-radius: 7px; background: #0b131d; color: #8095aa; font-size: .6rem; }.kc-demo-livegrid p b { color: #72e4bf; }.kc-demo-bars { height: 120px; display: flex; align-items: end; gap: 10px; padding: 18px 8px 0; }.kc-demo-bars i { flex: 1; height: 28%; border-radius: 4px 4px 0 0; background: linear-gradient(#6da8ff,#263e66); }.kc-demo-bars i:nth-child(2){height:42%}.kc-demo-bars i:nth-child(3){height:55%}.kc-demo-bars i:nth-child(4){height:47%}.kc-demo-bars i:nth-child(5){height:72%}.kc-demo-bars i:nth-child(6){height:88%;background:linear-gradient(#72e4bf,#245a4c)}
@keyframes demoSpin { to { transform: rotate(360deg); } }
.kc-demo-note { margin: 12px 0 0; color: #6d8299; font-size: .75rem; text-align: center; }

.section { padding: 84px 0; }
.section-tight { padding: 58px 0; }
.section-line { border-top: 1px solid rgba(38, 52, 73, .65); }
.section-head { max-width: 700px; margin-bottom: 34px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section h2, .docs-hero h1 { margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.04em; }
.section-head p { margin: 0; color: var(--muted); font-size: 1.02rem; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-card { min-height: 225px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21,31,45,.92), rgba(14,21,31,.92)); transition: border-color 160ms ease, transform 160ms ease; }
.feature-card:hover { transform: translateY(-2px); border-color: #3c5b78; }
.feature-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid #35516a; border-radius: 10px; background: #0c1722; color: var(--mint); font-size: 1.05rem; font-weight: 900; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.feature-card .mini-link { display: inline-block; margin-top: 16px; color: #9dc7ff; font-size: .82rem; font-weight: 700; }

.workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: steps; }
.step { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); counter-increment: steps; }
.step::before { content: "0" counter(steps); display: block; margin-bottom: 22px; color: var(--mint); font-family: "Cascadia Code", monospace; font-size: .78rem; font-weight: 800; }
.step h3 { margin: 0 0 8px; }
.step p { margin: 0; color: var(--muted); font-size: .9rem; }

.product-tour { overflow: hidden; }
.tour-list { display: grid; gap: 72px; }
.tour-step { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 42px; align-items: center; }
.tour-step:nth-child(even) .tour-copy { order: 2; }
.tour-step:nth-child(even) .tour-media { order: 1; }
.tour-copy { max-width: 440px; }
.tour-number { display: inline-grid; min-width: 36px; min-height: 28px; place-items: center; margin-bottom: 13px; border: 1px solid #35516a; border-radius: 8px; background: #0c1722; color: var(--mint); font-family: "Cascadia Code", Consolas, monospace; font-size: .72rem; font-weight: 850; }
.tour-copy h3 { margin: 0 0 11px; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }
.tour-copy p { margin: 0; color: var(--muted); font-size: .96rem; }
.tour-copy .mini-link { display: inline-block; margin-top: 17px; color: #9dc7ff; font-size: .84rem; font-weight: 750; }
.tour-media { position: relative; margin: 0; padding: 7px; border: 1px solid #304c65; border-radius: 16px; background: linear-gradient(145deg, #172435, #0a1018); box-shadow: 0 20px 55px rgba(0,0,0,.28); }
.tour-media::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 0 42px rgba(109,168,255,.08); }
.tour-media img { display: block; width: 100%; height: auto; border: 1px solid #1f3042; border-radius: 10px; background: #080c12; }
.tour-media figcaption { padding: 8px 5px 2px; color: #70869d; font-size: .73rem; text-align: center; }

.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.terminal { padding: 16px; border: 1px solid #304862; border-radius: 15px; background: #080d14; box-shadow: var(--shadow); font-family: "Cascadia Code", Consolas, monospace; font-size: .83rem; }
.terminal-head { display: flex; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #1d2a3a; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3c4f63; }
.terminal pre { margin: 16px 0 0; white-space: pre-wrap; color: #aec2d8; }
.terminal .mint { color: var(--mint); }
.terminal .blue { color: var(--blue); }
.checklist { display: grid; gap: 11px; margin-top: 23px; }
.check { display: flex; gap: 11px; align-items: flex-start; color: #b3c3d4; }
.check::before { content: "✓"; flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(114,228,191,.1); color: var(--mint); font-size: .73rem; font-weight: 900; }

.price-card { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 30px; border: 1px solid #3e6780; border-radius: 18px; background: linear-gradient(135deg, #121e29, #101722); box-shadow: 0 18px 55px rgba(0,0,0,.24); }
.price { font-size: 2.7rem; font-weight: 850; letter-spacing: -.05em; }
.price small { color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.price-card ul { columns: 2; margin: 18px 0 0; padding: 0; list-style: none; color: #a9bbce; font-size: .88rem; }
.price-card li { margin-bottom: 7px; }
.price-card li::before { content: "✓"; margin-right: 7px; color: var(--mint); }
.buy-box { display: grid; gap: 9px; min-width: 185px; text-align: center; }
.buy-box small { color: #758aa1; font-size: .74rem; }

.cta { padding: 48px; border: 1px solid #385873; border-radius: 20px; background: radial-gradient(circle at 90% 10%, rgba(109,168,255,.15), transparent 40%), linear-gradient(130deg, #111d29, #0e151f); text-align: center; }
.cta h2 { margin: 5px 0 12px; }
.cta p { max-width: 660px; margin: 0 auto 22px; color: var(--muted); }

.site-footer { padding: 42px 0; border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.footer-brand { max-width: 330px; }
.footer-brand p { color: var(--muted); font-size: .85rem; }
.footer-col strong { display: block; margin-bottom: 11px; font-size: .82rem; }
.footer-col a { display: block; margin: 7px 0; color: var(--muted); font-size: .82rem; }
.copyright { margin-top: 34px; padding-top: 18px; border-top: 1px solid #192535; color: #657a91; font-size: .76rem; }

/* Documentation */
.docs-hero { padding: 55px 0 38px; border-bottom: 1px solid var(--line); }
.docs-hero p { max-width: 750px; margin: 0; color: var(--muted); font-size: 1.02rem; }
.search-wrap { position: relative; max-width: 700px; margin-top: 24px; }
.search-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #7790aa; }
.doc-search { width: 100%; min-height: 48px; padding: 10px 15px 10px 43px; border: 1px solid #36516d; border-radius: 12px; background: #0e1722; color: var(--text); }
.doc-search::placeholder { color: #71849b; }
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 760px) minmax(170px, 1fr); gap: 38px; align-items: start; padding: 44px 0 90px; }
.toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 10px; }
.toc-title { margin-bottom: 10px; color: #657d96; font-size: .69rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.toc a { display: block; margin: 2px 0; padding: 6px 9px; border-left: 2px solid transparent; border-radius: 0 7px 7px 0; color: #8da1b8; font-size: .8rem; }
.toc a:hover, .toc a.active { border-left-color: var(--mint); background: #111b28; color: var(--text); }
.doc-main { min-width: 0; }
.doc-section { scroll-margin-top: 90px; padding: 0 0 49px; margin-bottom: 49px; border-bottom: 1px solid var(--line); }
.doc-section:last-child { border-bottom: 0; }
.doc-section[hidden] { display: none; }
.doc-section h2 { margin: 0 0 12px; font-size: 1.72rem; line-height: 1.2; letter-spacing: -.025em; }
.doc-section h3 { margin: 28px 0 8px; font-size: 1.04rem; }
.doc-section p, .doc-section li { color: #a9b9ca; font-size: .92rem; }
.doc-section ul, .doc-section ol { padding-left: 21px; }
.doc-section li { margin: 7px 0; padding-left: 3px; }
.doc-section a { color: #91c2ff; text-decoration: underline; text-decoration-color: #3c618a; text-underline-offset: 3px; }
.doc-section a:hover { color: var(--mint); text-decoration-color: var(--mint); }
.doc-section a.btn { color: var(--text); text-decoration: none; }
.doc-section a.btn-primary { color: #07111a; }
.doc-section a.btn-primary:hover { color: #061018; }
.doc-lead { font-size: 1rem !important; color: #bdcad9 !important; }
.callout { margin: 18px 0; padding: 15px 17px; border: 1px solid #31506b; border-left: 3px solid var(--blue); border-radius: 10px; background: #101925; }
.callout strong { color: #dfeafa; }
.callout.tip { border-left-color: var(--mint); }
.callout.warn { border-color: #5c4932; border-left-color: var(--gold); background: #1b1711; }
.callout p { margin: 4px 0; }
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 17px 0; }
.mini-card { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #0e1621; }
.mini-card strong { display: block; margin-bottom: 4px; color: #dce8f6; font-size: .86rem; }
.mini-card span { color: var(--muted); font-size: .8rem; }
.steps { margin: 18px 0; padding: 0; list-style: none; counter-reset: docsteps; }
.steps li { position: relative; min-height: 34px; margin: 11px 0; padding-left: 44px; counter-increment: docsteps; }
.steps li::before { content: counter(docsteps); position: absolute; left: 0; top: -3px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #3b5974; border-radius: 9px; background: #111d2a; color: var(--mint); font-weight: 850; }
.path { display: block; max-width: 100%; margin: 9px 0; padding: 10px 12px; overflow-x: auto; border: 1px solid #293e55; border-radius: 8px; background: #090f17; color: #b6d7ff; font-size: .79rem; }
.shortcut-table { width: 100%; margin: 15px 0; border-collapse: collapse; font-size: .84rem; }
.shortcut-table th, .shortcut-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.shortcut-table th { background: #131d2a; color: #dce8f6; }
.shortcut-table td { color: #a9b9ca; }
.doc-aside { position: sticky; top: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,23,34,.78); }
.doc-aside strong { display: block; margin-bottom: 8px; font-size: .83rem; }
.doc-aside p, .doc-aside a { font-size: .77rem; }
.doc-aside p { color: var(--muted); }
.doc-aside a { display: block; margin: 8px 0; color: #92bde9; }
.no-results { display: none; padding: 32px; border: 1px dashed #36516d; border-radius: 14px; color: var(--muted); text-align: center; }
.no-results.visible { display: block; }
.back-top { position: fixed; right: 18px; bottom: 18px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #3b5872; border-radius: 10px; background: #111b28; color: var(--text); opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
.back-top.visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .app-frame { transform: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-list { gap: 54px; }
  .tour-step { gap: 28px; }
  .docs-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .doc-aside { display: none; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 26px, 1180px); }
  .nav-links, .nav-actions .btn:not(.menu-keep) { display: none; }
  .mobile-menu { display: inline-flex !important; }
  .nav.open { flex-wrap: wrap; padding-bottom: 12px; }
  .nav.open .nav-links { order: 5; width: 100%; display: grid; gap: 0; }
  .nav.open .nav-links a { display: block; padding: 8px 0; }
  .hero { padding-top: 60px; }
  .hero-grid { gap: 45px; }
  .hero-visual-caption { grid-template-columns: 1fr; }
  .hero-visual-caption strong { white-space: normal; }
  .kc-walkthrough-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .kc-walkthrough-head p { margin-left: 0; }
  .kc-walkthrough-steps { display: flex; overflow-x: auto; }
  .kc-walkthrough-steps button { flex: 0 0 auto; min-width: 104px; }
  .kc-walkthrough-cursor-tip { max-width: calc(100% - 16px); padding: 8px 10px; }
  .kc-demo-topbar { flex-wrap: wrap; }
  .kc-demo-brand { width: 100%; }
  .kc-demo-drag, .kc-demo-window { display: none; }
  .kc-demo-dock strong { display: none; }
  .kc-demo-manager-panel { grid-template-columns: 1fr; }
  .kc-demo-sidebar { display: none; }
  .kc-demo-manager { padding: 16px; }
  .kc-demo-heading { align-items: flex-start; flex-direction: column; }
  .kc-demo-actions { margin-left: 0; }
  .kc-demo-apps { grid-template-columns: 1fr; }
  .kc-demo-apps article { min-height: 0; }
  .kc-demo-tabsize, .kc-demo-result, .kc-demo-helpgrid, .kc-demo-livegrid { grid-template-columns: 1fr; }
  .kc-demo-tabrows > div { grid-template-columns: 42px 30px minmax(100px,1fr) 70px; }
  .kc-demo-tabrows code { display: none; }
  .kc-demo-help-panel { padding: 35px 18px; }
  .kc-demo-modal { padding: 8px; }
  .kc-demo-draftline { align-items: flex-start; flex-wrap: wrap; }
  .kc-demo-draftline select { width: 100%; margin-left: 0; }
  .kc-demo-progress { padding-inline: 12%; }
  .kc-demo-appwindow { inset: 6px; }
  .feature-grid, .workflow, .split, .footer-grid { grid-template-columns: 1fr; }
  .tour-step { grid-template-columns: 1fr; gap: 20px; }
  .tour-step:nth-child(even) .tour-copy, .tour-step:nth-child(even) .tour-media { order: initial; }
  .tour-copy { max-width: none; }
  .price-card { grid-template-columns: 1fr; }
  .price-card ul { columns: 1; }
  .cta { padding: 34px 20px; }
  .docs-layout { display: block; padding-top: 24px; }
  .toc { position: static; display: flex; gap: 5px; margin: 0 0 28px; padding: 0 0 10px; overflow-x: auto; }
  .toc-title { display: none; }
  .toc a { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; }
  .toc a.active { border-color: var(--mint); }
  .mini-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .brand .version { display: none; }
  .hero h1 { font-size: 2.55rem; }
  .hero-actions .btn { width: 100%; }
  .feature-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #080d14; }
::-webkit-scrollbar-thumb { border: 3px solid #080d14; border-radius: 99px; background: #31445a; }
::-webkit-scrollbar-thumb:hover { background: #46617d; }