:root {
	--font-head: "Outfit", sans-serif;
	--font-body: "Inter", sans-serif;
	--font-logo: "Clash Display", sans-serif;
	--bg: hsl(228 28% 8%);
	--surface: hsl(228 24% 12%);
	--surface-hover: hsl(228 20% 16%);
	--border: #222222;
	--border-bright: rgba(255, 255, 255, 0.1);
	--text-main: #ffffff;
	--text-muted: #a1a1aa;
	--text-dim: #71717a;
	--accent: #eab308;
	--primary: #3b82f6;
	--emerald: #10b981;
	--danger: #ef4444;
	--purple: #c084fc;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset & Root Variables ── */
.lk-cloudfold,
.lk-cloudfold *,
.lk-cloudfold *::before,
.lk-cloudfold *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.lk-cloudfold {
	font-family: var(--font-head);
	background: var(--bg);
	color: var(--text-main);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

/* ── Typography & Global Elements ── */
.lk-cloudfold h1,
.lk-cloudfold h2,
.lk-cloudfold h3,
.lk-cloudfold h4 {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--text-main);
	line-height: 1.1;
}

.lk-cloudfold .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.lk-cloudfold .svg-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
}

.lk-cloudfold .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 100px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
	border: none;
}

.lk-cloudfold .btn-primary {
	background: var(--text-main);
	color: var(--bg);
	box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

.lk-cloudfold .btn-primary:hover {
	background: var(--text-muted);
	transform: translateY(-2px);
}

.lk-cloudfold .btn-outline {
	background: transparent;
	color: var(--text-main);
	border: 1px solid var(--border-bright);
}

.lk-cloudfold .btn-outline:hover {
	background: var(--surface);
	border-color: var(--text-main);
}

.lk-cloudfold .tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 100px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-main);
	margin-bottom: 24px;
}

.lk-cloudfold .tag.accent {
	border-color: rgba(234, 179, 8, 0.3);
	color: var(--accent);
	background: rgba(234, 179, 8, 0.1);
}

.lk-cloudfold section {
	padding: 80px 0;
	position: relative;
}

.lk-cloudfold .sec-header {
	margin-bottom: 60px;
	max-width: 700px;
}

.lk-cloudfold .sec-header h2 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-top: 16px;
}

.lk-cloudfold .sec-header p {
	font-size: 18px;
	color: var(--text-muted);
	margin-top: 20px;
	line-height: 1.6;
}

.lk-cloudfold .sec-header-centered {
	text-align: center;
	margin: 0 auto 60px;
}

.lk-cloudfold .section-title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-family: var(--font-head);
	font-weight: 800;
	color: #fff;
	margin-top: 16px;
	letter-spacing: -0.02em;
}

.lk-cloudfold .section-lede {
	font-size: 18px;
	color: var(--text-muted);
	line-height: 1.6;
	max-width: 650px;
	margin: 20px auto 0;
}

.lk-cloudfold .gradient-text {
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
}

.lk-cloudfold .gradient-layout {
	background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%) text;
}

.lk-cloudfold .gradient-ai {
	background: linear-gradient(90deg, #c084fc 0%, #a855f7 100%) text;
}

.lk-cloudfold .chip-blue {
	border-color: rgba(59, 130, 246, 0.3);
	color: #60a5fa;
	background: rgba(59, 130, 246, 0.1);
}

.lk-cloudfold .chip-violet {
	border-color: rgba(139, 92, 246, 0.3);
	color: #a78bfa;
	background: rgba(139, 92, 246, 0.1);
}

.lk-cloudfold .chip-purple {
	border-color: rgba(168, 85, 247, 0.3);
	color: var(--purple);
	background: rgba(168, 85, 247, 0.1);
}

.lk-cloudfold .chip-indigo {
	border-color: rgba(129, 140, 248, 0.3);
	color: #818cf8;
	background: rgba(129, 140, 248, 0.1);
}

.lk-cloudfold .chip-emerald {
	border-color: rgba(16, 185, 129, 0.3);
	color: #34d399;
	background: rgba(16, 185, 129, 0.1);
}

.lk-cloudfold .chip-gold {
	border-color: rgba(234, 179, 8, 0.3);
	color: #fbbf24;
	background: rgba(234, 179, 8, 0.1);
}

.lk-cloudfold .chip-red {
	border-color: rgba(239, 68, 68, 0.3);
	color: #fca5a5;
	background: rgba(239, 68, 68, 0.1);
}

.lk-cloudfold .chip-pink {
	border-color: rgba(236, 72, 153, 0.3);
	color: #ec4899;
	background: rgba(236, 72, 153, 0.1);
}

.lk-cloudfold .section-border {
	border-top: 1px solid var(--border);
}

.lk-cloudfold .section-orb {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 999px;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

.lk-cloudfold .section-orb-small {
	width: 520px;
	height: 520px;
}

.lk-cloudfold .section-orb-medium {
	width: 500px;
	height: 500px;
}

.lk-cloudfold .section-orb-wide {
	width: 800px;
	height: 500px;
}

.lk-cloudfold .section-orb-purple-left {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgba(192, 132, 252, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-blue-left {
	top: 50%;
	left: -10%;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-blue-right {
	top: 30%;
	right: -5%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-emerald-left {
	top: 30%;
	left: -5%;
	background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-purple-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(192, 132, 252, 0.08) 0%, transparent 60%);
}

.lk-cloudfold .section-orb-gold-right {
	right: -5%;
	bottom: -8%;
	background: radial-gradient(circle, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-red-right {
	right: -5%;
	bottom: -10%;
	background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .section-orb-cyan-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
}

.lk-cloudfold .section-orb-pink-right {
	top: 50%;
	right: -5%;
	transform: translateY(-50%);
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
}

.lk-cloudfold .u-hidden {
	display: none;
}

.lk-cloudfold .u-fill {
	width: 100%;
	height: 100%;
}

.lk-cloudfold .gradient-ai-volume {
	background: linear-gradient(90deg, #818cf8 0%, #c084fc 50%, #ec4899 100%) text;
}

.lk-cloudfold .gradient-emerald {
	background: linear-gradient(90deg, #34d399 0%, #10b981 100%) text;
}

.lk-cloudfold .gradient-pink {
	background: linear-gradient(90deg, #f472b6 0%, #ec4899 100%) text;
}

.bg-img-2 {
	background-image: url('../images/2.jpg');
}

.bg-img-3 {
	background-image: url('../images/3.jpg');
}

.bg-img-4 {
	background-image: url('../images/4.jpg');
}

.bg-img-5 {
	background-image: url('../images/5.jpg');
}

.bg-img-6 {
	background-image: url('../images/6.jpg');
}

.bg-img-7 {
	background-image: url('../images/7.jpg');
}

.bg-img-8 {
	background-image: url('../images/8.jpg');
}

.bg-img-9 {
	background-image: url('../images/9.jpg');
}

.bg-img-10 {
	background-image: url('../images/10.jpg');
}

.bg-img-11 {
	background-image: url('../images/11.jpg');
}

.bg-img-12 {
	background-image: url('../images/12.jpg');
}

.bg-img-13 {
	background-image: url('../images/13.jpg');
}

.bg-img-14 {
	background-image: url('../images/14.jpg');
}

.bg-img-15 {
	background-image: url('../images/15.jpg');
}

.bg-img-16 {
	background-image: url('../images/16.jpg');
}

.bg-img-23 {
	background-image: url('../images/23.png');
}

.bg-img-24 {
	background-image: url('../images/24.jpg');
}

.bg-img-25 {
	background-image: url('../images/25.jpg');
}

.bg-img-26 {
	background-image: url('../images/26.jpg');
}

.bg-img-27 {
	background-image: url('../images/27.jpg');
}

.bg-admin-overview {
	background-image: url('../images/Overview.jpg');
}

.is-muted-preview {
	opacity: 0.3;
}

.is-grayscale-heavy {
	filter: grayscale(0.8);
}

/* ── Header & Navigation ── */
body.lk-landingkit.lk-cloudfold>#header.header,
.lk-cloudfold .header {
	--lk-admin-gap: 12px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 18px 0;
	background: transparent;
	--lk-header-progress: 0%;
	transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header .nav-container,
body.admin-bar.lk-landingkit.lk-cloudfold>#header.header .nav-container,
.admin-bar .lk-cloudfold .nav-container {
	margin-top: var(--lk-admin-gap);
}

html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header,
body.admin-bar.lk-landingkit.lk-cloudfold>#header.header,
.admin-bar .lk-cloudfold .header {
	top: 32px !important;
	padding-top: 0;
}

html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header.scrolled,
body.admin-bar.lk-landingkit.lk-cloudfold>#header.header.scrolled,
.admin-bar .lk-cloudfold .header.scrolled {
	top: 32px !important;
	padding-top: 0;
}

.lk-cloudfold .header::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: min(1200px, calc(100% - 48px));
	height: 2px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(234, 179, 8, 0.95), rgba(59, 130, 246, 0.95)) left center / var(--lk-header-progress) 100% no-repeat, rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 22px rgba(59, 130, 246, 0.16);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lk-cloudfold .header.scrolled {
	padding: 10px 0;
	background: rgba(6, 6, 8, 0.45);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
}

.lk-cloudfold .header.scrolled::after {
	opacity: 1;
}

.lk-cloudfold .nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 0;
	transform-origin: top center;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.lk-cloudfold .logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 45px;
	padding-right: 8px;
	flex: 0 0 auto;
	font-size: 30px;
	font-weight: 700;
}

.logo-text {
	font-family: var(--font-logo);
	color: #ffffff;
	font-size: 30px;
	font-weight: 500;
}

.lk-cloudfold .logo img {
	width: 50px;
	height: auto;
	display: block;
}

.lk-cloudfold .logo span {
	color: var(--accent);
}

.lk-cloudfold .nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
}

.lk-cloudfold .nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.lk-cloudfold .nav-links a {
	color: #c5c7ce;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	padding: 9px 12px;
	border-radius: 999px;
	transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.lk-cloudfold .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lk-cloudfold .nav-links a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.lk-cloudfold .nav-caret {
	width: 12px;
	height: 12px;
	opacity: 0.68;
	transition: transform 160ms ease, opacity 160ms ease;
}

.lk-cloudfold .nav-item--has-children:hover .nav-caret,
.lk-cloudfold .nav-item--has-children:focus-within .nav-caret {
	opacity: 1;
	transform: rotate(180deg);
}

.lk-cloudfold .nav-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 1100;
	min-width: 220px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.052) 42%, rgba(255, 255, 255, 0.028)), radial-gradient(circle at 18% 0%, rgba(255, 193, 7, 0.08), transparent 34%), radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.16), transparent 42%), rgba(8, 10, 18, 0.76);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	visibility: hidden;
	backdrop-filter: blur(30px) saturate(150%);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1), visibility 180ms cubic-bezier(.22, 1, .36, 1);
}

.lk-cloudfold .header.scrolled .nav-dropdown {
	border-color: rgba(255, 255, 255, 0.20);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.026)), radial-gradient(circle at 18% 0%, rgba(255, 193, 7, 0.055), transparent 34%), radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.10), transparent 42%), rgba(7, 9, 16, 0.88);
	box-shadow: 0 24px 76px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(36px) saturate(135%);
	-webkit-backdrop-filter: blur(36px) saturate(135%);
}

.lk-cloudfold .nav-dropdown::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 12px;
}

.lk-cloudfold .nav-dropdown::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
	pointer-events: none;
}

.lk-cloudfold .nav-item--has-children:hover .nav-dropdown,
.lk-cloudfold .nav-item--has-children:focus-within .nav-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
	visibility: visible;
}

.lk-cloudfold .nav-dropdown a {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	padding: 10px 12px;
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.78);
	background: rgba(255, 255, 255, 0.015);
	box-shadow: none;
}

.lk-cloudfold .nav-dropdown a:hover,
.lk-cloudfold .nav-dropdown a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.lk-cloudfold .nav-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.lk-cloudfold .nav-actions .btn {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.lk-cloudfold .header.scrolled .nav-container {
	transform: scale(0.985);
}

.lk-cloudfold .menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 999px;
	padding: 0;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.lk-cloudfold .menu-toggle:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
}

