:root{
  --c-ink-0:#000014; --c-ink-1:#08080C; --c-ink-2:#13131E; --c-ink-3:#2A2A36;
  --c-ink-6:#616D7D; --c-ink-8:#AAB2C3; --c-ink-9:#BFCBE2; --c-ink-10:#D9D9D9;
  --c-ink-11:#E1EDFF; --c-ink-12:#F2F4FB; --c-ink-13:#F8F8F8; --c-ink-14:#FFFFFF;

  --c-violet-100:#ECECFC; --c-violet-200:#ACACFC; --c-violet-300:#888DFE;
  --c-violet-400:#857FFF; --c-violet-500:#605FE3; --c-violet-700:#3D3DA5;

  --c-pink-100:#FEE5F1; --c-pink-200:#FFA2B5; --c-pink-300:#FF6088;
  --c-pink-400:#FF4797; --c-pink-500:#FF167B; --c-pink-600:#FF8075;

  --c-orange-100:#FFC4A5; --c-orange-300:#FF8A45; --c-orange-500:#FF4B00; --c-orange-700:#FE010D;

  --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-blue-200:#8AB1FF; --c-blue-500:#0063B3;

  --c-success:#00975F; --c-warning:#FF8A45; --c-danger:#FE4D56; --c-info:#0063B3;

  --accent: var(--c-orange-700);
  --accent-soft: var(--c-orange-100);
  --accent-ink: var(--c-orange-700);
  --on-accent: #ffffff;

  --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);

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

  --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;

  --r-2:2px;--r-8:8px;--r-16:16px;--r-24:24px;--r-32:32px;--r-pill:999px;

  --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);

}

/* =============================================================
   Темная тема · [data-theme="dark"]
   Селектор атрибутный (не html-scoped) — переключается ПОСЕКЦИОННО:
   каждая <section> сама решает, светлая она или темная.
============================================================= */
[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-8);
  --line:      rgba(255,255,255,.16);
  --line-soft: rgba(255,255,255,.08);
  --accent-soft: rgba(254,1,13,.18);
  --accent-ink:  var(--c-orange-100);
  --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);
}

