/* ════════════════════════════════════════════════════════════════════
   UnityBase landing — v3.0
   Brand palette only: #0F243D (dark), #1F3A5F (primary), #2F80ED (accent)
   ════════════════════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────────────────── */
.ub-hero{
	position:relative;
	background:#0F243D;
	background-image:
		radial-gradient(ellipse 80% 60% at 80% 20%, rgba(47,128,237,.18) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 10% 80%, rgba(47,128,237,.08) 0%, transparent 60%),
		linear-gradient(135deg,#0a1a2e 0%,#0F243D 50%,#1F3A5F 100%);
	color:#fff;
	overflow:hidden;
	padding:0;
}
.ub-hero::before{
	content:'';
	position:absolute;inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
	background-size:80px 80px;
	mask-image:radial-gradient(ellipse 70% 100% at 30% 50%, #000 30%, transparent 80%);
	-webkit-mask-image:radial-gradient(ellipse 70% 100% at 30% 50%, #000 30%, transparent 80%);
	pointer-events:none;
}
.ub-hero-wrap{
	position:relative;z-index:1;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,440px);
	gap:64px;
	align-items:center;
	padding:104px 0 88px;
	min-height:560px;
}
.ub-hero-content{max-width:620px}
.ub-eyebrow{
	display:inline-flex;align-items:center;gap:10px;
	background:rgba(47,128,237,.1);
	border:1px solid rgba(47,128,237,.25);
	padding:7px 14px;border-radius:100px;
	font-size:12px;font-weight:600;letter-spacing:.4px;
	color:#9CC4F5;text-transform:uppercase;
	margin-bottom:28px;
}
.ub-eyebrow-dot{
	width:6px;height:6px;border-radius:50%;
	background:#56A3FF;
	box-shadow:0 0 12px #56A3FF;
	animation:ubPulse 2s ease-in-out infinite;
}
@keyframes ubPulse{0%,100%{opacity:1}50%{opacity:.4}}
.ub-hero h1{
	font-size:clamp(34px,4.6vw,52px);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-0.8px;
	margin:0 0 24px;
}
.ub-hero h1 .accent{
	background:linear-gradient(120deg,#56A3FF 0%,#2F80ED 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
}
.ub-hero-sub{
	font-size:17.5px;line-height:1.65;
	color:rgba(255,255,255,.72);
	max-width:580px;
	margin:0 0 36px;
}
.ub-hero-sub strong{color:#fff;font-weight:600}
.ub-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ub-btn-primary{
	display:inline-flex;align-items:center;gap:9px;
	font-size:15px;font-weight:600;
	padding:14px 28px;
	background:#2F80ED;color:#fff;
	border-radius:10px;
	transition:all .2s;
	box-shadow:0 4px 16px rgba(47,128,237,.4),0 0 0 1px rgba(255,255,255,.05) inset;
}
.ub-btn-primary:hover{background:#56A3FF;transform:translateY(-2px);box-shadow:0 8px 24px rgba(47,128,237,.5),0 0 0 1px rgba(255,255,255,.1) inset}
.ub-btn-ghost{
	display:inline-flex;align-items:center;gap:9px;
	font-size:15px;font-weight:500;
	padding:14px 24px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.14);
	color:rgba(255,255,255,.9);
	border-radius:10px;
	transition:all .2s;
}
.ub-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}

/* Hero proof badge — small line under buttons */
.ub-hero-trust{
	margin-top:32px;
	padding-top:24px;
	border-top:1px solid rgba(255,255,255,.08);
	display:flex;gap:12px;align-items:center;
	font-size:12.5px;color:rgba(255,255,255,.55);
}
.ub-hero-trust svg{width:14px;height:14px;flex-shrink:0;stroke:#56A3FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── HERO STAT (replaces SVG illustration) ─────────────────────────── */
.ub-hero-stat{
	position:relative;
	background:rgba(255,255,255,.03);
	border:1px solid rgba(47,128,237,.2);
	border-radius:20px;
	padding:36px;
	backdrop-filter:blur(10px);
	box-shadow:0 24px 48px -16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.ub-hero-stat::before{
	content:'';
	position:absolute;inset:-1px;
	border-radius:20px;
	background:linear-gradient(135deg, rgba(47,128,237,.4), transparent 50%);
	-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	padding:1px;
	pointer-events:none;
}
.ub-hero-stat-label{
	font-size:11px;font-weight:700;letter-spacing:1.4px;
	color:#9CC4F5;text-transform:uppercase;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	margin-bottom:18px;
	display:flex;align-items:center;gap:10px;
}
.ub-hero-stat-label::after{content:'';flex:1;height:1px;background:rgba(86,163,255,.2)}
.ub-hero-stat-num{
	display:flex;
	align-items:flex-start;
	gap:.04em;
	min-width:0;
	font-size:clamp(48px,4vw,68px);
	font-weight:800;
	line-height:.95;
	letter-spacing:-.055em;
	margin:0 0 16px;
	color:#fff;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
.ub-hero-stat-num__value{min-width:0}
.ub-hero-stat-num__suffix{
	flex:0 0 auto;
	margin-top:.02em;
	font-size:.56em;
	font-weight:700;
	line-height:1;
	letter-spacing:-.03em;
}
.ub-hero-stat-desc{
	font-size:15px;line-height:1.6;
	color:rgba(255,255,255,.7);
	margin:0 0 24px;
}
.ub-hero-stat-foot{
	display:flex;flex-direction:column;gap:14px;
	padding-top:22px;
	border-top:1px solid rgba(255,255,255,.08);
}
.ub-hero-stat-row{
	display:flex;align-items:baseline;justify-content:space-between;gap:16px;
	font-size:13px;
}
.ub-hero-stat-row .k{color:rgba(255,255,255,.5);letter-spacing:.3px}
.ub-hero-stat-row .v{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* ─── ANCHOR NAV ─────────────────────────────────────────────────────── */
.ub-anchor-nav{
	position:sticky;top:0;z-index:50;
	background:rgba(255,255,255,.92);
	backdrop-filter:saturate(180%) blur(12px);
	border-bottom:1px solid #EEF1F6;
	padding:0;
	transition:all .25s;
}
@media(max-width:768px){
	.ub-anchor-nav-inner{
		mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
		-webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
	}
}
.ub-anchor-nav-inner{
	display:flex;align-items:center;justify-content:center;gap:4px;
	overflow-x:auto;
	scrollbar-width:none;
	padding:14px 0;
	position:relative;
}
.ub-anchor-nav-inner::-webkit-scrollbar{display:none}
@media(max-width:768px){
	.ub-anchor-nav-inner{justify-content:flex-start}
}
.ub-anchor-nav-inner a{
	font-size:13px;font-weight:500;
	color:#5A6B7F;
	padding:9px 16px;
	border-radius:8px;
	white-space:nowrap;
	transition:all .15s;
}
.ub-anchor-nav-inner a:hover{background:#F5F7FA;color:#0F243D}

/* ─── STATS BAR ────────────────────────────────────────────────────────── */
.ub-stats{background:#fff;border-bottom:1px solid #EEF1F6;padding:8px 0 0}
.ub-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #EEF1F6}
.ub-stat{
	padding:40px 32px;
	border-right:1px solid #EEF1F6;
	display:flex;flex-direction:column;gap:8px;
	position:relative;
}
.ub-stat:last-child{border-right:0}
.ub-stat-mark{
	font-size:11px;font-weight:600;letter-spacing:.8px;
	color:#8B97A8;text-transform:uppercase;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-stat-num{
	font-size:clamp(28px,3vw,38px);
	font-weight:800;
	color:#0F243D;
	letter-spacing:-1px;
	line-height:1;
}
.ub-stat-num .unit{font-size:.55em;font-weight:600;color:#5A6B7F;margin-left:4px}
.ub-stat-num .accent{
	background:linear-gradient(120deg,#2F80ED 0%,#56A3FF 100%);
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;
}
.ub-stat-label{font-size:13.5px;line-height:1.45;color:#5A6B7F;margin-top:auto}
.ub-stat-note{
	font-size:11.5px;line-height:1.4;color:#8B97A8;
	font-style:italic;
}

/* ─── SECTIONS ─────────────────────────────────────────────────────────── */
.ub-section{padding:104px 0;background:#F5F7FA;scroll-margin-top:72px}
.ub-section.alt{background:#fff}

.ub-shead{max-width:740px;margin:0 auto 64px;text-align:center}
.ub-tag{
	display:inline-flex;align-items:center;gap:8px;
	font-size:11.5px;font-weight:700;letter-spacing:1.2px;
	color:#2F80ED;text-transform:uppercase;
	margin-bottom:16px;
}
.ub-tag::before{content:'';width:24px;height:1px;background:#2F80ED}
.ub-section h2{
	font-size:clamp(30px,3.5vw,42px);
	font-weight:800;
	color:#0F243D;
	letter-spacing:-0.6px;
	line-height:1.15;
	margin:0 0 16px;
}
.ub-shead-sub{
	font-size:17px;line-height:1.65;
	color:#5A6B7F;
	max-width:640px;
	margin:0 auto;
}

/* ─── WHAT IS IT — NARRATIVE WITH NUMBER ─────────────────────────────── */
.ub-narr{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:36px;
	max-width:920px;margin:0 auto;
	align-items:start;
}
.ub-narr-num{
	font-size:64px;font-weight:800;
	line-height:.9;
	letter-spacing:-2px;
	color:transparent;
	-webkit-text-stroke:1.5px rgba(47,128,237,.35);
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	white-space:nowrap;
}
.ub-narr-num .dash{
	-webkit-text-stroke:1.5px rgba(47,128,237,.55);
	margin:0 4px;
	display:inline-block;
}
.ub-narr-text p{font-size:17px;line-height:1.75;color:#5A6B7F;margin:0 0 22px}
.ub-narr-text p:last-child{margin:0}
.ub-narr-text strong{color:#0F243D;font-weight:700}

/* ─── CODE SAMPLE — 3-step flow: MODEL → UBQL/API → AUTO UI ────────── */
.ub-code-wrap{
	max-width:1240px;margin:0 auto;
	display:grid;
	grid-template-columns:1fr 36px 1fr 36px 1fr;
	align-items:stretch;
	gap:0;
	padding:0;
}
.ub-code-panel{
	background:#0F243D;
	border:1px solid rgba(86,163,255,.15);
	border-radius:14px;
	padding:0;
	display:flex;flex-direction:column;
	box-shadow:0 20px 48px -20px rgba(15,36,61,.4);
	min-width:0;
}
.ub-code-head{
	display:flex;align-items:center;gap:10px;
	padding:14px 18px;
	border-bottom:1px solid rgba(255,255,255,.06);
}
.ub-code-badge{
	font-size:10px;font-weight:700;letter-spacing:1.2px;
	color:#56A3FF;text-transform:uppercase;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	padding:4px 10px;
	background:rgba(86,163,255,.1);
	border:1px solid rgba(86,163,255,.2);
	border-radius:6px;
}
.ub-code-title{
	font-size:11.5px;font-weight:500;
	color:rgba(255,255,255,.45);
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	letter-spacing:.3px;
	margin-left:auto;
}
.ub-code-body{
	flex:1;
	padding:18px 20px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	font-size:12px;line-height:1.7;
	color:#D1D9E5;
	overflow-x:auto;
	white-space:pre;
	tab-size:2;
}
.ub-code-body .c{color:#5A6B7F;font-style:italic}
.ub-code-body .k{color:#56A3FF}
.ub-code-body .s{color:#F0B86E}
.ub-code-body .n{color:#9CC4F5}
.ub-code-body .p{color:#56A3FF;font-weight:600}
.ub-code-body .m{color:#9CC4F5}
.ub-code-body .t{color:#F0B86E}

/* Flow arrow between panels */
.ub-code-arrow{
	display:flex;align-items:center;justify-content:center;
	color:rgba(86,163,255,.5);
}
.ub-code-arrow svg{width:24px;height:24px;display:block}

/* AUTO UI preview panel */
.ub-ui-preview{
	padding:16px 18px;
	display:flex;flex-direction:column;gap:12px;
	flex:1;
}
.ub-ui-toolbar{
	display:flex;align-items:center;gap:6px;
	flex-wrap:wrap;
}
.ub-ui-filter{
	display:inline-flex;align-items:center;gap:6px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.1);
	border-radius:6px;
	padding:5px 9px;
	font-size:10.5px;font-weight:500;
	color:rgba(255,255,255,.7);
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-ui-filter::before{
	content:'';
	width:6px;height:6px;border-radius:50%;
	background:#56A3FF;
}
.ub-ui-btn{
	background:rgba(86,163,255,.12);
	border:1px solid rgba(86,163,255,.25);
	border-radius:5px;
	padding:5px 10px;
	font-size:10.5px;font-weight:600;
	color:#9CC4F5;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	letter-spacing:.3px;
}
.ub-ui-btn.secondary{
	background:transparent;
	border-color:rgba(255,255,255,.12);
	color:rgba(255,255,255,.6);
}
.ub-ui-btn-group{display:flex;gap:5px;margin-left:auto}
.ub-ui-table{
	background:rgba(255,255,255,.02);
	border:1px solid rgba(255,255,255,.06);
	border-radius:8px;
	overflow:hidden;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	font-size:11px;
}
.ub-ui-row{
	display:grid;
	grid-template-columns:1.2fr 1fr 1fr;
	gap:8px;
	padding:8px 12px;
	border-bottom:1px solid rgba(255,255,255,.04);
}
.ub-ui-row:last-child{border-bottom:none}
.ub-ui-row.head{
	background:rgba(86,163,255,.06);
	color:#9CC4F5;
	font-weight:700;
	font-size:9.5px;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:8px 12px;
}
.ub-ui-row .cell{color:rgba(255,255,255,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub-ui-row .cell.num{color:rgba(255,255,255,.9);font-weight:600}
.ub-ui-status{
	display:inline-flex;align-items:center;gap:4px;
	padding:2px 7px;border-radius:4px;
	font-size:9.5px;font-weight:600;
	letter-spacing:.3px;
	background:rgba(86,255,163,.12);
	color:#7EE7A6;
	border:1px solid rgba(86,255,163,.2);
}
.ub-ui-status.draft{
	background:rgba(255,189,86,.1);
	color:#F0B86E;
	border-color:rgba(240,184,110,.2);
}
.ub-ui-badges{
	display:flex;gap:6px;
	padding-top:6px;
	border-top:1px solid rgba(255,255,255,.06);
	margin-top:auto;
}
.ub-ui-badge{
	display:inline-flex;align-items:center;gap:4px;
	background:rgba(86,163,255,.08);
	border:1px solid rgba(86,163,255,.18);
	border-radius:4px;
	padding:3px 7px;
	font-size:9.5px;font-weight:700;
	color:#56A3FF;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	letter-spacing:.5px;
}
.ub-ui-badge svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ub-code-caption{
	max-width:880px;margin:32px auto 0;
	text-align:center;
	font-size:14px;line-height:1.6;
	color:#5A6B7F;
}
.ub-code-caption code{
	background:rgba(47,128,237,.08);
	color:#1F3A5F;
	padding:2px 7px;border-radius:5px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	font-size:.92em;
}

/* ─── BENEFITS — BENTO GRID ──────────────────────────────────────────── */
.ub-bento{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	grid-auto-rows:minmax(180px,auto);
	gap:14px;
}
.ub-bcard{
	background:#fff;
	border:1px solid #E3E8EF;
	border-radius:18px;
	padding:28px;
	display:flex;flex-direction:column;
	position:relative;
	overflow:hidden;
	transition:all .3s cubic-bezier(.4,0,.2,1);
}
.ub-bcard:hover{
	border-color:#2F80ED;
	transform:translateY(-2px);
	box-shadow:0 12px 32px -10px rgba(15,36,61,.1);
}
.ub-bcard h3{font-size:17px;font-weight:700;color:#0F243D;margin:0 0 8px;letter-spacing:-.3px}
.ub-bcard p{font-size:14px;line-height:1.65;color:#5A6B7F;margin:0}
.ub-bcard-icon{
	width:44px;height:44px;
	background:rgba(47,128,237,.08);
	border:1px solid rgba(47,128,237,.18);
	border-radius:12px;
	display:flex;align-items:center;justify-content:center;
	margin-bottom:18px;
	flex-shrink:0;
}
.ub-bcard-icon svg{
	width:20px;height:20px;
	stroke:#2F80ED;fill:none;stroke-width:1.6;
	stroke-linecap:round;stroke-linejoin:round;
}
/* Small cards — visually lighter icons (lower priority) */
.ub-bcard.small .ub-bcard-icon{
	background:rgba(47,128,237,.05);
	border-color:rgba(47,128,237,.12);
	width:38px;height:38px;
	border-radius:10px;
}
.ub-bcard.small .ub-bcard-icon svg{
	width:18px;height:18px;
	stroke:#5A6B7F;
}

/* Bento layout */
.ub-bcard.large{
	grid-column:span 3;grid-row:span 2;
	background:linear-gradient(135deg,#0F243D 0%,#1F3A5F 100%);
	color:#fff;
	border-color:#1F3A5F;
	padding:36px;
}
.ub-bcard.large:hover{border-color:#2F80ED;box-shadow:0 16px 40px -10px rgba(47,128,237,.3)}
.ub-bcard.large h3{color:#fff;font-size:22px;margin-bottom:12px;letter-spacing:-.5px}
.ub-bcard.large p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin:0}
.ub-bcard.large p code{
	background:rgba(86,163,255,.12);
	border:1px solid rgba(86,163,255,.25);
	color:#9CC4F5;
	padding:2px 8px;
	border-radius:5px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	font-size:.85em;
	white-space:nowrap;
}
.ub-bcard.large .ub-bcard-icon{
	background:rgba(47,128,237,.18);
	border-color:rgba(47,128,237,.35);
	width:52px;height:52px;border-radius:14px;
	margin-bottom:24px;
}
.ub-bcard.large .ub-bcard-icon svg{width:24px;height:24px;stroke:#56A3FF}
.ub-bcard.medium{grid-column:span 3}
.ub-bcard.small{grid-column:span 2}
/* npm-style chip inside large card */

/* ─── USE CASES — WITH STATS ─────────────────────────────────────────── */
.ub-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ub-case{
	position:relative;
	padding:32px 28px 28px;
	background:#fff;
	border:1px solid #E3E8EF;
	border-radius:14px;
	transition:all .25s;
	display:flex;flex-direction:column;
}
.ub-case:hover{
	border-color:#2F80ED;
	transform:translateY(-2px);
	box-shadow:0 12px 28px -12px rgba(15,36,61,.1);
}
.ub-case-top{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	margin-bottom:18px;
}
.ub-case-num{
	font-size:11px;font-weight:700;
	color:#8B97A8;letter-spacing:1.5px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-case-num .accent{color:#2F80ED}
.ub-case-icon{
	width:28px;height:28px;
	opacity:.5;transition:opacity .25s;
}
.ub-case:hover .ub-case-icon{opacity:.85}
.ub-case-icon svg{width:100%;height:100%;stroke:#2F80ED;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ub-case h3{font-size:18px;font-weight:700;color:#0F243D;letter-spacing:-.3px;line-height:1.3;margin:0 0 10px}
.ub-case p{font-size:14px;line-height:1.6;color:#5A6B7F;margin:0 0 18px}
.ub-case-stat{
	margin-top:auto;
	padding-top:16px;
	border-top:1px solid #EEF1F6;
	font-size:13px;
	display:flex;align-items:baseline;gap:8px;
}
.ub-case-stat-num{
	color:#0F243D;font-weight:700;
	font-variant-numeric:tabular-nums;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-case-stat-label{color:#8B97A8;font-size:12px}

/* ─── TECH STACK — ARCHITECTURE DIAGRAM ─────────────────────────────── */
.ub-arch-wrap{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:56px;
	align-items:center;
	max-width:1100px;margin:0 auto;
}
.ub-arch-text h2{margin-bottom:20px}
.ub-arch-text p{font-size:16px;line-height:1.7;color:#5A6B7F;margin:0 0 18px}
.ub-arch-list{
	list-style:none;padding:0;margin:24px 0 0;
	display:flex;flex-direction:column;gap:0;
	border-top:1px solid #E3E8EF;
}
.ub-arch-list li{
	display:grid;
	grid-template-columns:130px 1fr;
	gap:20px;
	padding:18px 0;
	border-bottom:1px solid #E3E8EF;
	align-items:start;
}
.ub-arch-list dt{
	font-size:12px;font-weight:700;letter-spacing:.5px;
	color:#0F243D;text-transform:uppercase;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-arch-list dd{margin:0;font-size:14.5px;line-height:1.65;color:#5A6B7F}

.ub-arch-vis{
	position:relative;
	aspect-ratio:1/1.05;
	background:#fff;
	border:1px solid #E3E8EF;
	border-radius:20px;
	padding:24px;
	box-shadow:0 24px 48px -16px rgba(15,36,61,.08);
}
.ub-arch-vis svg{width:100%;height:100%;display:block}

/* ─── FINAL CTA — TWO COL ─────────────────────────────────────────────── */
.ub-cta{
	background:#0F243D;
	background-image:
		radial-gradient(circle 600px at 80% 100%, rgba(47,128,237,.18) 0%, transparent 70%),
		linear-gradient(135deg,#0F243D 0%,#1F3A5F 100%);
	padding:80px 0;color:#fff;
	position:relative;overflow:hidden;
}
.ub-cta::before{
	content:'';position:absolute;inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
	background-size:60px 60px;
	mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent 80%);
	-webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, #000, transparent 80%);
}
.ub-cta-grid{
	position:relative;z-index:1;
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:64px;align-items:center;
}
.ub-cta-left h2{
	font-size:clamp(28px,3vw,38px);
	font-weight:800;color:#fff;
	letter-spacing:-1px;line-height:1.15;
	margin:0 0 16px;
}
.ub-cta-left p{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.7);margin:0 0 28px}
.ub-cta-btn{
	display:inline-flex;align-items:center;gap:10px;
	font-size:15px;font-weight:600;
	padding:15px 32px;
	background:#2F80ED;color:#fff;
	border-radius:10px;
	transition:all .2s;
	box-shadow:0 4px 16px rgba(47,128,237,.35);
}
.ub-cta-btn:hover{background:#56A3FF;transform:translateY(-2px);box-shadow:0 8px 28px rgba(47,128,237,.5)}
.ub-cta-card{
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.1);
	border-radius:16px;
	padding:32px 28px;
	backdrop-filter:blur(10px);
}
.ub-cta-card h4{
	font-size:12px;font-weight:700;letter-spacing:1px;
	color:#9CC4F5;text-transform:uppercase;
	margin:0 0 20px;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.ub-cta-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.ub-cta-item{
	display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
	color:rgba(255,255,255,.85);
}
.ub-cta-item-mark{
	width:28px;height:28px;
	background:rgba(86,163,255,.15);
	border:1px solid rgba(86,163,255,.3);
	border-radius:7px;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:700;
	color:#9CC4F5;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	margin-top:1px;
	flex-shrink:0;
}
.ub-cta-item-text{font-size:14px;line-height:1.6}
.ub-cta-item-text strong{color:#fff;font-weight:600;display:block;margin-bottom:2px}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:1024px){
	.ub-hero-wrap{grid-template-columns:1fr;gap:48px;padding:80px 0 64px;min-height:0}
	.ub-hero-stat{max-width:520px;margin:0 auto;width:100%}
	.ub-arch-wrap{grid-template-columns:1fr;gap:40px}
	.ub-cta-grid{grid-template-columns:1fr;gap:32px}
	.ub-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
	.ub-bcard.large,.ub-bcard.medium,.ub-bcard.small{grid-column:span 2}
	.ub-cases{grid-template-columns:repeat(2,1fr)}
	/* Code 3-col → stack earlier than mobile (cramped at this width) */
	.ub-code-wrap{grid-template-columns:1fr;gap:14px;max-width:560px}
	.ub-code-arrow{transform:rotate(90deg);padding:4px 0}
}
@media(max-width:768px){
	.ub-section{padding:72px 0}
	.ub-stats-grid{grid-template-columns:1fr}
	.ub-stat{border-right:0;border-bottom:1px solid #EEF1F6;padding:28px 20px}
	.ub-stat:last-child{border-bottom:0}
	.ub-narr{grid-template-columns:1fr;gap:24px}
	.ub-narr-num{font-size:44px;letter-spacing:-1.5px}
	.ub-cases{grid-template-columns:1fr}
	.ub-bento{grid-template-columns:1fr}
	.ub-bcard.large,.ub-bcard.medium,.ub-bcard.small{grid-column:span 1}
	.ub-arch-list li{grid-template-columns:1fr;gap:6px}
	.ub-arch-list dt{font-size:11px}
	.ub-code-body{font-size:11.5px}
}
@media(max-width:480px){
	.ub-hero-wrap{padding:56px 0 48px}
	.ub-hero h1{font-size:32px;letter-spacing:-1px}
	.ub-hero-sub{font-size:16px}
	.ub-section{padding:56px 0}
	.ub-bcard.large{padding:28px}
	.ub-hero-stat{padding:28px 24px}
	.ub-hero-stat-num{font-size:48px;letter-spacing:-.055em}
}

/* ─── FIT CHECK — "Коли НЕ підходить" ───────────────────────────────── */
.ub-fit{
	background:#fff;
	padding:104px 0;
	scroll-margin-top:72px;
}
.ub-fit-wrap{
	max-width:880px;margin:0 auto;
}
.ub-fit-head{margin-bottom:48px}
.ub-fit-head h2{
	font-size:clamp(28px,3.2vw,38px);
	font-weight:800;
	color:#0F243D;
	letter-spacing:-.8px;
	line-height:1.2;
	margin:0 0 16px;
}
.ub-fit-head p{
	font-size:16.5px;line-height:1.65;
	color:#5A6B7F;
	margin:0;
	max-width:680px;
}
.ub-fit-list{
	list-style:none;padding:0;margin:0;
	display:flex;flex-direction:column;gap:0;
	border-top:1px solid #E3E8EF;
}
.ub-fit-list li{
	display:grid;
	grid-template-columns:48px 1fr;
	gap:24px;
	padding:28px 0;
	border-bottom:1px solid #E3E8EF;
	align-items:start;
}
.ub-fit-num{
	font-size:14px;font-weight:700;
	color:#8B97A8;
	font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
	letter-spacing:.5px;
	padding-top:2px;
}
.ub-fit-content h3{
	font-size:17.5px;font-weight:700;
	color:#0F243D;
	letter-spacing:-.3px;
	line-height:1.3;
	margin:0 0 8px;
}
.ub-fit-content p{
	font-size:14.5px;line-height:1.7;
	color:#5A6B7F;
	margin:0;
}
.ub-fit-content p strong{color:#0F243D;font-weight:600}
.ub-fit-foot{
	margin-top:40px;
	padding:24px;
	background:#F5F7FA;
	border-left:3px solid #2F80ED;
	border-radius:0 10px 10px 0;
	font-size:15px;line-height:1.65;
	color:#1F3A5F;
}
.ub-fit-foot strong{color:#0F243D;font-weight:700}

@media(max-width:768px){
	.ub-fit{padding:72px 0}
	.ub-fit-list li{grid-template-columns:36px 1fr;gap:16px;padding:24px 0}
	.ub-fit-num{font-size:12px}
	.ub-fit-content h3{font-size:16px}
}
@media(max-width:480px){
	.ub-fit{padding:56px 0}
}