.lk-cloudfold .menu-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lk-cloudfold .menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background: var(--text-main);
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity 160ms ease;
}

.lk-cloudfold .menu-toggle.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.lk-cloudfold .menu-toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.lk-cloudfold .menu-toggle.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.lk-cloudfold .mobile-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	min-height: 100svh;
	padding: 104px 16px 24px;
	background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.10), transparent 34%), rgba(6, 8, 16, 0.82);
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s cubic-bezier(.22, 1, .36, 1);
}

.lk-cloudfold .mobile-menu.active {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.lk-cloudfold .mobile-menu__group {
	width: min(100%, 360px);
}

.lk-cloudfold .mobile-menu a {
	width: min(100%, 360px);
	min-height: 46px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid transparent;
	background: transparent;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	letter-spacing: -0.01em;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.lk-cloudfold .mobile-menu__group>a {
	width: 100%;
}

.lk-cloudfold .mobile-menu__sub {
	display: grid;
	gap: 6px;
	width: 100%;
	margin: 6px 0 10px;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.lk-cloudfold .mobile-menu__sub a {
	min-height: 40px;
	padding: 10px 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
}

.lk-cloudfold .mobile-menu a::after {
	content: "→";
	color: rgba(255, 255, 255, 0.28);
	font-size: 14px;
	transform: translateX(-4px);
	opacity: 0;
	transition: transform 160ms ease, opacity 160ms ease;
}

.lk-cloudfold .mobile-menu a:hover {
	color: #fff;
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.055);
}

.lk-cloudfold .mobile-menu a:hover::after {
	transform: translateX(0);
	opacity: 1;
}

.lk-cloudfold .mobile-menu .btn {
	min-height: 48px;
	margin-top: 12px;
	justify-content: center;
	color: hsl(228 28% 8%);
	background: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 800;
}

.lk-cloudfold .mobile-menu .btn::after {
	display: none;
}

.lk-cloudfold .mobile-menu__cta {
	margin-top: 12px !important;
}

.lk-cloudfold .ai-metadata-demo,
.lk-cloudfold .ai-metadata-media,
.lk-cloudfold .ai-metadata-panel,
.lk-cloudfold .ai-metadata-card {
	min-width: 0;
}

/* Demo Access Modal */
.lk-cloudfold .demo-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.lk-cloudfold .demo-modal.is-open {
	display: flex;
}

.lk-cloudfold .demo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 4, 10, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.lk-cloudfold .demo-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 520px);
	padding: 28px;
	border-radius: 28px;
	background: rgba(12, 14, 22, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.lk-cloudfold .demo-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-main);
	font-size: 24px;
	cursor: pointer;
}

.lk-cloudfold .demo-modal__eyebrow {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(59, 130, 246, 0.12);
	color: #93c5fd;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}

.lk-cloudfold .demo-modal__title {
	font-size: clamp(1.75rem, 3vw, 2.2rem);
	margin-bottom: 10px;
}

.lk-cloudfold .demo-modal__desc {
	color: var(--text-muted);
	line-height: 1.65;
	margin-bottom: 22px;
}

.lk-cloudfold .demo-credentials {
	display: grid;
	gap: 14px;
	margin-bottom: 22px;
}

.lk-cloudfold .demo-credentials__item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.lk-cloudfold .demo-credentials__label {
	font-size: 12px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lk-cloudfold .demo-credentials__value {
	background: transparent;
	color: var(--text-main);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.lk-cloudfold .demo-credentials__copy {
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
	cursor: pointer;
}

.lk-cloudfold .demo-modal__action {
	width: 100%;
}

/* ── Hero Section (Bold Centered + Animated Gradient Mesh) ── */
.hero {
	position: relative;
	padding: 180px 0 140px !important;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 180px;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 72%, #000 100%);
}

.hero-mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.hero-mesh::before,
.hero-mesh::after,
.hero-mesh .blob {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.55;
	will-change: transform;
}

.hero-mesh::before {
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, rgba(234, 179, 8, 0.55) 0%, transparent 70%);
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	animation: meshFloat1 14s ease-in-out infinite;
}

.hero-mesh::after {
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, rgba(192, 132, 252, 0.4) 0%, transparent 70%);
	bottom: -15%;
	left: 8%;
	animation: meshFloat2 18s ease-in-out infinite;
}

.hero-mesh .blob {
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
	top: 30%;
	right: -8%;
	animation: meshFloat3 16s ease-in-out infinite;
}

@keyframes meshFloat1 {

	0%,
	100% {
		transform: translateX(-50%) translateY(0) scale(1);
	}

	50% {
		transform: translateX(-40%) translateY(40px) scale(1.1);
	}
}

@keyframes meshFloat2 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(60px, -50px) scale(1.15);
	}
}

@keyframes meshFloat3 {

	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(-50px, 40px) scale(0.9);
	}
}

.hero-grid-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 8px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-bright);
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 36px;
	text-decoration: none;
	backdrop-filter: blur(10px);
}

.hero-pill .dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), #f97316);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #000;
	font-weight: 800;
}

.hero-pill .arrow {
	color: var(--text-dim);
	transition: transform 0.3s var(--ease);
}

.hero-pill:hover .arrow {
	transform: translateX(4px);
	color: var(--text-main);
}

.hero h1 {
	font-size: clamp(2.5rem, 5.8vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.05em;
	margin-bottom: 20px;
	max-width: 980px;
}

.hero h1 .line {
	display: block;
	white-space: nowrap;
}

.hero-sub {
	font-size: clamp(15px, 1.25vw, 18px);
	color: var(--text-muted);
	line-height: 1.58;
	max-width: 700px;
	margin: 0 auto 34px;
}

.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 60px;
	justify-content: center;
}

.hero-actions .btn-primary {
	background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%);
	box-shadow: 0 10px 30px -8px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	padding: 18px 36px;
	font-size: 15px;
}

.hero-actions .btn-outline {
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(10px);
	padding: 18px 28px;
	font-size: 15px;
}

.lk-cloudfold .hero-demo-meta {
	font-size: 13px;
	color: var(--text-dim);
	letter-spacing: 0.01em;
	margin-top: -40px;
	margin-bottom: 56px;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	width: 100%;
	max-width: 880px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 28px 0;
}

.stat-item {
	text-align: center;
	padding: 0 16px;
	border-right: 1px solid var(--border);
}

.stat-item:last-child {
	border-right: none;
}

.stat-item .num {
	font-family: var(--font-head);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 6px;
	background: linear-gradient(180deg, var(--text-main) 0%, var(--text-muted) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stat-item .lbl {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.stat-item .num .suffix {
	color: var(--accent);
	-webkit-text-fill-color: var(--accent);
}

.hero-scroll-cue {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-head);
	font-size: 11px;
	color: var(--text-dim);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.hero-scroll-cue .line {
	width: 1px;
	height: 36px;
	background: linear-gradient(180deg, var(--text-dim), transparent);
	animation: cueDrop 2s ease-in-out infinite;
}

@keyframes cueDrop {

	0%,
	100% {
		transform: scaleY(0.4);
		transform-origin: top;
		opacity: 0.4;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.lk-cloudfold .nav-container {
		border-radius: 14px;
		padding: 10px 12px;
		background: transparent;
	}

	.hero {
		padding: 164px 0 80px;
		min-height: auto;
	}

	.hero h1 {
		font-size: clamp(2.5rem, 12vw, 4.5rem);
	}

	.hero h1 .line {
		white-space: normal;
	}

	.hero::after {
		height: 130px;
	}

	.ticker-section {
		min-height: 160px;
		margin-top: -80px;
		margin-bottom: -80px;
		padding: 0;
	}

	#features {
		margin-top: 0;
		padding-top: 86px;
	}

	#features::before {
		height: 58px;
	}

	.hero-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 0;
	}

	.stat-item:nth-child(2) {
		border-right: none;
	}

	.stat-item:nth-child(1),
	.stat-item:nth-child(2) {
		border-bottom: 1px solid var(--border);
		padding-bottom: 16px;
	}

	.stat-item:nth-child(3),
	.stat-item:nth-child(4) {
		padding-top: 16px;
	}

	.hero-scroll-cue {
		display: none;
	}
}

@media (max-width: 782px) {

	html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header,
	html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header.scrolled,
	body.admin-bar.lk-landingkit.lk-cloudfold>#header.header,
	body.admin-bar.lk-landingkit.lk-cloudfold>#header.header.scrolled,
	.admin-bar .lk-cloudfold .header,
	.admin-bar .lk-cloudfold .header.scrolled {
		top: 46px !important;
	}

	html.admin-bar body.lk-landingkit.lk-cloudfold>#header.header .nav-container,
	body.admin-bar.lk-landingkit.lk-cloudfold>#header.header .nav-container,
	.admin-bar .lk-cloudfold .nav-container {
		margin-top: 10px;
	}
}

.pm-dots {
	display: flex;
	gap: 6px;
}

.pm-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.pm-dot.r {
	background: #ed6a5e;
}

.pm-dot.y {
	background: #f4bf4f;
}

.pm-dot.g {
	background: #61c554;
}

/* ── Layer Intersecting Ticker ── */
.ticker-section {
	position: relative;
	z-index: 8;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 0;
	margin-top: -110px;
	margin-bottom: -110px;
	background: transparent;
	border: none;
	pointer-events: none;
}

.ticker-section::after {
	content: none;
}

/* Make ticker melt directly into the Features heading block */
#features {
	margin-top: 0;
	padding-top: 118px;
}

#features::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 80px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.ticker-layer {
	position: absolute;
	left: -10vw;
	width: 120vw;
	display: flex;
	padding: 20px 0;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.layer-1 {
	transform: rotate(-4deg);
	background: #09090b;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.layer-2 {
	transform: rotate(2deg);
	background: var(--accent);
	z-index: 2;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
}

.track-1 {
	animation: scrollLeft 40s linear infinite;
	font-family: var(--font-head);
	font-size: 56px;
	font-weight: 800;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);
}

.track-1 .ticker-item {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
}

.track-1 .ticker-item span {
	color: rgba(255, 255, 255, 0.1);
	-webkit-text-stroke: 0;
	font-size: 32px;
}

.track-2 {
	animation: scrollRight 35s linear infinite;
	font-family: var(--font-head);
	font-size: 56px;
	font-weight: 800;
	text-transform: uppercase;
	color: #000;
}

.track-2 .ticker-item {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
}

.track-2 .ticker-item span {
	color: rgba(0, 0, 0, 0.3);
	font-size: 32px;
}

@keyframes scrollLeft {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@keyframes scrollRight {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

/* ── Split Layouts Common ── */
.split-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: center;
}

.split-grid.alt {
	grid-template-columns: 1.2fr 1fr;
}

.mt-5 {
  margin-top: 30px !important;
}

.split-content h2 {
	font-size: clamp(2.7rem, 4.2vw, 4rem);
	margin: 14px 0 18px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
}

.split-content p {
	font-size: 17px;
	color: #b2b2bd;
	line-height: 1.65;
	margin-bottom: 26px;
	max-width: 56ch;
}

.split-features {
	display: grid;
	gap: 12px;
}

.s-feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
	border-radius: 12px;
	padding: 10px 12px;
}

.s-feature.feature-card-soft {
	--clr: #ffffff16;
}

.s-feature-icon {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.s-feature-icon svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.5;
}

.s-feature-icon.icon-blue {
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
}

.s-feature-icon.icon-violet {
	background: rgba(139, 92, 246, 0.15);
	color: #a78bfa;
}

.s-feature-icon.icon-emerald {
	background: rgba(16, 185, 129, 0.15);
	color: #34d399;
}

.s-feature-icon.icon-gold {
	background: rgba(234, 179, 8, 0.15);
	color: #fbbf24;
}

.s-feature-icon.icon-red {
	background: rgba(239, 68, 68, 0.15);
	color: #fca5a5;
}