/* Independent dark tree · inputs (нет light-эквивалента в токенах) */
[data-theme="dark"] .input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #ffffff;
}
[data-theme="dark"] .input:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
[data-theme="dark"] .input:focus{
  background: rgba(255,255,255,.10);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-theme="dark"] .input[disabled]{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
}
[data-theme="dark"] .input::placeholder{ color: rgba(255,255,255,.35); }
[data-theme="dark"] select.input option{ background: var(--c-ink-2); color:#fff; }

/* Independent dark tree · chips (ink-12 нечитаем на темном фоне) */
[data-theme="dark"] .chip{
  background: rgba(255,255,255,.08);
  color: #ffffff;
}
[data-theme="dark"] .chip--soft{
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Banner CTA decor — приглушаем на темной теме (по токенам системы) */
[data-theme="dark"] .banner-cta__deco{ opacity:.25; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background: #F9F9F9; color:var(--fg);
  font-family:var(--ff-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}


a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:var(--ff-sans); }

h1,h2,h3,h4,h5{ margin:0; font-weight:600; }
p{ margin:0; }

.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
@media (min-width:768px){ .container{ padding:0 40px; } }
@media (min-width:1280px){ .container{ padding:0 15px; } }

.section{ width:100%; padding:80px 0; background: #F9F9F9; color:var(--fg); }
@media (max-width:768px){ .section{ padding:56px 0; } }
.section:first-of-type{ padding-top:40px; }

h1.h1{ font-size:32px; line-height:1.3; font-weight:700; letter-spacing:-.02em; }
/* h2.h2{ font-size:clamp(26px,3.4vw,32px); line-height:1.3; font-weight:700; letter-spacing:-.02em; } */
h2.h2 {
	font: 500 36px/1.3 Inter;
	margin-bottom: 24px;
}
@media (max-width: 991px) {
	h2.h2 {
		font: 28px/1.3 Inter;
	}
}
h3.h3{ font-size:28px; line-height:1.3; font-weight:600; letter-spacing:-.01em; }
h4.h4{ font-size:24px; line-height:1.3; font-weight:600; }
h5.h5{ font-size:22px; line-height:1.3; font-weight:600; }

.subtitle{ font-size:20px; line-height:1.5; font-weight:500; color:var(--fg-mute); max-width:42em; margin-top:16px; }
.body-l{ font-size:18px; line-height:1.5; }
.body-m{ font-size:16px; line-height:1.5; color:var(--fg-mute); }
.body-s{ font-size:14px; line-height:1.5; color:var(--fg-mute); }
.caption{ font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); }
/*
p, ul, ol{ max-width:65ch; }
*/
ul.list{ list-style:none; padding-left:0; margin:0; display:flex; flex-direction:column; gap:10px; }
ul.list li{ padding-left:22px; position:relative; color:var(--fg-mute); font-size:15px; }
ul.list li::before{ content:"•"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ============================================================
   Components · Buttons
============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:var(--r-8);
  font-family:var(--ff-sans); font-weight:500; font-size:16px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* .btn--primary{ background:var(--accent); color:var(--on-accent); } */
/* .btn--primary:hover{ filter:brightness(.95); } */
		.btn--primary {
			font: 500 16px/1.75 Inter;
			color: #fff;
			padding: 10px 40px;
			border-radius: 16777200px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 27px;
			text-decoration: none;
			min-width: 260px;
			transition: .3s all;
			border: 1px solid #fff;
			background-color: #000014;
		}
			.btn--primary span {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.btn--primary svg {
				content: '';
				position: absolute;
				width: 14px;
				height: 14px;
				opacity: 0;
				transition: .3s all;
				margin-left: 26px;
				left: 100%;
			}
			.btn--primary:hover {
				padding-left: 22px;
				padding-right: 42px;
			}
			.btn--primary:hover svg {
				opacity: 1;
				margin-left: 8px;
			}
.btn--dark{ background:var(--c-ink-0); color:#fff; }
.btn--dark:hover{ filter:brightness(1.3); }
.btn--outline{ background:transparent; border-color:var(--accent); color:var(--accent-ink); }
.btn--outline:hover{ background:var(--accent-soft); }
		.btn--outline {
			font: 500 16px/1.75 Inter;
			color: #fff;
			padding: 10px 40px;
			border-radius: 16777200px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 27px;
			text-decoration: none;
			min-width: 260px;
			transition: .3s all;
			border: 2px solid #FFF;
		}
			.btn--outline span {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.btn--outline svg {
				content: '';
				position: absolute;
				width: 14px;
				height: 14px;
				opacity: 0;
				transition: .3s all;
				margin-left: 26px;
				left: 100%;
			}
			.btn--outline:hover {
				padding-left: 22px;
				padding-right: 42px;
			}
			.btn--outline:hover svg {
				opacity: 1;
				margin-left: 8px;
			}
.btn--ghost{ background:transparent; color:var(--fg); }
.btn--ghost:hover{ background:var(--line-soft); }

.btn--lg{ height:56px; padding:0 28px; font-size:18px; font-weight:700; }
.btn--block{ width:100%; }

.btn--mkt{ border-radius:var(--r-32); height:56px; padding:0 28px; font-size:17px; font-weight:700; letter-spacing:-.005em; }

.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn--lg svg{ width:20px; height:20px; }

/* Outline on dark surfaces (hero dark/accent) */
.comp-hero .btn--outline,
.banner-cta .btn--outline{
  border-color: rgba(255,255,255,.55); color:#fff; background:transparent;
}
.comp-hero .btn--outline:hover,
.banner-cta .btn--outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* ============================================================
   Components · Inputs
============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; }
.field__lbl{ font-size:13px; font-weight:500; color:var(--fg-mute); }
.field__hint{ font-size:12px; color:var(--fg-faint); }

.input, select.input, textarea.input{
  width:100%; height:44px; padding:0 14px;
  font-family:var(--ff-sans); font-weight:500; font-size:16px;
  color:var(--fg); background:var(--c-ink-12); border:1px solid transparent;
  border-radius:var(--r-8); outline:none; transition:border-color .15s, background .15s;
}
textarea.input{ height:auto; min-height:96px; padding:12px 14px; resize:vertical; font-weight:400; }
.input::placeholder{ color:var(--fg-faint); }
.input:hover{ border-color:var(--line); background:var(--bg); }
.input:focus{ border-color:var(--accent); background:var(--bg); box-shadow:0 0 0 3px var(--accent-soft); }

/* ============================================================
   Components · Chips
============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:var(--r-pill); font-family:var(--ff-sans); font-weight:500; font-size:14px;
  background:var(--c-ink-12); color:var(--fg); user-select:none;
}
.chip--soft{ background:var(--accent-soft); color:var(--accent-ink); }

/* ============================================================
   Components · Icons (24x24, stroke 1.5)
============================================================ */
.icon{ width:24px; height:24px; flex-shrink:0; }
.icon--sm{ width:16px; height:16px; }
.icon--mute{ color:var(--fg-mute); }
.icon--accent{ color:var(--accent-ink); }
.icon--on-dark{ color:rgba(255,255,255,.72); }
.icon--success{ color:var(--c-success); }

/* ============================================================
   Blocks · Cards
============================================================ */
.card{
  --card-radius:var(--r-16); --card-shadow:var(--sh-2);
  border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  background:var(--bg); overflow:hidden; display:flex; flex-direction:column;
}
.card__body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__icon{
  width:44px; height:44px; border-radius:var(--r-8); background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.card__title{ font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-.005em; }
.card__desc{ color:var(--fg-mute); font-size:14px; line-height:1.55; }
.card__tag{ font:600 11px var(--ff-mono); color:var(--accent-ink); letter-spacing:.08em; text-transform:uppercase; }

.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .card-grid{ grid-template-columns:repeat(2,1fr); } .card-grid--3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid, .card-grid--3{ grid-template-columns:1fr; } }

.card--featured{ --card-radius:var(--r-24); --card-shadow:var(--sh-3); border:2px solid var(--accent); }

/* Price cards */
.card__price{ font:700 30px var(--ff-sans); letter-spacing:-.02em; }
.card__price small{ font-size:13px; font-weight:500; color:var(--fg-mute); }

/* ============================================================
   Blocks · Hero
============================================================ */
.section-caila-hero {
	background: #131314 url(../../img/caila/caila-hero-bg.png) top center no-repeat;
	background-size: 1440px 100%;
	padding-top: 180px;
	padding-bottom: 128px;
	
}
	.caila-hero__logo {
		height: 100%;
		max-height: 32px;
		margin: 0 auto 24px;
	}
	.caila-hero__ttl {
		font: 500 48px/1.3 Inter;
		color: #fff;
		margin-bottom: 16px;
		text-align: center;
	}
	.caila-hero__txt {
		font: 400 18px/1.6 Inter;
		color: #fff;
		text-align: center;
		max-width: 585px;
		margin: 0 auto;
	}
	.caila-hero__btn-wrap {
		margin-top: 48px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}
		.caila-hero__btn-form {
			font: 500 18px/1.5 Inter;
			color: #000014;
			padding: 10px 40px;
			border-radius: 16777200px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 27px;
			text-decoration: none;
			min-width: 260px;
			transition: .3s all;
			border: 1px solid #fff;
			background-color: #fff;
		}
			.caila-hero__btn-form span {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.caila-hero__btn-form svg {
				content: '';
				position: absolute;
				width: 14px;
				height: 14px;
				opacity: 0;
				transition: .3s all;
				margin-left: 26px;
				left: 100%;
			}
			.caila-hero__btn-form:hover {
				padding-left: 22px;
				padding-right: 42px;
			}
			.caila-hero__btn-form:hover svg {
				opacity: 1;
				margin-left: 8px;
			}
		.caila-hero__btn-anchor {
			font: 500 18px / 1.5 Inter;
			color: #fff;
			padding: 10px 40px;
			border-radius: 16777200px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 27px;
			text-decoration: none;
			min-width: 260px;
			transition: .3s all;
			border: 1px solid #fff;
		}
			.caila-hero__btn-anchor span {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.caila-hero__btn-anchor svg {
				content: '';
				position: absolute;
				width: 14px;
				height: 14px;
				opacity: 0;
				transition: .3s all;
				margin-left: 26px;
				left: 100%;
			}
			.caila-hero__btn-anchor:hover {
				padding-left: 30px;
				padding-right: 50px;
			}
			.caila-hero__btn-anchor:hover svg {
				opacity: 1;
				margin-left: 8px;
			}
	@media(max-width:767px) {
		.caila-hero__btn-form,
		.caila-hero__btn-anchor {
			min-width: 340px;
		}
		.caila-hero__btn-form,
		.caila-hero__btn-anchor {
			width: 100%;
			max-width: 340px;
			min-width: auto;
		}
	}
	.caila-hero__stat-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 24px;
		justify-content: center;
		margin-top: 40px;
	}
		.caila-hero__stat {
			font: 400 14px/1.5 Inter;
			color: #fff;
			display: flex;
			align-items: center;
			gap: 6px;
		}
@media (max-width: 991px) {
	.section-caila-hero {
		padding-top: 136px;
		padding-bottom: 106px;
	}
	.caila-hero__ttl {
		font: 500 32px/1.3 Inter;
	}
}
.comp-hero{
  position:relative; border-radius:var(--r-32); background:var(--c-ink-0); color:#fff;
  padding:64px 56px; overflow:hidden; min-height:380px;
  display:flex; flex-direction:column; gap:28px; justify-content:center;
}
.comp-hero__deco{
  position:absolute; right:-160px; top:-140px; width:560px; height:560px;
  background:var(--c-orange-300); filter:blur(140px); opacity:.4; border-radius:50%; pointer-events:none;
}
.comp-hero__deco2{
  position:absolute; left:-180px; bottom:-200px; width:480px; height:480px;
  background:var(--c-violet-500); filter:blur(150px); opacity:.22; border-radius:50%; pointer-events:none;
}
.comp-hero__deco-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px; pointer-events:none;
  mask-image:linear-gradient(180deg,black 30%,transparent);
}
.comp-hero__kicker{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.1); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.04em; width:fit-content;
}
.comp-hero h1{ position:relative; font-size:44px; font-weight:700; line-height:1.2; letter-spacing:-.02em; max-width:680px; margin:0; }
.comp-hero p{ position:relative; font-size:18px; line-height:1.55; max-width:600px; opacity:.85; margin:0; }
.comp-hero__buttons{ position:relative; display:flex; gap:12px; flex-wrap:wrap; }
.comp-hero__trust{ position:relative; display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:6px; list-style:none; padding:0; }
.comp-hero__trust-item{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.78); font-weight:500; }
.comp-hero__trust-item .icon{ color:rgba(255,255,255,.6); flex-shrink:0; }

.model-strip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; }

/* ============================================================
   Blocks · Banner CTA
============================================================ */
.banner-cta{
  position:relative; overflow:hidden; border-radius:var(--r-32); background:var(--bg-soft);
  padding:56px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px;
}
.banner-cta__deco{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 88% 12%, var(--c-pink-100) 0, transparent 32%),
    radial-gradient(circle at 12% 88%, var(--c-orange-100) 0, transparent 28%);
  opacity:.8; pointer-events:none;
}
.banner-cta h2{ position:relative; font-size:36px; font-weight:700; max-width:800px; line-height:1.2; letter-spacing:-.02em; }
.banner-cta p{ position:relative; font-size:18px; color:var(--fg-mute); max-width:640px; }
.banner-cta .btn{ position:relative; }

/* ============================================================
   Blocks · Navigation (simplified bar)
============================================================ */
.nav-header{ background:var(--bg); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:50; }
.nav-header__bar{ display:flex; align-items:center; gap:40px; padding:16px 0; }
.nav-header__logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-header__logo img{ height:26px; width:auto; }
.nav-header__divider{ width:1px; height:22px; background:var(--line); }
.nav-header__product{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; }
.nav-header__product-tag{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--fg-mute); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 9px; text-transform:uppercase; }

