.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
	  border:1px solid color-mix(in srgb,currentColor 50%,transparent);
	  border-radius:2px;box-sizing:border-box;overflow:hidden}
	@keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
	html.sc-dc-streaming .sc-placeholder,
	html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
	  background:color-mix(in srgb,currentColor 5%,transparent);
	  border-color:transparent}
	html.sc-dc-streaming .sc-placeholder::before,
	html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
	  position:absolute;inset:0;pointer-events:none;
	  background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
	  background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
	html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
	html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
	  background:color-mix(in srgb,currentColor 8%,transparent)}
	.sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
	  color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
	.sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
	  vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
	  border-radius:2px;box-sizing:border-box;color:transparent;
	  user-select:none}
	.sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
	  color:color-mix(in srgb,currentColor 50%,transparent);
	  background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
	  padding:0 3px}
	.sc-host.sc-has-error{position:relative}
	.sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
	  padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
	  border-radius:4px;white-space:pre-wrap;pointer-events:none}
	/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
	   in sync until dc-runtime regains a build step. */
	@media print {
	  @page { margin: 0.5cm; }
	  figure, table { break-inside: avoid; }
	  #dc-root, #dc-root > .sc-host { height: auto; }
	  *, *::before, *::after {
		print-color-adjust: exact; -webkit-print-color-adjust: exact;
		backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
		animation-delay: -99s !important; animation-duration: .001s !important;
		animation-iteration-count: 1 !important; animation-fill-mode: both !important;
		animation-play-state: running !important; transition-duration: 0s !important;
	  }
	}

x-dc{display:none!important}