.s-feature-icon.icon-pink {
	background: rgba(236, 72, 153, 0.15);
	color: #ec4899;
}

.s-feature-text h4 {
	font-size: 17px;
	color: #fff;
	margin-bottom: 3px;
	margin-top: 0;
	letter-spacing: -0.01em;
}

.s-feature-text p {
	font-size: 14px;
	color: #a1a1aa;
	line-height: 1.52;
	margin: 0;
}

.ui-box {
	width: 100%;
	height: 100%;
	background: #09090b;
	border: 1px solid var(--border-bright);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 1);
	position: relative;
}

.ui-box::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ui-header {
	padding: 16px;
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid var(--border-bright);
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 2;
	justify-content: space-between;
}

.ui-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

/* ── Bento Grid ── */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.bcard {
	background: #09090b;
	border: 1px solid var(--border-bright);
	border-radius: 24px;
	padding: 30px;
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	z-index: 1;
	min-width: 0;
}

.bcard::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -2;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.3;
}

.bcard::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.03), transparent 70%);
	transition: opacity 0.4s ease;
}

.bcard:hover {
	border-color: rgba(255, 255, 255, 0.15);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bcard:hover::before {
	opacity: 1;
	background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%);
}

.bcard.span-2 {
	grid-column: span 2;
}

.bcard.row-2 {
	grid-row: span 2;
}

.bcard-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid var(--border-bright);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bcard-icon-wrap svg {
	width: 32px !important;
	height: 32px !important;
	stroke-width: 2px !important;
	flex-shrink: 0;
}

.bcard h3 {
	font-size: 22px;
	margin-bottom: 12px;
	color: #fff;
	letter-spacing: -0.02em;
}

.bcard p {
	color: var(--text-muted);
	line-height: 1.6;
	font-size: 15px;
	margin-bottom: 0;
	flex-grow: 1;
	position: relative;
	z-index: 2;
}

.bcard.row-2>p {
	flex-grow: 0;
	margin-bottom: 10px;
}

.bv-lightbox {
	margin-top: 32px;
	height: 220px;
	min-height: 220px;
	border-radius: 14px;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-bright);
	background: #000;
	flex-grow: 1;
	z-index: 2;
}

.bcard.row-2 .bv-lightbox {
	margin-top: 16px;
	height: 238px;
	min-height: 238px;
}

.bcard-lightbox {
	min-height: 560px;
}

.bcard-lightbox .bv-lightbox {
	height: 280px;
	min-height: 280px;
}

.bcard-proofing {
	min-height: 360px;
	align-self: start;
	background:
		radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.12), transparent 34%),
		radial-gradient(circle at 90% 18%, rgba(168, 85, 247, 0.10), transparent 34%),
		#09090b;
}

.bcard-proofing p {
	flex-grow: 0;
}

.bv-proofing-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
	position: relative;
	z-index: 2;
}

.bv-proofing-strip span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.045);
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	font-weight: 700;
}

.bv-proofing-strip svg {
	width: 14px;
	height: 14px;
	color: #60a5fa;
	stroke-width: 2.4;
}

.bv-lb-bg {
	position: absolute;
	inset: -20px;
	background: url('../images/18.jpg') center/cover;
	filter: blur(16px) brightness(0.25);
	transition: 0.5s ease;
}

.bcard:hover .bv-lb-bg {
	filter: blur(20px) brightness(0.15);
}

.bv-lb-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 16px;
	z-index: 2;
	opacity: 0;
	transition: 0.4s ease;
	transform: scale(0.95);
}

.bcard:hover .bv-lb-ui {
	opacity: 1;
	transform: scale(1);
}

.bv-lb-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.bv-lb-counter {
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px 10px;
	border-radius: 100px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.bv-lb-controls {
	display: flex;
	gap: 8px;
}

.bv-lb-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.bv-lb-btn svg {
	width: 14px !important;
	height: 14px !important;
	stroke-width: 2.5;
	flex-shrink: 0;
}

.bv-lb-center {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.bv-lb-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.bv-lb-arrow svg {
	width: 16px !important;
	height: 16px !important;
	stroke-width: 2;
	flex-shrink: 0;
}

.bv-lb-main {
	flex: 1;
	height: 100%;
	border-radius: 8px;
	background: url('../images/18.jpg') center/cover;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: 0.5s var(--ease);
	min-height: 120px;
}

.bcard:hover .bv-lb-main {
	transform: scale(1.03);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 1);
}

.bv-lb-bottom {
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.bv-lb-thumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	padding: 6px 8px;
}

.bv-lb-thumb {
	width: 36px;
	height: 22px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background-size: cover;
	background-position: center;
	opacity: 0.82;
	transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.bv-lb-thumb.active {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95);
	opacity: 1;
	transform: scale(1.05);
}

.bv-tags {
	margin-top: 24px;
	position: relative;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.bv-ai-center {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 5;
	flex-shrink: 0;
}

.bv-ai-center svg {
	width: 26px !important;
	height: 26px !important;
	color: #fff;
	flex-shrink: 0;
}

.bv-tag {
	position: absolute;
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	backdrop-filter: blur(4px);
	transition: 0.5s var(--ease);
	opacity: 0.9;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bv-tag svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
}

.bv-tag.t1 {
	top: 0;
	left: 0;
	background: rgba(234, 179, 8, 0.1);
	border: 1px solid rgba(234, 179, 8, 0.2);
	color: #fbbf24;
	margin-top: 10px;
}

.bv-tag.t2 {
	bottom: 0;
	left: 50%;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #34d399;
	margin-bottom: 10px;
	transform: translateX(-50%);
}

.bv-tag.t3 {
	top: 0;
	right: 0;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.2);
	color: #60a5fa;
	margin-top: 10px;
}

.bcard:hover .bv-tag.t1,
.bcard:hover .bv-tag.t3 {
	margin-top: 0;
}

.bcard:hover .bv-tag.t2 {
	margin-bottom: 0;
}

.bcard:hover .bv-ai-center {
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.bv-folders {
	margin-top: 32px;
	position: relative;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.bv-folder {
	position: absolute;
	width: 110px;
	height: 75px;
	background: #121214;
	border: 1px solid var(--border-bright);
	border-radius: 12px;
	transition: 0.5s var(--ease);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
}

.bv-folder svg {
	width: 32px !important;
	height: 32px !important;
	stroke-width: 1.5 !important;
	flex-shrink: 0;
}

.bv-folder:nth-child(1) {
	z-index: 1;
	transform: scale(0.9) rotate(-6deg) translateX(-10px);
}

.bv-folder:nth-child(2) {
	z-index: 2;
	transform: scale(0.95) rotate(-3deg) translateX(0);
}

.bv-folder:nth-child(3) {
	z-index: 3;
	background: #18181b;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8);
	transform: scale(1) rotate(0) translateX(10px);
}

.bcard:hover .bv-folder:nth-child(1) {
	transform: scale(0.9) rotate(-15deg) translateX(-30px) translateY(10px);
	opacity: 0.6;
}

.bcard:hover .bv-folder:nth-child(3) {
	transform: scale(1.05) rotate(5deg) translateX(30px) translateY(-5px);
}

.bv-cloud {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.03);
	padding: 16px 20px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	z-index: 2;
}

.bv-cloud-icon {
	color: #a1a1aa;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.bv-cloud-icon svg {
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0;
}

.bv-cloud-line {
	flex: 1;
	height: 2px;
	position: relative;
	background: rgba(255, 255, 255, 0.1);
	margin: 0 16px;
	overflow: hidden;
	border-radius: 2px;
}

.bv-pulse {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(90deg, transparent, #3b82f6, transparent);
	animation: pulseMove 2s infinite ease-in-out;
}

.bv-cloud-server {
	color: #60a5fa;
	display: flex;
	align-items: center;
	background: rgba(59, 130, 246, 0.1);
	padding: 10px;
	border-radius: 10px;
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.bv-cloud-server svg {
	width: 22px !important;
	height: 22px !important;
	flex-shrink: 0;
}

@keyframes pulseMove {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(300%);
	}
}

/* ── Smart Organizer ── */
.folder-ui::before {
	background: radial-gradient(600px circle at 100% 0%, rgba(59, 130, 246, 0.1), transparent);
}

.f-body {
	display: flex;
	flex: 1;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.f-sidebar {
	width: 180px;
	background: rgba(255, 255, 255, 0.01);
	border-right: 1px solid rgba(255, 255, 255, 0.04);
	padding: 16px 12px;
}

.f-main {
	flex: 1;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-content: start;
}

.f-item {
	font-size: 13px;
	color: var(--text-dim);
	padding: 8px 12px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	transition: 0.2s;
	font-weight: 500;
}

.f-item.active {
	background: rgba(59, 130, 246, 0.1);
	color: #60a5fa;
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.f-item svg {
	width: 16px;
	height: 16px;
	opacity: 0.8;
}

.f-img {
	aspect-ratio: 1;
	position: relative;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.f-drag-ghost {
	position: absolute;
	top: 40%;
	left: 55%;
	width: 110px;
	height: 110px;
	background-image: url('../images/17.jpg');
	background-size: cover;
	background-position: center;
	border-radius: 12px;
	border: 2px solid #60a5fa;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(59, 130, 246, 0.2);
	z-index: 10;
	pointer-events: none;
	animation: dragMove 4s infinite ease-in-out;
}

.f-drag-cursor {
	position: absolute;
	bottom: -12px;
	right: -12px;
	width: 26px;
	height: 26px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	color: #000;
}

@keyframes dragMove {

	0%,
	100% {
		transform: translate(0, 0) rotate(4deg) scale(1);
	}

	50% {
		transform: translate(-190px, -15px) rotate(-4deg) scale(0.9);
	}
}

/* ── Duplicate Cleaner ── */
.cl-ui::before {
	background: radial-gradient(600px circle at 0% 100%, rgba(239, 68, 68, 0.08), transparent);
}

.cl-scan-status {
	font-size: 12px;
	color: var(--emerald);
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(16, 185, 129, 0.1);
	padding: 4px 12px;
	border-radius: 100px;
	border: 1px solid rgba(16, 185, 129, 0.2);
	font-weight: 600;
}

.cl-body {
	padding: 24px;
	flex: 1;
	overflow: hidden;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dup-group {
	background: #121214;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 16px;
}

.dup-group-head {
	font-size: 12px;
	color: var(--text-dim);
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	text-transform: uppercase;
	font-weight: 600;
}

.dup-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #18181b;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	margin-bottom: 8px;
}

.dup-row-muted {
	opacity: 0.6;
}

.dup-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dup-img {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
}

.dup-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dup-meta h5 {
	font-size: 13px;
	color: #fff;
	margin: 0 0 2px 0;
	line-height: 1.2;
}

.dup-meta p {
	font-size: 11px;
	color: var(--text-dim);
	margin: 0;
	line-height: 1.2;
}

.badge-keep {
	background: rgba(255, 255, 255, 0.05);
	color: #a1a1aa;
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 600;
	margin: 0;
}

.badge-del {
	background: rgba(239, 68, 68, 0.15);
	color: #fca5a5;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 600;
	border: 1px solid rgba(239, 68, 68, 0.3);
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	margin: 0;
}

.badge-del svg {
	width: 12px;
	height: 12px;
}

.badge-lock {
	background: rgba(234, 179, 8, 0.1);
	color: #fde047;
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 600;
	border: 1px solid rgba(234, 179, 8, 0.2);
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}

.badge-lock-icon {
	width: 12px;
}

.scan-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #fca5a5;
	box-shadow: 0 0 12px #fca5a5, 0 0 24px #fca5a5;
	opacity: 0;
	z-index: 10;
	animation: scanDown 3s infinite linear;
}

@keyframes scanDown {
	0% {
		top: 0;
		opacity: 0;
	}

	10% {
		opacity: 0.6;
	}

	90% {
		opacity: 0.6;
	}

	100% {
		top: 100%;
		opacity: 0;
	}
}

#performance {
	padding: clamp(76px, 7vw, 104px) 0;
	overflow: hidden;
	scroll-margin-top: 104px;
}

#performance .split-grid {
	gap: clamp(44px, 5.6vw, 72px);
}

.perf-app-ui {
	display: flex;
	flex-direction: column;
	background: linear-gradient(145deg, rgba(9, 15, 18, 0.96), rgba(7, 8, 12, 0.98));
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 34px 86px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(16, 185, 129, 0.06) inset;
	position: relative;
	min-height: 0;
	width: 100%;
}

.perf-app-ui::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.1), transparent 60%);
	pointer-events: none;
}