.nav-header__nav{ display:flex; align-items:center; gap:32px; flex:1; list-style:none; margin:0; padding:0; }
.nav-header__link{ font:600 15px var(--ff-sans); color:var(--fg-mute); }
.nav-header__link:hover{ color:var(--fg); }
@media (max-width:960px){ .nav-header__nav{ display:none; } }

/* ============================================================
   Section-specific layout helpers
============================================================ */
.flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; margin-top:44px;}
.flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--fg-faint); padding:0 3px; }
.flow-card{ border-radius:var(--r-16); box-shadow:var(--sh-2); background:var(--bg); padding:26px; }
.flow-card--accent{ box-shadow:none; border:2px solid var(--accent); background:var(--accent-soft); }
.flow-card .card__tag{ margin-bottom:8px; display:block; }
@media (max-width:900px){ .flow{ grid-template-columns:1fr; gap:14px; } .flow-arrow{ transform:rotate(90deg); padding:2px 0; } }

.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-16); overflow:hidden; margin-top:16px; }
.stat-cell{ background:var(--bg); padding:24px 22px; }
.stat-cell .l{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); font-weight:600; margin-bottom:10px; }
.stat-cell .v{ font-size:15px; font-weight:700; }
@media (max-width:900px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }

.code-layout{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:40px; }
@media (max-width:960px){ .code-layout{ grid-template-columns:1fr; gap:32px; } }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }

.code-block {
	/* background: var(--c-ink-0); */
	/* border-radius: var(--r-16); */
	overflow: hidden;
	/* box-shadow: var(--sh-2); */
	/* border: 1px solid rgba(255, 255, 255, .08); */
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 20, 0.06), 0 0 0 1px rgba(0, 0, 20, 0.05);
}
.code-head{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.code-dot{ width:10px; height:10px; border-radius:50%; }
.code-dot.r{ background:#FF5F57; } .code-dot.y{ background:#FEBC2E; } .code-dot.g{ background:#28C840; }
.code-label{ margin-left:8px; font-size:12.5px; color:rgba(255,255,255,.5); font-family:var(--ff-mono); }
.code-block pre{ padding:22px; font-family:var(--ff-mono); font-size:13px; line-height:1.7; overflow-x:auto; color:#E4E4E7; margin:0; }
.code-block .cm{ color:rgba(255,255,255,.4); }
.code-block .kw{ color:var(--c-teal-300); }
.code-block .st{ color:var(--c-orange-100); }
.code-block .ac{ color:var(--c-orange-300); }

.analytics-layout{ display:grid; grid-template-columns:1.05fr 1fr; gap:24px; margin-top:44px; align-items:start; }
@media (max-width:960px){ .analytics-layout{ grid-template-columns:1fr; } }
.metric-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.metric-card{ border-radius:var(--r-16); box-shadow:var(--sh-2); background:var(--bg); padding:22px; }
.metric-card .l{ font-size:12.5px; color:var(--fg-mute); margin-bottom:10px; font-weight:600; }
.metric-card .v{ font-size:26px; font-weight:700; }
.metric-card .s{ font-size:12px; color:var(--accent-ink); margin-top:6px; font-weight:600; }
.feature-list{ display:flex; flex-direction:column; gap:16px; }
.feature-row{ display:flex; gap:14px; border-radius:var(--r-16); box-shadow:var(--sh-2); background:var(--bg); padding:20px; }
.feature-row .icon{ color:var(--c-success); flex-shrink:0; }
.feature-row h5{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
.feature-row p{ font-size:13.5px; color:var(--fg-mute); }

.security-info{
  margin-top:28px; background:var(--bg-mute); border-radius:var(--r-16); padding:22px 26px;
  font-size:14px; color:var(--fg-mute); display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.security-info a{ color:var(--accent-ink); font-weight:700; white-space:nowrap; }

.infra-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
@media (max-width:900px){ .infra-grid{ grid-template-columns:1fr; } }
.infra-card{ border-radius:var(--r-16); box-shadow:var(--sh-2); background:var(--bg); padding:26px 22px; }
.infra-card .big{ font-size:32px; font-weight:700; color:var(--accent-ink); margin-bottom:8px; }
.infra-card h5{ font-size:16px; font-weight:600; line-height:1.35; margin-bottom:6px; }
.infra-card p{ font-size:13px; color:var(--fg-mute); }
.infra-note{ margin-top:20px; font-size:12.5px; color:var(--fg-faint); max-width:none; }

.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:40px; align-items:stretch; }
@media (max-width:800px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ position:relative; border-radius:var(--r-24); background: rgba(255, 255, 255, 0.03); padding: 48px; display:flex; flex-direction:column; }
@media(max-width:991px) {
	.price-card {
		padding: 20px;
	}
}
.price-card--featured{
	background: linear-gradient(285deg, #F5F2F1 0%, #E9EEF3 98.05%);
}
.price-badge{ position:absolute; top:24px; right:24px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r-pill); }
.price-tier{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px; }
.price-title{ font-size:26px; font-weight:700; margin-bottom:12px; }
.price-desc{ font-size:14.5px; color:var(--fg-mute); margin-bottom:24px; }
.price-amount{ font-size:34px; font-weight:800; line-height:1.1; }
.price-amount small{ font-size:15px; font-weight:500; color:var(--fg-mute); margin-left:4px; }
.price-note{ font-size:13px; color:var(--fg-faint); margin:6px 0 24px; }
.price-divider{ height:1px; background:var(--line-soft); margin-bottom:24px; }
.price-feats{ list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:13px; flex:1; }
.price-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; }
.price-feats .icon{ color:var(--c-success); flex-shrink:0; margin-top:2px; }

.compare-wrap{ overflow-x:auto; margin-top:36px; border-radius:var(--r-16); box-shadow:var(--sh-2); }
table.compare{ width:100%; border-collapse:collapse; min-width:760px; background:var(--bg); }
table.compare th, table.compare td{ padding:16px 18px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--line-soft); }
table.compare th{ background:var(--bg-mute); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-mute); }
table.compare td:first-child, table.compare th:first-child{ text-align:left; color:var(--fg); font-weight:500; }
table.compare tr:last-child td{ border-bottom:none; }
table.compare th.us, table.compare td.us{ background:var(--accent-soft); color:var(--fg); font-weight:600; }
.yes{ color:var(--c-success); font-weight:700; }
.dim{ color:var(--fg-faint); }
.compare-note{ margin-top:14px; font-size:12.5px; color:var(--fg-faint); max-width:none; }

.why-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; margin-top:8px; }
@media (max-width:960px){ .why-layout{ grid-template-columns:1fr; gap:32px; } }
.why-num-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.why-num{ padding:24px; }
.why-num .n{ font-size:34px; font-weight:700; color:var(--accent-ink); margin-bottom:6px; }
.why-num .t{ font-size:13.5px; color:var(--fg-mute); font-weight:500; }