/* ─────────────────────────────────────────────────────────────────────
 * Just AI · Design System v1
 * Design tokens — single source of truth
 *
 *   Import this file BEFORE any component CSS.
 *   Every value here is referenced by name (--c-…, --s-…, --r-…, --sh-…);
 *   never use raw hex / px in component code — always go through tokens.
 *
 *   Mirrored as JSON in ./tokens.json for tooling (Figma Variables, JS bundlers).
 *   Keep the two in sync: any change to this file must be reflected in tokens.json.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── neutrals ─────────────────────────────────────────────────────── */
  --c-ink-0:    #000014;     /* primary text · dark surface · 261× usage */
  --c-ink-1:    #08080C;     /* surface near-black · 88× */
  --c-ink-2:    #13131E;     /* elevated dark · 26× */
  --c-ink-3:    #2A2A36;     /* heading on light · 143× */
  --c-ink-6:    #616D7D;     /* secondary text · 134× */
  --c-ink-7:    #8A92A3;     /* body-mute on dark */
  --c-ink-8:    #AAB2C3;     /* disabled text */
  --c-ink-9:    #BFCBE2;     /* divider · 26× */
  --c-ink-10:   #D9D9D9;     /* hairline borders */
  --c-ink-11:   #E1EDFF;     /* disabled fill */
  --c-ink-12:   #F2F4FB;     /* field bg · chip default */
  --c-ink-13:   #F8F8F8;     /* page bg · banner · 143× */
  --c-ink-14:   #FFFFFF;     /* surface · most used · 588× */

  /* ── brand · violet · JAICP ───────────────────────────────────────── */
  --c-violet-100: #ECECFC;
  --c-violet-200: #ACACFC;
  --c-violet-300: #888DFE;
  --c-violet-400: #857FFF;
  --c-violet-500: #605FE3;   /* primary · 58× */
  --c-violet-700: #3D3DA5;

  /* ── brand · pink · heat / Jay coral ──────────────────────────────── */
  --c-pink-100:   #FEE5F1;
  --c-pink-200:   #FFA2B5;
  --c-pink-300:   #FF6088;
  --c-pink-400:   #FF4797;   /* JAAP gradient stop 1 */
  --c-pink-500:   #FF167B;
  --c-pink-600:   #FF8075;   /* JAAP gradient stop 0 (coral) */

  /* ── brand · orange · Caila ───────────────────────────────────────── */
  --c-orange-100: #FFC4A5;
  --c-orange-300: #FF8A45;   /* primary */
  --c-orange-500: #FF4B00;
  --c-orange-700: #FE010D;

  /* ── brand · teal · JAAP family ───────────────────────────────────── */
  --c-teal-100:   #D4EFF4;
  --c-teal-200:   #96D1D6;
  --c-teal-300:   #23BBEE;
  --c-teal-400:   #08A5A7;
  --c-teal-500:   #107CBE;
  --c-teal-700:   #065C6B;
  --c-teal-800:   #5B2464;

  /* ── brand · blue · informational ─────────────────────────────────── */
  --c-blue-200:   #8AB1FF;
  --c-blue-500:   #0063B3;

  /* ── brand · Jay family (Copilot/Guard/Hub) ───────────────────────── */
  --c-jay-300:        #AD8BE3;
  --c-jay-400:        #595BE5;
  --c-jay-500:        #6457F5;   /* central sphere · primary */
  --c-jay-600:        #633CD2;
  --c-jay-700:        #4E4FB6;
  --c-jay-coral-400:  #FC7269;
  --c-jay-coral-500:  #FD7775;
  --c-jay-coral-700:  #EA4558;

  /* ── status (semantic) ────────────────────────────────────────────── */
  --c-success:  #00975F;     /* check-state · successful payment */
  --c-warning:  #FF8A45;     /* warnings · audit blocks */
  --c-danger:   #FE4D56;     /* errors · destructive · suite-baseline */
  --c-info:     #0063B3;     /* informational banners */

  /* ── accent (tweakable; rebound by [data-accent="…"]) ─────────────── */
  --accent:       var(--c-violet-500);
  --accent-soft:  var(--c-violet-100);
  --accent-ink:   var(--c-violet-700);
  --on-accent:    #ffffff;

  /* ── surface roles (themed by [data-theme="…"]) ───────────────────── */
  --bg:         var(--c-ink-14);
  --bg-soft:    var(--c-ink-13);
  --bg-mute:    var(--c-ink-12);
  --fg:         var(--c-ink-0);
  --fg-mute:    var(--c-ink-6);
  --fg-faint:   var(--c-ink-8);
  --line:       var(--c-ink-9);
  --line-soft:  rgba(0, 0, 20, .08);

  /* ── type ─────────────────────────────────────────────────────────── */
  --ff-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale (size / line-height / weight)
	 One rule per size — никаких пересечений ролей. */
  --fs-display:  64px; --lh-display: 1.05; --fw-display: 700;   /* hero-only */
  --fs-hero:     44px; --lh-hero:    1.30; --fw-hero:    700;   /* hero-only */
  --fs-h1:       32px; --lh-h1:      1.20; --fw-h1:      700;
  --fs-h3:       28px; --lh-h3:      1.30; --fw-h3:      600;
  --fs-h4:       24px; --lh-h4:      1.30; --fw-h4:      600;
  --fs-h5:       22px; --lh-h5:      1.30; --fw-h5:      600;
  --fs-h6:       18px; --lh-h6:      1.40; --fw-h6:      600;
  --fs-body-lg:  18px; --lh-body-lg: 1.50; --fw-body-lg: 400;
  --fs-body:     16px; --lh-body:    1.50; --fw-body:    400;
  --fs-sm:       14px; --lh-sm:      1.50; --fw-sm:      400;
  --fs-mono:     12px; --lh-mono:    1.40; --fw-mono:    500;

  /* ── spacing · base 4px (от .fig) ─────────────────────────────────── */
  --s-0:   0;
  --s-4:   4px;
  --s-8:   8px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-72:  72px;
  --s-80:  80px;
  --s-96:  96px;
  --s-128: 128px;
  --s-144: 144px;
  --s-168: 168px;

  /* ── radius ───────────────────────────────────────────────────────── */
  --r-2:    2px;
  --r-8:    8px;     /* controls · buttons · inputs */
  --r-16:   16px;    /* cards · product */
  --r-24:   24px;    /* cards · featured · modals */
  --r-32:   32px;    /* hero · banner · marketing pill (.btn--mkt) */
  --r-pill: 999px;

  /* ── shadow (light theme baseline) ────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(0, 0, 20, .04), 0 0 0 1px rgba(0, 0, 20, .04);
  --sh-2: 0 4px 16px rgba(0, 0, 20, .06), 0 0 0 1px rgba(0, 0, 20, .05);
  --sh-3: 0 24px 48px rgba(0, 0, 20, .10), 0 0 0 1px rgba(0, 0, 20, .06);
}

/* ── dark theme overrides ──────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:         var(--c-ink-0);
  --bg-soft:    var(--c-ink-2);
  --bg-mute:    var(--c-ink-3);
  --fg:         #ffffff;
  --fg-mute:    var(--c-ink-9);
  --fg-faint:   var(--c-ink-7);
  --line:       rgba(255, 255, 255, .16);
  --line-soft:  rgba(255, 255, 255, .08);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4),  0 0 0 1px rgba(255, 255, 255, .06);
  --sh-2: 0 6px 16px rgba(0, 0, 0, .5),  0 0 0 1px rgba(255, 255, 255, .06);
  --sh-3: 0 24px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07);
}

/* ── accent palettes (used by tweaks; product accent is always violet) */
html[data-accent="violet"] { --accent: var(--c-violet-500); --accent-soft: var(--c-violet-100); --accent-ink: var(--c-violet-700); }
html[data-accent="pink"]   { --accent: var(--c-pink-400);   --accent-soft: var(--c-pink-100);   --accent-ink: var(--c-pink-500);   }
html[data-accent="orange"] { --accent: var(--c-orange-300); --accent-soft: var(--c-orange-100); --accent-ink: var(--c-orange-700); }
html[data-accent="teal"]   { --accent: var(--c-teal-400);   --accent-soft: var(--c-teal-100);   --accent-ink: var(--c-teal-700);   }