.p-app-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	z-index: 2;
	position: relative;
	overflow: visible;
}

.lh-scores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
}

.lh-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.lh-ring {
	position: relative;
	width: 64px;
	height: 64px;
}

.lh-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.lh-ring .circle-bg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.05);
	stroke-width: 3;
}

.lh-ring .circle-val {
	fill: none;
	stroke: var(--emerald);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 100, 100;
	animation: lhFill 1.5s ease-out forwards;
}

.lh-delay-none {
	animation-delay: 0s;
}

.lh-delay-short {
	animation-delay: 0.2s;
}

.lh-delay-medium {
	animation-delay: 0.4s;
}

.lh-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--emerald);
	font-family: var(--font-head);
}

.lh-label {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.p-metrics {
	display: flex;
	gap: 16px;
}

.p-metric-card {
	flex: 1;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.p-metric-card span:first-child {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	font-weight: 600;
}

.p-metric-card span:last-child {
	font-size: 16px;
	color: #fff;
	font-weight: 700;
	font-family: var(--font-head);
}

.p-metric-card span.metric-good {
	color: var(--emerald);
}

.p-terminal {
	flex: none;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.p-term-head {
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 11px;
	color: var(--text-dim);
	font-family: 'DM Mono', monospace;
	display: flex;
	gap: 8px;
	align-items: center;
}

.p-term-head .term-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.p-term-body {
	max-height: 118px;
	padding: 16px;
	font-family: 'DM Mono', monospace;
	font-size: 12px;
	line-height: 1.55;
	color: #a1a1aa;
	overflow: hidden;
	mask-image: linear-gradient(180deg, #000 72%, transparent);
}

@keyframes lhFill {
	0% {
		stroke-dasharray: 0, 100;
	}
}

/* ── AI Engine ── */
.ai-ui::before {
	background: radial-gradient(600px circle at 50% 50%, rgba(192, 132, 252, 0.1), transparent);
}

.ai-ui-tag {
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-bright);
	border-radius: 100px;
	font-size: 11px;
	color: #a1a1aa;
	white-space: nowrap;
}

.ai-engine-section {
	padding: 120px 0;
	position: relative;
}

.ui-heading-group {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ui-title svg {
	width: 16px;
	color: currentColor;
}

.ui-title-purple {
	color: #fff;
}

.ui-title-purple svg {
	color: #c084fc;
}

.ui-title-blue svg {
	width: 18px;
	color: #60a5fa;
}

.ui-title-emerald svg {
	color: #34d399;
}

.ui-title-gold svg {
	width: 18px;
	color: #fbbf24;
}

.ui-title-red svg {
	width: 18px;
	color: #fca5a5;
}

.ui-title-cyan svg {
	color: #38bdf8;
}

.ui-title-pink svg {
	color: #ec4899;
}

.ui-status {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
}

.ui-status-purple {
	color: var(--purple);
	border: 1px solid rgba(168, 85, 247, 0.2);
	background: rgba(168, 85, 247, 0.1);
}

.ui-status-emerald {
	color: var(--emerald);
	border: 1px solid rgba(16, 185, 129, 0.2);
	background: rgba(16, 185, 129, 0.1);
}

.status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

.status-dot-purple {
	background: var(--purple);
	box-shadow: 0 0 8px var(--purple);
	animation: blink 1.5s infinite;
}

.status-dot-emerald {
	background: var(--emerald);
	box-shadow: 0 0 8px var(--emerald);
}

.status-dot-blue {
	background: #60a5fa;
	box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
}

.status-dot-cyan {
	background: #38bdf8;
	box-shadow: 0 0 8px #38bdf8;
}

.ai-metadata-demo {
	flex: 1;
	padding: 24px;
	display: flex;
	gap: 20px;
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: radial-gradient(circle at top, rgba(255, 255, 255, 0.02), transparent 80%);
}

.ai-metadata-media {
	width: 150px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}

.ai-metadata-preview {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	background: url('../images/21.jpg') center/cover;
	border: 1px solid var(--border-bright);
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.ai-focal-dot {
	position: absolute;
	top: 40%;
	left: 60%;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 3px solid var(--purple);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
	animation: pulseDot 2s infinite;
}

.ai-preview-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.ai-focal-box {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-bright);
	padding: 10px;
	border-radius: 8px;
	text-align: center;
}

.ai-card-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--text-dim);
	text-transform: uppercase;
}

.ai-focal-box .ai-card-label {
	font-size: 10px;
	margin-bottom: 4px;
	letter-spacing: 0.05em;
}

.ai-focal-value {
	font-size: 12px;
	font-family: 'JetBrains Mono', monospace;
	color: #fff;
}

.ai-metadata-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ai-metadata-card {
	background: #121214;
	border: 1px solid var(--border-bright);
	border-radius: 12px;
	padding: 16px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.ai-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.ai-provider-badge {
	padding: 2px 8px;
	border-radius: 100px;
	background: rgba(168, 85, 247, 0.4);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
}

.ai-alt-copy {
	margin-bottom: 16px;
	color: #e4e4e7;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	line-height: 1.6;
}

.ai-progress {
	height: 3px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
}

.ai-progress-bar {
	width: 100%;
	height: 100%;
	background: var(--purple);
	animation: aiLoad 3s ease-out infinite;
}

.ai-tags-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ai-tag-loading {
	opacity: 0.5;
	animation: blink 1.5s infinite;
}

.ai-metadata-save {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-color: rgba(168, 85, 247, 0.15);
	background: rgba(168, 85, 247, 0.05);
}

.ai-save-icon {
	color: var(--purple);
}

.ai-save-text {
	color: #e4e4e7;
	font-size: 12px;
	font-weight: 500;
}

@keyframes blink {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

@keyframes pulseDot {
	0% {
		box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(168, 85, 247, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
	}
}

@keyframes aiLoad {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

/* ── Remove Background ── */
.rb-ui::before {
	background: radial-gradient(600px circle at 50% 50%, rgba(59, 130, 246, 0.1), transparent);
}

.rb-ui {
	height: auto;
	align-self: center;
}

.rb-status {
	font-size: 12px;
	color: #60a5fa;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(59, 130, 246, 0.1);
	padding: 4px 12px;
	border-radius: 100px;
	border: 1px solid rgba(59, 130, 246, 0.2);
	font-weight: 600;
}

.rb-body {
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
	padding: 24px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rb-compare {
	position: relative;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	height: clamp(500px, 31vw, 560px);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.06) 75%);
	background-size: 28px 28px;
	background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.rb-pos-62 {
	--pos: 62%;
}

.rb-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.rb-before {
	background-image: url('../images/bg.webp');
	clip-path: inset(0 0 0 var(--pos));
}

.rb-after {
	background-image: url('../images/bg-removed.png');
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.rb-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	background: rgba(255, 255, 255, 0.75);
	transform: translateX(-1px);
	z-index: 5;
}

.rb-divider::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55);
}

.rb-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.9);
	transform: translate(-50%, -50%);
}

.rb-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 10;
}

.rb-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.rb-chip {
	font-size: 12px;
	color: #e4e4e7;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 8px 12px;
	border-radius: 100px;
	font-weight: 600;
}

.rb-chip strong {
	color: #fff;
	font-weight: 800;
	font-family: var(--font-head);
}

/* ── Cloud Offload ── */
.cloud-offload-section {
	padding: 120px 0;
	position: relative;
	z-index: 9;
	overflow: visible;
	isolation: isolate;
	border-top: 1px solid var(--border);
}

.co-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px;
	position: static;
}

.co-header h2,
.co-header p {
	position: relative;
	z-index: 2;
}

.co-title {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 24px;
	color: #fff;
	letter-spacing: -0.02em;
}

.co-title .text-gradient {
	background: linear-gradient(90deg, #93c5fd 0%, #c084fc 50%, #ec4899 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.co-desc {
	font-size: 16px;
	color: var(--text-muted);
	line-height: 1.6;
	max-width: 500px;
	margin: 0 auto;
}

.co-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto 40px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.co-step {
	background: #09090b;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex: 1;
	min-width: 140px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	transition: 0.3s var(--ease);
}

.co-step:hover {
	background: rgba(255, 255, 255, 0.03);
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.co-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e4e4e7;
	margin-bottom: 16px;
}

.co-icon svg {
	width: 28px;
	height: 28px;
	stroke-width: 1.5;
}

.co-step h4 {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 4px;
	margin-top: 0;
}

.co-step p {
	font-size: 12px;
	color: var(--text-dim);
	margin: 0;
}

.co-arrow {
	color: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.co-arrow svg {
	width: 16px;
	height: 16px;
}

.co-providers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.co-provider {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: #09090b;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: #e4e4e7;
	transition: 0.3s;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.co-provider:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

.co-provider svg {
	width: 18px;
	height: 18px;
}

/* ── Layouts (Modern Layouts Engine) ── */
.layouts-section {
	padding: 120px 0;
	border-top: 1px solid var(--border);
	position: relative;
	z-index: 9;
	overflow: visible;
	isolation: isolate;
	background: #000;
}

.ai-generation-section {
	background: transparent;
}

.layouts-bg-glow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 860px;
	height: 620px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
	filter: blur(64px);
	pointer-events: none;
	z-index: 0;
}

.layouts-bg-glow.ai-glow {
	background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}

.layout-border-chip {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 30;
	margin: 0;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 0 0 8px rgba(0, 0, 0, 0.42);
}

#tab-pill {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.15);
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.ml-container {
	background: linear-gradient(180deg, #09090b 0%, #07070a 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	display: flex;
	height: 680px;
	box-shadow: 0 50px 90px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	overflow: hidden;
	position: relative;
	z-index: 2;
	margin-top: 48px;
}

.ml-sidebar {
	width: 272px;
	background: linear-gradient(180deg, rgba(10, 10, 16, 0.92) 0%, rgba(8, 8, 13, 0.92) 100%);
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.ml-sidebar-head {
	padding: 22px 20px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.ml-sidebar-head .pm-dots {
	margin-bottom: 24px;
	display: flex;
	gap: 6px;
}

.ml-sidebar-head h3 {
	font-size: 12px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
	font-weight: 700;
}

.ml-tabs {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
	flex: 1;
	position: relative;
}

.ml-mode-switch {
	margin: 10px 14px 14px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 6px;
	width: calc(100% - 28px);
	padding: 4px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
}

.ml-mode-btn {
	border: 0;
	background: transparent;
	color: #99a1b0;
	height: 34px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
	position: relative;
	border-radius: 8px;
	text-align: center;
}

.ml-mode-btn.active {
	color: #fff;
	text-shadow: none;
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.34), rgba(59, 130, 246, 0.2));
	box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.38);
}

.ml-mode-btn:not(.active):hover {
	color: #d1d5db;
	background: rgba(255, 255, 255, 0.04);
}

.ml-tab {
	background: transparent;
	border: 1px solid transparent;
	padding: 13px 14px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #8e93a3;
	font-size: 13px;
	font-weight: 550;
	cursor: pointer;
	transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
	position: relative;
	overflow: hidden;
	text-align: left;
	z-index: 2;
	letter-spacing: 0.01em;
}

.ml-tab:hover {
	color: #f3f4f6;
	background: rgba(255, 255, 255, 0.02);
}

.ml-tab.active {
	color: #ffffff;
}

.ml-tab svg {
	width: 18px;
	height: 18px;
	opacity: 0.7;
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), color 0.3s var(--ease);
	flex-shrink: 0;
}

.ml-tab.active svg {
	color: #60a5fa;
	opacity: 1;
	transform: scale(1.08);
}

.ml-sidebar-backend-menu {
	display: none;
	padding: 8px 14px 14px;
	overflow-y: auto;
	gap: 2px;
	flex-direction: column;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ml-content-wrap {
	flex: 1;
	position: relative;
	background: #050505;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ml-topbar {
	padding: 14px 22px;
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 5;
}

.ml-topbar-title {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #e4e4e7;
	font-size: 13px;
	font-weight: 500;
	font-family: 'DM Mono', monospace;
}

.ml-topbar-title svg {
	width: 16px;
	height: 16px;
	color: var(--text-dim);
}

.ml-view-opts {
	display: flex;
	gap: 8px;
}

.ml-view-btn {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-dim);
	cursor: pointer;
	transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
	padding: 0;
}

.ml-play-pause-btn {
	margin-bottom: -4px;
}

.ml-view-btn:hover,
.ml-view-btn.active {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}

.ml-panes {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent 82%);
}