.section-faq {
	background: #F9F9F9;
	color: #000014;
	padding: 128px 0;
}
.section-faq h2 {
	text-align: center;
	margin-bottom: 48px;
}
.faq-item-wrap {
	max-width: 980px;
	margin: 0 auto;
}
.faq-item{ border-bottom: 1px solid rgba(0, 0, 20, 0.08); max-width:none; }

.faq-item h5{ font-size:17px; font-weight:600; margin-bottom:8px; }
.faq-item p{
	color: #616D7D;
	max-width: 820px;
	font: 400 17px / 1.64 Inter;
	padding-bottom: 28px;
}


.faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 28px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	font: 600 22px/1.35 Inter;
	color: var(--ink-true-dark);
	letter-spacing: -0.012em;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000014' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>") center/contain no-repeat;
	transition: transform 200ms ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.lead-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
@media (max-width:960px){ .lead-layout{ grid-template-columns:1fr; gap:36px; } }
.lead-points{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.lead-point{ display:flex; gap:12px; align-items:flex-start; }
.lead-point .icon{ color:var(--c-success); flex-shrink:0; margin-top:1px; }
.lead-point span{ font-size:14.5px; color:var(--fg-mute); }

.form-card{ background:var(--bg); border-radius:var(--r-24); box-shadow:var(--sh-3); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.field-wrap{ margin-bottom:16px; }
.form-consent{ font-size:12px; color:var(--fg-faint); margin:16px 0 20px; line-height:1.5; max-width:none; }
.form-consent a{ color:var(--fg-mute); text-decoration:underline; }

/* ============================================================
   Footer (ja-footer)
============================================================ */
.ja-footer{
  --ff-fg:#fff; --ff-fg-mute:rgba(255,255,255,.62); --ff-fg-faint:rgba(255,255,255,.42);
  --ff-line:rgba(255,255,255,.08); --ff-link:var(--c-orange-300);
  background:var(--c-ink-0); color:var(--ff-fg); border-radius:var(--r-24);
  margin:0 24px 24px; padding:48px 48px 32px; font-family:var(--ff-sans); font-size:14px; line-height:1.55;
}
@media (min-width:1280px){ .ja-footer{ margin:0 40px 40px; } }
.ja-footer a{ color:inherit; text-decoration:none; }
.ja-footer a:hover{ color:var(--c-orange-300); }
.ja-footer__top{ display:flex; align-items:center; gap:12px; padding-bottom:32px; border-bottom:1px solid var(--ff-line); }
.ja-footer__top img{ height:28px; width:auto; }
.ja-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:32px 0; border-bottom:1px solid var(--ff-line); }
@media (max-width:768px){ .ja-footer__cols{ grid-template-columns:repeat(2,1fr); } }
.ja-footer__col-head{ margin:0 0 14px; font:600 13px var(--ff-sans); color:var(--ff-fg); }
.ja-footer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ja-footer__list a{ color:var(--ff-fg-mute); font-size:14px; transition:color .12s; }
.ja-footer__list a:hover{ color:#fff; }
.ja-footer__legal{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--ff-fg-faint); }
.ja-footer__legal a{ color:var(--c-orange-300); text-decoration:none; }
.ja-footer__legal a:hover{ color:#fff; }
.ja-footer__support a{ color:var(--c-orange-300); }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.bg-soft{ background:var(--bg-soft); }
.bg-mute{ background:var(--bg-mute); }

.section-control {
	padding: 128px 0;
}
	.section-control .card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
		.section-control h2 {
			text-align: center;
			margin-bottom: 16px;
		}
		.section-control .subtitle {
			font: 400 18px/1.6 Inter;
			color: #5B5B73;
			text-align: center;
			max-width: 970px;
			margin: 0 auto 48px;
		}
		.section-control h3 {
			font: 500 24px/1.3 Inter;
			letter-spacing: -0.29px;
			margin-bottom: 8px;
		}
		.section-control .card__desc {
			font: 400 16px/1.5 Inter;
			color: #000014;
			opacity: 0.8;
		}
		.section-control .card {
			border-radius: 16px;
			background: var(--back-100, linear-gradient(285deg, #F5F2F1 0%, #E9EEF3 98.05%));
			box-shadow: none;
		}
		.section-control .card__body {
			padding: 24px;
			gap: 0;
	}
	@media(max-width:767px) {
		.section-control .card-grid {
			grid-template-columns: 1fr;
			gap: 30px;
		}
	}
.section-solution {
	padding: 0 0 128px;
}
	.section-solution h2 {
		text-align: center;
		margin-bottom: 16px;
	}
	.section-solution .flow-card {
		border-radius: 16px;
		background: #FFF;
		padding: 24px;
		box-shadow: none;
	}
	@media(min-width:901px) {
		.section-solution .flow-card:not(.flow-card--accent) {
			margin-top: 12px;
			margin-bottom: 12px;
		}
	}
	.section-solution .flow-card--accent {
		border-radius: 16px;
		border: 2px solid #E8394A;
		background: #FDEDEF;
	}
	.section-solution h4 {
		font: 600 20px/1.3 Inter;
		margin-bottom: 8px;
	}
	.section-solution .subtitle {
		font: 400 18px/1.6 Inter;
		color: #5B5B73;
		text-align: center;
		max-width: 970px;
		margin: 0 auto 48px;
	}
	.section-solution .body-s {
		font: 400 16px/1.5 Inter;
		color: #000014;
		opacity: 0.8;
	}
	.section-solution .flow-card .card__tag {
		font: 500 11px/1 Inter;
		color: #E8394A;
		letter-spacing: 1.1px;
		text-transform: uppercase;
		margin-bottom: 8px;
		display: flex;
	}
	.section-solution .flow-card .card__tag span {
		border-radius: 4.5px;
		background: rgba(232, 57, 74, 0.15);
		padding: 6px 10px;
	}
	.section-solution .flow-card--accent .card__tag {
		color: #FFF;
	}
	.section-solution .flow-card--accent .card__tag span {
		background: #E8394A;
	}
	.section-solution .flow-card--accent h4 {
		color: #E8394A;
	}
	.caila-new-note {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 48px;
		background: #F3F3F3 url(../../img/caila-new-note-bg.png) right center/100% 100% no-repeat;
		border-radius: 16px;
		padding: 24px;
		margin-top: 48px;
	}
		.caila-new-note__inner {
			display: flex;
			gap: 24px;
		}
			.caila-new-note__icon {
				width: 100%;
				max-width: 56px;
			}
			.caila-new-note__text-wrap {
				max-width: 700px;
			}
				.section-solution h4.caila-new-note__ttl {
					font: 500 24px/1.25 Inter;
					color: #08080C;
					letter-spacing: -0.29px;
					margin-bottom: 8px;
				}
				.caila-new-note__txt {
					opacity: 0.8;
				}
		.caila-new-note__btn {
			font: 500 16px/1.6 Inter;
			color: #fff;
			padding: 14px 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 66px;
			background: #08080C;
			text-decoration: none;
			transition: .3s all;
		}
			.caila-new-note__btn span {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;
			}
			.caila-new-note__btn svg {
				content: '';
				position: absolute;
				width: 14px;
				height: 14px;
				opacity: 0;
				transition: .3s all;
				margin-left: 26px;
				left: 100%;
			}
			.caila-new-note__btn:hover {
				padding-left: 22px;
				padding-right: 42px;
			}
			.caila-new-note__btn:hover svg {
				opacity: 1;
				margin-left: 8px;
			}
	@media(max-width:767px) {
		.caila-new-note {
			flex-wrap: wrap;
			background-image: url(../../img/caila-new-note-bg-mob.png);
		}
		.caila-new-note__inner {
			flex-wrap: wrap;
		}
	}
.section-models {
	background: #131314;
	padding: 128px 0;
}
	.section-models h2 {
		text-align: center;
		margin: 0 auto 48px;
		max-width: 880px;
	}
	.section-models .subtitle {
		font: 400 20px/1.5 Inter;
		color: rgba(255, 255, 255, 0.60);
	}
	.section-models .chip-row {
		margin: 20px 0 48px;
	}
	.section-models .chip {
		font: 500 14px / 1.5 Inter;
		border-radius: 16px;
		background: #1F1F20;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
		padding: 5px 12px;
		height: auto;
	}
	.section-models .body-s {
		font: 400 20px / 1.5 Inter;
		color: var(--text-60, rgba(255, 255, 255, 0.60));
	}
.section-access {
	background: #131314;
	padding: 0 0 128px;
}
	.section-access h2 {
		text-align: center;
		margin: 0 auto 16px;
	}
	.section-access .subtitle {
		max-width: 880px;
		margin: 0 auto 48px;
		font: 400 18px/1.6 Inter;
		color: rgba(255, 255, 255, 0.60);
		text-align: center;
	}
	.section-access .card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
		.section-access .card {
			border-radius: 24px;
			background: rgba(255, 255, 255, 0.03);
			box-shadow: none;
		}
		.section-access .card__body {
			padding: 24px;
			gap: 8px;
		}
		.section-access .card__title {
			font: 500 24px / 1.25 Inter;
			letter-spacing: -0.288px;
		}
		.section-access .card__desc {
			font: 400 16px / 1.5 Inter;
			color: rgba(255, 255, 255, 0.60);
		}
	@media(max-width:767px) {
		.section-access .card-grid {
			grid-template-columns: 1fr;
			gap: 30px;
		}
	}
.section-security {
	padding: 128px 0;
}
	.section-security h2 {
		text-align: center;
		margin-bottom: 8px;
	}
	.section-security .subtitle {
		max-width: 970px;
		margin: 0 auto 48px;
		font: 400 20px/1.5 Inter;
		color: #5B5B73;
		text-align: center;
	}
@media(min-width:767px) {
	.section-security .card-grid {
		row-gap: 30px;
		column-gap: 30px;
		align-self: stretch;
		grid-template-rows: repeat(2, fit-content(100%));
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.section-security .card:nth-child(1) {
		grid-row: 1 / span 1;
		grid-column: 1 / span 3;
	}
	.section-security .card:nth-child(2) {
		grid-row: 1 / span 1;
		grid-column: 4 / span 3;
	}
	.section-security .card:nth-child(3) {
		grid-row: 2 / span 1;
		grid-column: 1 / span 2;
	}
	.section-security .card:nth-child(4) {
		grid-row: 2 / span 1;
		grid-column: 3 / span 2;
	}
	.section-security .card:nth-child(5) {
		grid-row: 2 / span 1;
		grid-column: 5 / span 2;
	}
}
	.section-security .card {
		box-shadow: none;
	}
	.section-security .card--accent {
		background: rgba(138, 177, 255, 0.10);
	}
	.section-security .card__desc {
		margin-bottom: 20px;
	}
	.section-security .card--accent a {
		font: 400 12px/1.33 Inter;
		color: #576279;
	}
	.section-security .card__body {
		padding: 24px;
		gap: 0;
	}
	.section-security .card__icon {
		width: 56px;
		height: 56px;
		border-radius: 0;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}
	.section-security .card--accent .card__icon {
		width: 148px;
		height: 36px;
	}
	.section-security .card__title {
		font: 500 24px/1.25 Inter;
		letter-spacing: -0.288px;
		margin-bottom: 8px;
	}
	.section-security .card__desc {
		font: 400 16px/1.5 Inter;
		color: #000014;
	}
.section-infra {
	background: #131314;
	padding: 128px 0;
}
	.section-infra h2 {
		text-align: center;
		max-width: 880px;
		margin: 0 auto 16px;
	}
	.section-infra .subtitle {
		max-width: 890px;
		margin: 0 auto 48px;
		font: 400 18px/1.6 Inter;
		color: rgba(255, 255, 255, 0.60);
		text-align: center;
	}
	.section-infra .infra-grid {
		gap: 30px;
	}
	.section-infra .infra-card {
		padding: 24px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.03);
		box-shadow: none;
	}
	.section-infra .infra-card h5 {
		font: 500 24px/1.25 Inter;
		letter-spacing: -0.288px;
		margin-bottom: 8px;
	}
	.section-infra .infra-card p {
		font: 400 16px/1.5 Inter;
		color: var(--text-60, rgba(255, 255, 255, 0.60));
		opacity: 0.8;
	}
	.section-infra .infra-note {
		font: 400 12.5px/1.5 Inter;
		color: var(--text-60, rgba(255, 255, 255, 0.60));
		text-align: center;
		margin-top: 20px;
	}
.section-pricing {
	background: #131314;
	padding: 0 0 128px;
}
	.section-pricing h2 {
		text-align: center;
		margin-bottom: 16px;
	}
	.section-pricing .subtitle {
		max-width: 880px;
		margin: 0 auto 48px;
		font: 400 18px/1.6 Inter;
		color: rgba(255, 255, 255, 0.60);
		text-align: center;
	}
	.section-pricing .price-tier {
		font: 500 11px/1 Inter;
		color: #E8394A;
		letter-spacing: 1.1px;
		text-transform: uppercase;
		display: flex;
	}
		.section-pricing .price-tier span {
			border-radius: 4.5px;
			background: rgba(232, 57, 74, 0.15);
			padding: 6px 10px;
		}
	.section-pricing .price-card .price-title,
	.section-pricing .price-card--featured .price-title {
		font: 500 32px/1.2 Inter;
		letter-spacing: -0.576px;
		margin-bottom: 16px;
	}
	.section-pricing .price-card--featured .price-title {
		color: #000014;
	}
	.section-pricing .price-card .price-desc,
	.section-pricing .price-card--featured .price-desc {
		font: 400 17px/1.55 Inter;
		margin-bottom:32px;
	}
	.section-pricing .price-card .price-desc {
		color: rgba(255, 255, 255, 0.70);
	}
	.section-pricing .price-card--featured .price-desc {
		color: #6B7280;
	}
	.section-pricing .price-card .price-feats li {
		font: 400 15px/1.5 Inter;
		color: #fff;
	}
	.section-pricing .price-card--featured .price-feats li {
		font: 400 15px/1.5 Inter;
		color: #000014;
	}
	.section-pricing .price-card .icon--sm {
		width: 18px;
		height: 18px;
	}
	.section-pricing .price-feats li {
		gap: 12px;
	}
	.section-pricing .price-card--featured .btn--mkt {
		font: 500 16px/1.75 Inter;
		color: #fff;
		letter-spacing: -0.439px;
		border-radius: 16777200px;
		background: var(--main-black, #000014);
	}
	.section-pricing .price-card:not(.price-card--featured) .btn--mkt {
		font: 500 16px/1.75 Inter;
		color: #fff;
		letter-spacing: -0.439px;
		border-radius: 16777200px;
		border: 2px solid #FFF;
		background: transparent;
	}
@media (max-width: 991px) {
	.section-pricing .price-card .price-title,
	.section-pricing .price-card--featured .price-title {
		font: 500 24px / 1.2 Inter;
	}
	.section-caila-hero {
		padding-bottom: 96px;
	}
	.section-control,
	.section-models,
	.section-security,
	.section-infra,
	.section-faq {
		padding: 96px 0;
	}
	.section-solution,
	.section-access,
	.section-pricing {
		padding: 0 0 96px;
	}
}