html[data-theme="dark"][data-accent="violet"] { --accent-soft: rgba(96, 95, 227, .18);  --accent-ink: var(--c-violet-200); }
html[data-theme="dark"][data-accent="pink"]   { --accent-soft: rgba(255, 71, 151, .18); --accent-ink: var(--c-pink-200);   }
html[data-theme="dark"][data-accent="orange"] { --accent-soft: rgba(255, 138, 69, .18); --accent-ink: var(--c-orange-100); }
html[data-theme="dark"][data-accent="teal"]   { --accent-soft: rgba(8, 165, 167, .18);  --accent-ink: var(--c-teal-200);   }


html,body{
	margin:0;
}
body{
	background: #F9F9F9;
}
a{color:#8AB1FF;}
a:hover{color:#B7CCFF;}
details summary::-webkit-details-marker{display:none;}


.jkh-hero-section {
	padding: 178px 0 96px;
	background: url(../img/jkh-hero-bg.png) top center/cover no-repeat;
}
	.jkh-hero__jkh-logo {
		margin-bottom: 24px;
		width: 100%;
		max-width: 274px;
	}
	.jkh-hero__jkh-ttl {
		font: 500 48px/1.3 Inter;
		color: #fff;
		text-align: center;
		max-width: 1170px;
		margin: 0 auto 16px;
	}
	@media (max-width: 991px) {
		.jkh-hero-section {
			padding: 128px 0 96px;
		}
		h2,
		.jkh-hero__jkh-ttl {
			font: 500 32px/1.3 Inter!important;
		}
	}
.section-2-col {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
	.section-2-col__top {
		display: grid;
	grid-template-columns: repeat(auto-fit, minmax(370px, auto));
	grid-gap: 30px;
	}
	.section-2-col__bottom {
		display: grid;
	grid-template-columns: repeat(auto-fit, minmax(370px, auto));
	grid-gap: 30px;
	}
.section-3-item > div {
	position: relative;
}
.section-step-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0px auto;
}
	.section-3-item__num {
		position: absolute;
		top: -32px;
		border-radius: 6px;
		background: #E5E5E7;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}
	.section-3-item__num::after {
		content: '';
		position: absolute;
		background: #E5E5E7;
		width: 300px;
		height: 2px;
		right: -300px;
	}
	.section-3-item:last-child > div .section-3-item__num::after {
		display: none;
	}
@media(max-width:991px) {
	.section-step-col {
		grid-template-columns: auto;
		gap: 60px;
	}
	.section-3-item {
		padding-left: 40px;
	}
	.section-3-item__num {
		left: -40px;
		top: 16px;
	}
	.section-3-item__num::after {
		height: 300px;
		width: 2px;
		left: 50%;
		right: auto;
		top: 0;
		z-index: -1;
		opacity: 0;
	}
	.section-3-item {
		position: relative;
	}
	.section-3-item::after {
		content: '';
		position: absolute;
		background: #E5E5E7;
		height: calc(100% + 60px);
		width: 2px;
		left: 14px;
		top: 32px;
	}
	.section-3-item:last-child::after {
		display: none;
	}
}

.jkh-section-5__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(570px, auto));
	gap: 30px;
}
	.jkh-section-5__tags-wrap {
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.jkh-section-5-img {
		display: block;
		width: 100%;
		max-width: 570px;
		margin: 0 auto;
	}
	@media(max-width:767px) {
		.section-8-item {
			padding: 24px!important;
		}
	}
	@media(max-width:575px) {
		.jkh-section-5__inner {
			display: grid;
			grid-template-columns: auto;
			gap: 30px;
		}
		.repeat-auto,.section-2-col__top,.section-2-col__bottom {
			grid-template-columns: auto!important;
		}
	}
.section-9-cta::after {
	content: '';
	position: absolute;
	width: 500px;
	height: 400px;
	border-radius: 16777200px;
	opacity: 0.1;
	background: #FF4797;
	filter: blur(150px);
	bottom: 18px;
	left: calc(50% - 250px);
}