.ml-pane {
	position: absolute;
	inset: 0;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.99);
	transition: transform 0.42s var(--ease), opacity 0.42s var(--ease), visibility 0.42s var(--ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.ml-pane.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.ml-pane::-webkit-scrollbar {
	display: none;
}

.ml-pane {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ml-pane.no-scroll {
	overflow: hidden;
	padding: 0;
}

.ml-backend-pane {
	position: absolute;
	inset: 0;
	padding: 22px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.99);
	transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}

.ml-admin-surface {
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(14, 17, 26, 0.86), rgba(9, 10, 16, 0.84));
	padding: 12px;
	display: grid;
	grid-template-rows: minmax(360px, 1fr) auto;
	gap: 10px;
}

.ml-admin-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	min-height: 360px;
}

.ml-admin-menu-item {
	height: 34px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #9ca3af;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.005em;
	text-align: left;
	padding: 0 10px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ml-admin-menu-item svg {
	width: 15px;
	height: 15px;
	opacity: 0.78;
	flex-shrink: 0;
}

.ml-admin-menu-item span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ml-admin-menu-item:hover {
	color: #f4f4f5;
	background: rgba(255, 255, 255, 0.04);
}

.ml-admin-menu-item.active {
	color: #fff;
	border-color: rgba(96, 165, 250, 0.34);
	background: rgba(59, 130, 246, 0.14);
	box-shadow: inset 2px 0 0 #60a5fa;
}

.ml-admin-menu-item.active svg {
	color: #7dd3fc;
	opacity: 1;
}

.ml-admin-shot {
	min-height: 360px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 36px rgba(0, 0, 0, 0.42);
	transition: background-image 0.25s ease;
}

.ml-admin-footnote {
	height: 36px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.02);
	color: #8f95a3;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	padding: 0 12px;
}

.ml-container.ml-mode-backend #tab-pill,
.ml-container.ml-mode-backend .ml-tabs {
	display: none;
}

.ml-container.ml-mode-backend .ml-sidebar-backend-menu {
	display: flex;
}

.sc-code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 15px;
}

.sc-token-muted {
	color: #71717a;
}

.sc-token-name {
	color: #7dd3fc;
}

.sc-token-attr {
	color: #fcd34d;
}

.sc-token-eq {
	color: #fff;
}

.sc-token-value {
	color: #86efac;
}

.sc-copy-btn {
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 8px;
	border-color: rgba(255, 255, 255, 0.2);
}

.sc-helper {
	color: var(--text-muted);
	font-size: 16px;
	margin-top: 30px;
}

.ml-container.ml-mode-backend .ml-topbar {
	padding: 14px 18px;
}

.ml-container.ml-mode-backend .ml-backend-pane {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.ml-container.ml-mode-backend .slider-pane {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

/* ── Layout ── */
.rg-item {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #18181b;
	border: 1px solid rgba(255, 255, 255, 0.07);
	cursor: pointer;
	min-width: 0;
}

.rg-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}

.rg-item:hover .rg-img {
	transform: scale(1.05);
}

.rg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
	z-index: 2;
}

.rg-item:hover .rg-overlay {
	opacity: 1;
}

.rg-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(10px) scale(0.9);
	transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.rg-item:hover .rg-icon {
	transform: translateY(0) scale(1);
}

.rl-masonry {
	column-count: 3;
	column-gap: 16px;
	width: 100%;
}

.rl-masonry .rg-item {
	display: block;
	width: 100%;
	margin-bottom: 16px;
	break-inside: avoid;
}

.rl-masonry .rg-item:nth-child(1) {
	height: 160px;
}

.rl-masonry .rg-item:nth-child(2) {
	height: 100px;
}

.rl-masonry .rg-item:nth-child(3) {
	height: 190px;
}

.rl-masonry .rg-item:nth-child(4) {
	height: 130px;
}

.rl-masonry .rg-item:nth-child(5) {
	height: 160px;
}

.rl-masonry .rg-item:nth-child(6) {
	height: 110px;
}

.rl-masonry .rg-item:nth-child(7) {
	height: 140px;
}

.rl-masonry .rg-item:nth-child(8) {
	height: 170px;
}

.rl-justified {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rl-justified .rg-item {
	height: 118px;
	flex-grow: 1;
}

.rl-justified .rg-item:nth-child(1) {
	flex-basis: 34%;
}

.rl-justified .rg-item:nth-child(2) {
	flex-basis: 46%;
}

.rl-justified .rg-item:nth-child(3) {
	flex-basis: 20%;
}

.rl-justified .rg-item:nth-child(4) {
	flex-basis: 28%;
}

.rl-justified .rg-item:nth-child(5) {
	flex-basis: 30%;
}

.rl-justified .rg-item:nth-child(6) {
	flex-basis: 17%;
}

.rl-justified .rg-item:nth-child(7) {
	flex-basis: 25%;
}

.rl-justified .rg-item:nth-child(8) {
	flex-basis: 100%;
	height: 128px;
}

.rl-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.rl-grid .rg-item {
	aspect-ratio: 1/1;
	height: auto;
}

.rl-metro {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 92px;
	gap: 10px;
}

.rl-metro .rg-item:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.rl-metro .rg-item:nth-child(4) {
	grid-column: span 2;
	grid-row: span 1;
}

.rl-metro .rg-item:nth-child(5) {
	grid-column: span 1;
	grid-row: span 2;
}

.rl-carousel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	perspective: 1200px;
}

.rc-card {
	position: absolute;
	width: 45%;
	height: 286px;
	border-radius: 14px;
	transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.rc-card.active {
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
	border-color: rgba(255, 255, 255, 0.2);
}

.rl-slider {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rs-slide.active {
	opacity: 1;
	z-index: 1;
}

.rs-ui {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	z-index: 10;
}

.rs-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: auto;
	cursor: pointer;
	transition: 0.3s;
}

.rs-arrow:hover {
	background: #fff;
	color: #000;
}

.rs-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	pointer-events: auto;
	z-index: 10;
	background: rgba(0, 0, 0, 0.4);
	padding: 6px 10px;
	border-radius: 20px;
	backdrop-filter: blur(8px);
}

.rs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: 0.3s;
}

.rs-dot.active {
	background: #fff;
	transform: scale(1.3);
}

/* ── Minimal Shortcode Section ── */
.sc-minimal-wrap {
	max-width: 800px;
	margin-top: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sc-connector {
	width: 1px;
	height: 34px;
	margin-top: 10px;
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.72) 0%, rgba(139, 92, 246, 0.26) 60%, rgba(139, 92, 246, 0) 100%);
	box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
}

.sc-minimal-box {
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 440px;
	margin: 32px 0 0;
	transition: 0.3s;
	backdrop-filter: blur(8px);
}

.sc-minimal-box:hover {
	border-color: rgba(59, 130, 246, 0.5);
	background: rgba(59, 130, 246, 0.05);
}

/* ── Developers API (Minimal Headless) ── */
#developers {
	padding: 86px 0 120px;
	border: none;
	position: relative;
	background: transparent;
}

.api-minimal-wrap {
	max-width: 1280px;
	margin: 0 auto;
}

.api-two-col {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(640px, 1.22fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.api-copy {
	max-width: 470px;
}

.api-copy .tag {
	margin-bottom: 22px;
}

.api-copy h2 {
	margin: 0 0 20px;
	font-family: var(--font-head);
	font-size: clamp(3rem, 5.6vw, 5rem);
	font-weight: 800;
	line-height: 1.04;
	color: #fff;
	letter-spacing: -0.045em;
}

.api-copy p {
	max-width: 430px;
	margin: 0;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1.7;
}

.api-copy .text-gradient {
	background: linear-gradient(90deg, #38bdf8 0%, #3b82f6 100%) text;
	-webkit-text-fill-color: transparent;
}

.api-chip {
	background: transparent;
	border-color: var(--primary);
	color: var(--primary);
}

.api-ui {
	width: 100%;
	background: rgba(255, 255, 255, 0.01);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	backdrop-filter: blur(12px);
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 2;
}

.api-body {
	display: flex;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.api-sidebar {
	width: 200px;
	background: transparent;
	border-right: 1px solid rgba(255, 255, 255, 0.05);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.api-endpoint {
	font-size: 13px;
	font-family: 'DM Mono', monospace;
	color: var(--text-dim);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: 0.2s;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}

.api-endpoint:hover {
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
}

.api-endpoint.active {
	background: rgba(56, 189, 248, 0.1);
	color: #38bdf8;
	border: 1px solid rgba(56, 189, 248, 0.2);
}

.method-get {
	color: #34d399;
	font-weight: 700;
	font-size: 11px;
	background: rgba(52, 211, 153, 0.15);
	padding: 2px 6px;
	border-radius: 4px;
}

.method-post {
	color: #818cf8;
	font-weight: 700;
	font-size: 11px;
	background: rgba(129, 140, 248, 0.15);
	padding: 2px 6px;
	border-radius: 4px;
}

.api-main {
	flex: 1;
	background: transparent;
	padding: 24px;
	font-family: 'DM Mono', monospace;
	font-size: 14px;
	line-height: 1.6;
	color: #d4d4d8;
	overflow-y: auto;
}

.c-key {
	color: #7dd3fc;
}

.c-str {
	color: #86efac;
}

.c-num {
	color: #f472b6;
}

.api-response-header {
	display: flex;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	margin-bottom: 16px;
	font-size: 12px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var(--font-body);
}

/* ── Proofing ── */
.proof-ui::before {
	background: radial-gradient(600px circle at 50% 50%, rgba(236, 72, 153, 0.1), transparent);
}

.watermark-demo-grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 18px;
}

.watermark-preview {
	grid-column: 1 / -1;
	position: relative;
	height: 200px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	background: url('../images/7.jpg') center/cover;
}

.watermark-pattern {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-30deg, rgba(0, 0, 0, 0) 0 42px, rgba(255, 255, 255, 0.18) 42px 48px);
}

.watermark-lock-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.watermark-info-card {
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	background: #111115;
}

.watermark-info-label {
	margin-bottom: 6px;
	color: var(--text-dim);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.watermark-info-text {
	color: #e4e4e7;
	font-size: 13px;
	line-height: 1.45;
}

.proofing-grid-item {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: 0.3s;
}

.proofing-grid-item.approved {
	border: 2px solid var(--emerald);
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.proofing-grid-item.rejected {
	border: 2px solid var(--danger);
	filter: grayscale(40%);
	opacity: 0.8;
}

.proofing-grid-item:not(.approved):not(.rejected):hover .proofing-overlay {
	opacity: 1;
}

.proofing-thumb {
	aspect-ratio: 1;
	background-position: center;
	background-size: cover;
}

.proofing-workspace {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
	background: #09090b;
}

.proofing-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.01);
}

.proofing-toolbar h3 {
	margin: 0 0 4px;
	color: #fff;
	font-family: var(--font-head);
	font-size: 16px;
}

.proofing-toolbar p {
	margin: 0;
	color: var(--text-dim);
	font-size: 12px;
}

.proofing-url-pill {
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-dim);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
}

.proofing-status-row {
	display: flex;
	gap: 8px;
}

.proofing-status-pill {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

.proofing-status-pill.approved {
	color: var(--emerald);
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.proofing-status-pill.rejected {
	color: var(--danger);
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.proofing-grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 24px;
	overflow-y: auto;
	background: radial-gradient(circle at top, rgba(255, 255, 255, 0.02), transparent 80%);
}

.proofing-state-badge,
.proofing-comment-badge {
	position: absolute;
	top: 8px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.proofing-state-badge {
	right: 8px;
}

.proofing-state-badge.approved {
	background: var(--emerald);
	color: #000;
}

.proofing-state-badge.rejected {
	background: var(--danger);
	color: #fff;
}

.proofing-comment-badge {
	left: 8px;
	background: #3b82f6;
	color: #fff;
}

.proofing-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	backdrop-filter: blur(2px);
}

.proofing-action-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.proofing-action-btn.approve {
	background: var(--emerald);
	color: #000;
}

.proofing-action-btn.approve:hover {
	transform: scale(1.1);
	box-shadow: 0 0 15px var(--emerald);
}

.proofing-action-btn.reject {
	background: var(--danger);
	color: #fff;
}

.proofing-action-btn.reject:hover {
	transform: scale(1.1);
	box-shadow: 0 0 15px var(--danger);
}

.proofing-section {
	margin-bottom: -118px;
	padding-bottom: 214px !important;
	border-bottom: 0 !important;
	background: radial-gradient(circle at 74% 72%, rgba(236, 72, 153, 0.1), transparent 34%), linear-gradient(180deg, transparent 64%, rgba(5, 7, 13, 0.66) 84%, rgba(0, 0, 0, 0.96) 100%);
}

.proofing-section::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: min(1120px, calc(100% - 44px));
	height: 170px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at bottom, rgba(96, 165, 250, 0.12), rgba(244, 114, 182, 0.08) 36%, transparent 70%);
	filter: blur(18px);
	opacity: 0.76;
	pointer-events: none;
}

.proofing-section+.modern-cta {
	margin-top: 0;
	border-top: 0;
}

.icon-btn-reset {
	padding: 0;
	appearance: none;
	background: transparent;
	border: 0;
}

.icon-btn-reset:focus-visible,
.badge-del:focus-visible,
.rs-arrow:focus-visible,
.menu-toggle:focus-visible,
.ml-view-btn:focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

/* ── AI Image Generation (Pro UI) ── */
.aig-window {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--shadow-pro);
	height: 700px;
	position: relative;
	z-index: 2;
}

.aig-header {
	padding: 16px 24px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.01);
}

.aig-window-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-dim);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aig-header-spacer {
	width: 44px;
}

.aig-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.aig-sidebar {
	width: 260px;
	border-right: 1px solid var(--border);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: rgba(255, 255, 255, 0.01);
	overflow-y: auto;
}

.aig-main {
	flex: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	position: relative;
	background: radial-gradient(circle at top, rgba(168, 85, 247, 0.05), transparent 80%);
}

.aig-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	flex: 1;
	margin-bottom: 24px;
}

.aig-img {
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
	cursor: pointer;
}

.aig-img:hover {
	transform: scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	z-index: 10;
	border-color: rgba(168, 85, 247, 0.4);
}

.aig-img-actions {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	display: flex;
	gap: 8px;
	transition: 0.3s var(--ease);
}

.aig-img:hover .aig-img-actions {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

.aig-action-btn {
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 10px;
	font-family: var(--font-mono);
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	transition: 0.2s;
}

.aig-action-btn:hover {
	background: var(--purple);
	color: #fff;
	border-color: var(--purple);
}

.aig-prompt-wrap {
	background: rgba(15, 15, 18, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	padding: 8px 8px 8px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(12px);
	position: relative;
	z-index: 10;
}

.aig-input {
	flex: 1;
	background: transparent;
	border: none !important;
	outline: none;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 14px;
}

.aig-input::placeholder {
	color: var(--text-dim);
}

.aig-submit {
	background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
	color: #fff;
	border: none;
	padding: 12px 24px;
	border-radius: 100px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: 0.3s;
	box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

.aig-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
}

/* Setting items inside AI sidebar */
.aig-set-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aig-set-lbl {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.aig-set-box {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 12px;
	border-radius: 10px;
	font-size: 13px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}

.aig-set-box:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}

.aig-select-value {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aig-set-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.aig-opt {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 10px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	cursor: pointer;
	transition: 0.2s;
}

.aig-opt:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
}

.aig-opt.active {
	background: rgba(168, 85, 247, 0.1);
	border-color: rgba(168, 85, 247, 0.4);
	color: #c084fc;
	font-weight: 600;
}

/* ── WooCommerce Media ── */
.woo-section {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: radial-gradient(circle at 18% 12%, rgba(16, 185, 129, 0.1), transparent 34%), radial-gradient(circle at 86% 28%, rgba(59, 130, 246, 0.1), transparent 32%), #000;
}

.woo-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 28%, rgba(255, 255, 255, 0.012));
	pointer-events: none;
}

.woo-orb {
	position: absolute;
	border-radius: 999px;
	filter: blur(70px);
	pointer-events: none;
	opacity: 0.52;
}

.woo-orb-one {
	left: -120px;
	top: 12%;
	width: 360px;
	height: 360px;
	background: rgba(16, 185, 129, 0.18);
}

.woo-orb-two {
	right: -140px;
	bottom: 4%;
	width: 420px;
	height: 420px;
	background: rgba(59, 130, 246, 0.16);
}

.woo-grid {
	position: relative;
	z-index: 2;
	align-items: center;
}

.woo-tag {
	border-color: rgba(16, 185, 129, 0.28);
	color: #34d399;
	background: rgba(16, 185, 129, 0.1);
}

.woo-gradient {
	background: linear-gradient(90deg, #34d399 0%, #60a5fa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.woo-icon {
	background: rgba(16, 185, 129, 0.14);
	color: #34d399;
}

.woo-showcase {
	position: relative;
	perspective: 1200px;
}

.woo-card {
	position: relative;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 28px;
	background: linear-gradient(145deg, rgba(12, 18, 28, 0.86), rgba(8, 10, 18, 0.94));
	box-shadow: 0 34px 90px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	overflow: hidden;
	transform: rotateY(-4deg) rotateX(2deg);
	transition: transform 0.4s var(--ease), border-color 0.3s ease;
}

.woo-card:hover {
	transform: rotateY(0) rotateX(0);
	border-color: rgba(52, 211, 153, 0.28);
}

.woo-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 18% 0%, rgba(52, 211, 153, 0.14), transparent 34%), radial-gradient(circle at 92% 18%, rgba(96, 165, 250, 0.12), transparent 32%);
	pointer-events: none;
}

.woo-card-top {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.woo-card-top span {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
}

.woo-card-top strong {
	display: block;
	color: #fff;
	font-size: 18px;
	letter-spacing: -0.02em;
}

.woo-stock {
	flex-shrink: 0;
	padding: 7px 10px;
	border: 1px solid rgba(52, 211, 153, 0.26);
	border-radius: 999px;
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	font-size: 12px;
	font-weight: 800;
}

.woo-pills {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 16px;
}

.woo-pills span {
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.045);
	color: #cbd5e1;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.woo-product-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 108px;
	gap: 12px;
}

.woo-product-main,
.woo-product-side div {
	background-position: center;
	background-size: cover;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.woo-product-main {
	min-height: 340px;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}

.woo-product-main::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.62));
	pointer-events: none;
}

.woo-media-badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.52);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #e4e4e7;
	font-size: 12px;
	font-weight: 800;
	backdrop-filter: blur(10px);
}

.woo-hotspot {
	position: absolute;
	right: 24%;
	top: 49%;
	z-index: 5;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 999px;
	background: #10b981;
	color: #001b12;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.15), 0 0 30px rgba(16, 185, 129, 0.46);
	animation: wooHotspotPulse 1.9s ease-in-out infinite;
}

.woo-hotspot span {
	width: 8px;
	height: 8px;
	border-radius: inherit;
	background: currentColor;
}

.woo-hotspot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.woo-hotspot-card {
	position: absolute;
	right: 18px;
	top: calc(49% + 36px);
	z-index: 6;
	width: min(260px, calc(100% - 36px));
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background: rgba(5, 8, 14, 0.82);
	color: #fff;
	box-shadow: 0 20px 46px rgba(0, 0, 0, 0.44), 0 0 26px rgba(16, 185, 129, 0.12);
	backdrop-filter: blur(16px);
	opacity: 0;
	transform: translateY(8px) scale(0.97);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s var(--ease);
}

.woo-product-main:hover .woo-hotspot-card,
.woo-product-main:focus-within .woo-hotspot-card {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.woo-hotspot-thumb {
	width: 58px;
	height: 58px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.woo-hotspot-card span {
	display: block;
	margin-bottom: 4px;
	color: #34d399;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.woo-hotspot-card strong {
	display: block;
	color: #fff;
	font-size: 14px;
	line-height: 1.2;
}

.woo-hotspot-card p {
	margin: 5px 0 0;
	color: #cbd5e1;
	font-size: 12px;
	line-height: 1.35;
}

.woo-product-side {
	display: grid;
	gap: 12px;
}

.woo-product-side div {
	position: relative;
	border-radius: 16px;
	min-height: 0;
	overflow: hidden;
}

.woo-product-side div::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.62));
	pointer-events: none;
}

.woo-product-side span {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 5px 7px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	backdrop-filter: blur(8px);
}

.woo-meta-row {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 14px;
}

.woo-meta-row div {
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.035);
}

.woo-meta-row span {
	display: block;
	margin-bottom: 5px;
	color: var(--text-dim);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
}

.woo-meta-row strong {
	display: block;
	color: #f4f4f5;
	font-size: 12px;
	line-height: 1.35;
}

@keyframes wooHotspotPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.15), 0 0 30px rgba(16, 185, 129, 0.46);
	}

	50% {
		transform: scale(1.08);
		box-shadow: 0 0 0 11px rgba(16, 185, 129, 0.08), 0 0 38px rgba(16, 185, 129, 0.58);
	}
}

/* ── Modern CTA ── */
.lk-cloudfold .modern-cta {
	position: relative;
	padding: 28px 0 120px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 0;
	background: linear-gradient(180deg, rgba(6, 8, 16, 0.44) 0%, rgba(0, 0, 0, 0) 220px), radial-gradient(circle at 50% 8%, rgba(59, 130, 246, 0.09), transparent 30%), var(--bg);
}

.modern-cta::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 50%;
	width: min(1080px, calc(100% - 44px));
	height: 250px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.12), rgba(168, 85, 247, 0.07) 38%, rgba(244, 114, 182, 0.05) 56%, transparent 76%);
	filter: blur(26px);
	pointer-events: none;
}

.modern-cta::after {
	display: none;
}

.cta-glow {
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 920px;
	height: 520px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.17) 0%, rgba(168, 85, 247, 0.08) 38%, transparent 72%);
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.cta-box {
	background: transparent;
	border: none;
	padding: 0;
	position: relative;
	z-index: 3;
	max-width: 1040px;
	margin: -68px auto 0;
	box-shadow: none;
}

.cta-panel {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 26px;
	padding: 44px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 30px;
	align-items: center;
	background: linear-gradient(140deg, rgba(10, 14, 26, 0.88) 0%, rgba(6, 7, 12, 0.96) 48%, rgba(15, 10, 18, 0.9) 100%);
	box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), 0 -18px 54px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.09);
	overflow: hidden;
}

.cta-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.46), rgba(255, 255, 255, 0.05), rgba(244, 114, 182, 0.34));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.85;
}

.cta-panel::after {
	content: "";
	position: absolute;
	right: -110px;
	top: -130px;
	width: 320px;
	height: 320px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(244, 114, 182, 0.16), transparent 62%);
	pointer-events: none;
}

.cta-left {
	text-align: left;
}

.cta-title {
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.08;
	margin-bottom: 14px;
	color: #fff;
	letter-spacing: -0.03em;
}

.cta-title .text-gradient {
	background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.cta-desc {
	font-size: 17px;
	color: var(--text-muted);
	line-height: 1.65;
	max-width: 600px;
	margin: 0 0 24px 0;
}

.cta-features {
	display: flex;
	justify-content: flex-start;
	gap: 18px;
	margin-bottom: 0;
	flex-wrap: wrap;
}

.cta-features span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: #d4d4d8;
}

.cta-features svg {
	width: 18px;
	height: 18px;
	color: var(--emerald);
	stroke-width: 3px;
}

.cta-right {
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.cta-price-card {
	position: relative;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cta-price-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-dim);
	font-weight: 700;
	margin-bottom: 6px;
}

.cta-price-value {
	font-family: var(--font-head);
	font-size: 40px;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.03em;
}

.cta-price-meta {
	font-size: 13px;
	color: #a1a1aa;
	margin-top: 8px;
}

.cta-btn {
	font-size: 17px;
	padding: 18px 24px;
	background: #fff;
	color: #000;
	box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
	transition: 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-weight: 700;
	border-radius: 100px;
	text-decoration: none;
	cursor: pointer;
	width: 100%;
}

.cta-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
	background: #f4f4f5;
	color: #000;
}

.cta-mini {
	text-align: center;
	font-size: 12px;
	color: var(--text-dim);
}

.cta-faq-wrap {
	position: relative;
	z-index: 2;
	max-width: 1040px;
	margin: 0 auto 0;
	padding: 18px 18px 96px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(15, 25, 43, 0.84), rgba(18, 10, 28, 0.8));
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46), 0 -20px 70px rgba(96, 165, 250, 0.1), 0 -10px 46px rgba(236, 72, 153, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(20px) saturate(145%);
	-webkit-backdrop-filter: blur(20px) saturate(145%);
	overflow: hidden;
}

.cta-faq-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 14% -8%, rgba(96, 165, 250, 0.2), transparent 34%), radial-gradient(circle at 88% 4%, rgba(244, 114, 182, 0.18), transparent 32%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 26%);
	pointer-events: none;
}

.cta-faq-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(120deg, rgba(96, 165, 250, 0.46), rgba(255, 255, 255, 0.08) 38%, rgba(244, 114, 182, 0.4));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.72;
	pointer-events: none;
}

.cta-faq-title {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 8px 12px;
	border: 1px solid rgba(96, 165, 250, 0.24);
	border-radius: 999px;
	background: rgba(96, 165, 250, 0.08);
	color: #bfdbfe;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	text-align: left;
}

.cta-faq-title::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, #60a5fa, #f472b6);
	box-shadow: 0 0 18px rgba(96, 165, 250, 0.8);
}

.cta-faq-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 12px;
}

.cta-faq-item {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	background: rgba(8, 10, 18, 0.58);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
	overflow: hidden;
	transition: transform 0.22s var(--ease), border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.cta-faq-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #60a5fa, #a78bfa, #f472b6);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.cta-faq-item:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(15, 17, 28, 0.72);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cta-faq-item[open] {
	border-color: rgba(96, 165, 250, 0.28);
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.09), rgba(12, 14, 24, 0.74));
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(96, 165, 250, 0.04) inset;
}

.cta-faq-item[open] {
	grid-column: 1 / -1;
}

.cta-faq-item[open]::before {
	opacity: 1;
}

.cta-faq-item summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 16px 16px 15px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #f4f4f5;
}

.cta-faq-item summary::-webkit-details-marker {
	display: none;
}

.cta-faq-item summary:focus-visible {
	outline: 2px solid rgba(96, 165, 250, 0.85);
	outline-offset: -4px;
	border-radius: 16px;
}

.cta-faq-item .faq-arrow {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #c4c9d4;
	background: rgba(255, 255, 255, 0.04);
	flex-shrink: 0;
	transition: transform 0.22s var(--ease), color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.cta-faq-item[open] .faq-arrow {
	transform: rotate(180deg);
	border-color: rgba(96, 165, 250, 0.35);
	background: rgba(96, 165, 250, 0.14);
	color: #93c5fd;
}

.cta-faq-item .faq-body {
	margin: 0 18px 17px;
	padding: 13px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	line-height: 1.65;
	color: #b6bbc7;
	max-width: 760px;
}

.lk-cloudfold .footer {
	padding: 0 20px 34px;
	color: #a6adbb;
	background:
		radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.08), transparent 34%),
		#000;
	position: relative;
	z-index: 5;
}

.lk-cloudfold .footer-inner {
	width: min(100%, 1280px);
	margin: 0 auto;
	padding: 24px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.lk-cloudfold .footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.lk-cloudfold .footer-logo-mark {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	filter: drop-shadow(0 10px 18px rgba(59, 130, 246, 0.25));
}

.lk-cloudfold .footer-brand-name {
	color: #f7f8fb;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.lk-cloudfold .footer-copy {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: rgba(199, 205, 218, 0.68);
}

.lk-cloudfold .footer-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

.lk-cloudfold .footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: rgba(219, 224, 234, 0.72);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.lk-cloudfold .footer-links a:hover,
.lk-cloudfold .footer-links a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.10);
	transform: translateY(-1px);
}

.lk-cloudfold .footer-links a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}

/* ── Floating Back Button ── */
.back-float {
	position: fixed;
	right: 24px;
	bottom: 100px;
	z-index: 1200;
	display: inline-flex;
	align-items: center;
	padding: 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(0, 0, 0, 0.72);
	color: #f4f4f5;
	text-decoration: none;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: translateX(120%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.32s var(--ease), opacity 0.32s var(--ease), border-color 0.2s ease, background 0.2s ease;
}

.back-float svg {
	width: 14px;
	height: 14px;
}

.back-float.show {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

.back-float:hover {
	background: rgba(14, 14, 16, 0.9);
	border-color: rgba(255, 255, 255, 0.28);
}

.back-float:focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

/* ── Media Queries ── */
@media (max-width: 1180px) {

	html:has(body.lk-landingkit.lk-cloudfold),
	body.lk-landingkit.lk-cloudfold {
		max-width: 100%;
		overflow-x: hidden;
	}

	.lk-cloudfold section {
		overflow-x: hidden;
	}

	.lk-cloudfold .nav-links,
	.lk-cloudfold .nav-actions {
		display: none;
	}

	.lk-cloudfold .menu-toggle {
		display: flex;
		z-index: 1001;
		flex-shrink: 0;
	}

	.lk-cloudfold .nav-container {
		width: min(calc(100% - 32px), 1280px);
		padding: 8px 10px 8px 14px;
	}

	.lk-cloudfold .header.scrolled .nav-container {
		transform: none;
	}

	.lk-cloudfold .hero-grid,
	.lk-cloudfold .split-grid,
	.lk-cloudfold .split-grid.alt {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.lk-cloudfold .hero-actions,
	.lk-cloudfold .hero-stats {
		justify-content: center;
	}

	.lk-cloudfold .bento-grid {
		grid-template-columns: 1fr 1fr;
	}

	.lk-cloudfold .co-flow {
		flex-wrap: wrap;
	}

	.lk-cloudfold .co-step {
		min-width: 200px;
	}

	.lk-cloudfold .ticker-section,
	.lk-cloudfold .proofing-section,
	.lk-cloudfold .modern-cta {
		overflow-x: hidden;
	}

	.lk-cloudfold .ticker-layer {
		left: 0;
		width: 100%;
		max-width: 100%;
		min-height: 92px;
		overflow: hidden;
		contain: layout paint;
	}

	.lk-cloudfold .layer-1,
	.lk-cloudfold .layer-2 {
		transform: none;
	}

	.lk-cloudfold .ticker-track {
		position: absolute;
		top: 20px;
		left: 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		animation: none;
		transform: none;
	}

	.lk-cloudfold .ticker-track .ticker-item:nth-child(n+2) {
		display: none;
	}
}

@media (max-width: 768px) {
	.lk-cloudfold .container {
		padding: 0 18px;
	}

	.lk-cloudfold .header {
		padding: 12px 0;
	}

	.lk-cloudfold .nav-container {
		width: min(calc(100% - 24px), 1280px);
		min-height: 62px;
		border-radius: 22px;
		background: rgba(10, 12, 22, 0.78);
	}

	.lk-cloudfold .logo img {
		width: clamp(132px, 42vw, 168px);
	}

	.lk-cloudfold .hero {
		padding: 142px 0 76px;
		min-height: auto;
	}

	.lk-cloudfold .hero-pill {
		max-width: 100%;
		font-size: 12px;
		margin-bottom: 28px;
	}

	.lk-cloudfold .hero h1 {
		font-size: clamp(2.75rem, 13vw, 4.5rem);
	}

	.lk-cloudfold .hero h1 .line {
		white-space: normal;
	}

	.lk-cloudfold .hero-sub {
		font-size: 17px;
	}

	.lk-cloudfold .hero-actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-bottom: 50px;
	}

	.lk-cloudfold .hero-actions .btn {
		width: min(100%, 420px);
		margin-inline: auto;
		min-height: 62px;
	}

	.lk-cloudfold #performance {
		padding: 74px 0;
		scroll-margin-top: 88px;
	}

	.lk-cloudfold #performance .split-content {
		text-align: left;
	}

	.lk-cloudfold #performance .split-content h2 {
		font-size: clamp(2.2rem, 10vw, 3.2rem);
	}

	.lk-cloudfold #performance .split-content>p {
		font-size: 16px;
		line-height: 1.65;
	}

	.lk-cloudfold #performance .split-features {
		gap: 10px;
	}

	.lk-cloudfold #performance .s-feature {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		padding: 14px;
		text-align: left;
		border-radius: 16px;
	}

	.lk-cloudfold #performance .s-feature-icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
	}

	.lk-cloudfold #performance .s-feature-icon svg {
		width: 18px;
		height: 18px;
	}

	.lk-cloudfold #performance .s-feature-text h4 {
		font-size: 16px;
		line-height: 1.25;
		margin-bottom: 5px;
	}

	.lk-cloudfold #performance .s-feature-text p {
		font-size: 13px;
		line-height: 1.5;
	}

	.lk-cloudfold .perf-app-ui {
		border-radius: 20px;
	}

	.lk-cloudfold .perf-app-ui .ui-header {
		padding: 14px;
		gap: 10px;
	}

	.lk-cloudfold .perf-app-ui .ui-title {
		font-size: 13px;
	}

	.lk-cloudfold .perf-app-ui .ui-header>div:last-child {
		padding: 4px 9px !important;
		font-size: 11px !important;
	}

	.lk-cloudfold .p-app-body {
		padding: 14px;
		gap: 12px;
	}

	.lk-cloudfold .lh-scores {
		gap: 8px;
		padding: 12px;
		border-radius: 14px;
	}

	.lk-cloudfold .lh-item {
		gap: 8px;
	}

	.lk-cloudfold .lh-ring {
		width: 46px;
		height: 46px;
	}

	.lk-cloudfold .lh-num {
		font-size: 14px;
	}

	.lk-cloudfold .lh-label {
		font-size: 9px;
		line-height: 1.25;
		letter-spacing: 0.03em;
	}

	.lk-cloudfold .p-metrics {
		flex-direction: column;
		gap: 8px;
	}

	.lk-cloudfold .p-metric-card {
		padding: 10px 12px;
	}

	.lk-cloudfold .p-term-body {
		max-height: 84px;
		font-size: 10px;
		line-height: 1.5;
		padding: 12px;
	}

	.lk-cloudfold #ai-engine {
		padding: 88px 0 !important;
	}

	.lk-cloudfold #ai-engine .ui-box.ai-ui {
		height: auto;
		max-height: none;
		overflow: hidden;
	}

	.lk-cloudfold #ai-engine .ui-header {
		padding: 14px;
		gap: 10px;
		flex-wrap: wrap;
	}

	.lk-cloudfold #ai-engine .ui-title {
		font-size: 13px;
	}

	.lk-cloudfold #ai-engine .pm-dots {
		display: none;
	}

	.lk-cloudfold .ai-metadata-demo {
		padding: 14px !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		overflow: visible !important;
	}

	.lk-cloudfold .ai-metadata-media {
		width: 100% !important;
		display: grid !important;
		grid-template-columns: minmax(112px, 0.72fr) 1fr !important;
		align-items: stretch;
		gap: 12px !important;
	}

	.lk-cloudfold .ai-metadata-media>div:first-child {
		aspect-ratio: 4 / 3 !important;
		min-height: 132px;
	}

	.lk-cloudfold .ai-metadata-media>div:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 0;
	}

	.lk-cloudfold .ai-metadata-panel {
		gap: 10px !important;
	}

	.lk-cloudfold .ai-metadata-card {
		padding: 12px !important;
		border-radius: 14px !important;
	}

	.lk-cloudfold .ai-metadata-alt>div:nth-child(2) {
		font-size: 12px !important;
		line-height: 1.5 !important;
		margin-bottom: 12px !important;
	}

	.lk-cloudfold .ai-metadata-tags {
		display: none;
	}

	.lk-cloudfold .ai-metadata-save {
		margin-top: 0 !important;
	}

	.ml-container {
		flex-direction: column;
		height: auto;
		min-height: 0;
		border-radius: 20px;
		margin-top: 32px;
	}

	.ml-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.ml-sidebar-head {
		display: none;
	}

	.ml-tabs {
		flex: 0 0 auto;
		flex-direction: row;
		padding: 10px 12px 8px;
		overflow-x: auto;
		gap: 6px;
		scroll-snap-type: x mandatory;
	}

	.ml-tabs::-webkit-scrollbar {
		display: none;
	}

	#tab-pill {
		display: none !important;
	}

	.ml-mode-switch {
		margin: 0 12px 10px;
		gap: 4px;
		width: calc(100% - 24px);
		padding: 3px;
		border-radius: 12px;
	}

	.ml-mode-btn {
		height: 30px;
		font-size: 11px;
		border-radius: 9px;
	}

	.ml-sidebar-backend-menu {
		padding: 0 12px 10px;
		flex-direction: row;
		overflow-x: auto;
		gap: 6px;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}

	.ml-sidebar-backend-menu::-webkit-scrollbar {
		display: none;
	}

	.ml-admin-layout {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.ml-container.ml-mode-backend .ml-backend-pane {
		padding: 12px;
	}

	.ml-container.ml-mode-backend .ml-content-wrap {
		min-height: 330px;
	}

	.ml-container.ml-mode-backend .ml-panes {
		min-height: 330px;
	}

	.ml-admin-surface {
		grid-template-rows: auto auto;
		gap: 8px;
		padding: 10px;
		border-radius: 16px;
	}

	.ml-admin-menu-item {
		width: 42px;
		height: 38px;
		min-width: 42px;
		flex: 0 0 42px;
		justify-content: center;
		padding: 0;
		border-radius: 12px;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.ml-admin-menu-item span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ml-admin-menu-item svg {
		width: 18px;
		height: 18px;
	}

	.ml-admin-menu-item.active {
		box-shadow: none;
	}

	.ml-admin-shot {
		min-height: 0;
		height: 218px;
		border-radius: 14px;
		background-size: cover;
		background-position: top center;
	}

	.ml-admin-footnote {
		height: auto;
		min-height: 34px;
		padding: 8px 10px;
		font-size: 10px;
		line-height: 1.35;
	}

	.ml-tab {
		width: 42px;
		height: 42px;
		flex: 0 0 42px;
		justify-content: center;
		padding: 0;
		border-radius: 14px;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.ml-tab .tab-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ml-tab svg {
		width: 19px;
		height: 19px;
	}

	.ml-tab.active {
		background: rgba(59, 130, 246, 0.16);
		box-shadow: none;
		border: 1px solid rgba(59, 130, 246, 0.34);
	}

	.ml-tab.active::before {
		display: none;
	}

	.ml-topbar {
		display: none;
	}

	.ml-content-wrap {
		min-height: 390px;
	}

	.ml-panes {
		min-height: 390px;
	}

	.ml-pane {
		padding: 14px;
	}

	.rl-masonry {
		column-count: 2;
		column-gap: 10px;
	}

	.rl-masonry .rg-item {
		margin-bottom: 10px;
	}

	.rl-masonry .rg-item:nth-child(n) {
		height: 118px;
	}

	.rl-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.rl-metro {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 94px;
		gap: 10px;
	}

	.rl-metro .rg-item:nth-child(n) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.rl-metro .rg-item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.rl-justified .rg-item {
		flex-basis: calc(50% - 5px) !important;
		height: 104px;
	}

	.rl-justified .rg-item:nth-child(8) {
		flex-basis: 100% !important;
		height: 120px;
	}

	.co-flow {
		flex-direction: column;
	}

	.co-arrow {
		transform: rotate(90deg);
		margin: 8px 0;
	}

	.co-step {
		width: 100%;
		min-width: auto;
	}

	.woo-grid .split-content {
		text-align: center;
	}

	.woo-grid .split-features {
		gap: 10px;
	}

	.woo-grid .s-feature {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		align-items: start;
		gap: 12px;
		padding: 14px;
		text-align: left;
		border-radius: 16px;
	}

	.woo-grid .s-feature-icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		margin-top: 0;
	}

	.woo-grid .s-feature-icon svg {
		width: 18px;
		height: 18px;
	}

	.woo-grid .s-feature-text h4 {
		font-size: 16px;
		line-height: 1.25;
		margin-bottom: 5px;
	}

	.woo-grid .s-feature-text p {
		font-size: 13px;
		line-height: 1.5;
		max-width: none;
	}

	.woo-card {
		transform: none;
		padding: 14px;
		border-radius: 22px;
	}

	.woo-product-grid {
		grid-template-columns: 1fr;
	}

	.woo-product-main {
		min-height: 260px;
	}

	.woo-hotspot {
		right: 18%;
		top: 48%;
	}

	.woo-hotspot-card {
		right: 12px;
		top: calc(48% + 34px);
		width: min(248px, calc(100% - 24px));
	}

	.woo-product-side {
		grid-template-columns: repeat(3, 1fr);
	}

	.woo-product-side div {
		min-height: 86px;
	}

	.woo-meta-row {
		grid-template-columns: 1fr;
	}

	#developers {
		padding: 74px 0 96px;
	}

	.api-two-col {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.api-copy {
		max-width: 680px;
		text-align: center;
		margin-inline: auto;
	}

	.api-copy p {
		margin-inline: auto;
	}

	.api-body {
		flex-direction: column;
	}

	.api-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--border-bright);
		flex-direction: row;
		overflow-x: auto;
		padding: 12px;
	}

	.api-endpoint {
		white-space: nowrap;
	}

	.proofing-section {
		margin-bottom: -72px;
		padding-bottom: 142px !important;
	}

	.proofing-section::after {
		bottom: 6px;
		width: calc(100% - 24px);
		height: 120px;
		filter: blur(16px);
	}

	.track-1,
	.track-2 {
		font-size: 40px;
	}

	.track-1 .ticker-item span,
	.track-2 .ticker-item span {
		font-size: 20px;
	}

	.ticker-section {
		min-height: 220px;
	}

	.ticker-section::after {
		height: 104px;
	}

	.lk-cloudfold .modern-cta {
		padding: 24px 0 88px;
	}

	.modern-cta::before {
		top: -18px;
		width: calc(100% - 24px);
		height: 170px;
		filter: blur(22px);
	}

	.cta-box {
		padding: 0;
		border-radius: 18px;
	}

	.cta-box {
		margin-top: -34px;
	}

	.cta-panel {
		grid-template-columns: 1fr;
		padding: 28px 20px;
		gap: 20px;
		border-radius: 22px;
	}

	.cta-left {
		text-align: center;
	}

	.cta-title {
		font-size: clamp(2rem, 10vw, 2.45rem);
		text-wrap: balance;
	}

	.cta-title .text-gradient {
		display: inline;
	}

	.cta-features {
		justify-content: center;
	}

	.cta-right {
		min-width: 0;
	}

	.back-float {
		right: 14px;
		bottom: 16px;
		padding: 10px 12px;
		font-size: 12px;
	}

	.cta-faq-wrap {
		margin-bottom: 0;
		padding: 14px 14px 54px;
		border-radius: 24px;
	}

	.cta-faq-title {
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}

	.cta-faq-list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.cta-faq-item summary {
		padding: 15px 14px;
		font-size: 13px;
	}

	.cta-faq-item .faq-body {
		margin: 0 14px 15px;
		padding-top: 12px;
		font-size: 12px;
	}
}

@media (max-width: 640px) {
	.lk-cloudfold .bento-grid {
		grid-template-columns: 1fr;
	}

	.lk-cloudfold .bcard.span-2,
	.lk-cloudfold .hero-stats {
		grid-template-columns: 1fr;
		padding: 0;
		border: 0;
		gap: 10px;
	}

	.lk-cloudfold .stat-item,
	.lk-cloudfold .stat-item:nth-child(1),
	.lk-cloudfold .stat-item:nth-child(2),
	.lk-cloudfold .stat-item:nth-child(3),
	.lk-cloudfold .stat-item:nth-child(4) {
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 18px;
		padding: 18px 16px;
		background: rgba(255, 255, 255, 0.035);
	}

	.lk-cloudfold .rb-ui {
		min-height: auto;
	}

	.lk-cloudfold .rb-body {
		padding: 18px;
	}

	.lk-cloudfold .rb-compare {
		height: clamp(300px, 78vw, 420px);
	}

	.lk-cloudfold .footer {
		padding: 0 18px 30px;
	}

	.lk-cloudfold .footer-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 14px;
		text-align: center;
	}

	.lk-cloudfold .footer-links {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lk-cloudfold *,
	.lk-cloudfold *::before,
	.lk-cloudfold *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Card - Glowing Corner Hover Effects */
.container .card {
	position: relative;
	background: transparent;
	overflow: hidden;
	cursor: pointer;
}

.card::before {
	content: "";
	position: absolute;
	top: var(--y, 50%);
	left: var(--x, 50%);
	translate: -50% -50%;
	background: radial-gradient(var(--clr), transparent 60%);
	width: 700px;
	height: 700px;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

.card:hover::before {
	opacity: 1;
}

.container .card::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: transparent;
	pointer-events: none;
}


/* CF Button - Rotate */
.cf-button {
    display: flex;
    flex-wrap: nowrap;
    gap: 13px;
    align-items: center;
    height: 36px;
    padding: 4px 20px;
    font-size: 14px;
	color: #f4f4f5;
    font-weight: 500;
    background: rgb(19,13,14);
    border-radius: 1000px
}

.cf-button:hover {
    color: #f4f4f5;
}

.cf-button-out {
    padding: 1px;
    border-radius: 43px;
    background: conic-gradient(from calc(var(--r2) - 80deg) at var(--x) 15px,transparent 0,rgb(236,165,167) 20%,transparent 25%),#452324;
    box-shadow: 0 0 20px 0 rgba(245,48,107,.1);
    transition: all .2s ease;
    transform: translateZ(0)
}

.cf-button-out.cf-button-animate {
    animation: rotating__Glo -.64s linear 3s infinite,rotating__x -.64s linear 3s infinite
}

.cf-button-out:hover {
    background-color: rgb(131,54,55);
    box-shadow: 0 0 20px 3px rgba(245,49,108,.25)
}

@property --r2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

@property --x {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@keyframes rotating__x {
    0% {
        --x: 20px
    }

    32.82275711% {
        --x: 206px
    }

    50% {
        --x: 206px
    }

    82.82275711% {
        --x: 20px
    }

    to {
        --x: 20px
    }
}

@keyframes rotating__Glo {
    0% {
        --r2: 0deg
    }

    32.82275711% {
        --r2: 0deg
    }

    50% {
        --r2: 180deg
    }

    82.82275711% {
        --r2: 180deg
    }

    to {
        --r2: 360deg
    }
}

.p-0 {
	padding: 0 !important;
}