.cc-page {
	background: #fff;
	color: #102143;
}

.cc-page a {
	text-decoration: none;
}

.cc-hero {
	position: relative;
	overflow: hidden;
	min-height: 570px;
	padding: 20px 0 44px;
	background:
		radial-gradient(ellipse at 78% 42%, rgba(48, 139, 255, .16), transparent 34%),
		linear-gradient(115deg, #f8fbff 0%, #eef6ff 48%, #e8f3ff 100%);
}

.cc-hero::before,
.cc-hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}

.cc-hero::before {
	right: -160px;
	bottom: 24px;
	width: 720px;
	height: 170px;
	border: 20px solid rgba(24, 117, 255, .12);
	transform: rotate(-6deg);
}

.cc-hero::after {
	right: 70px;
	top: 122px;
	width: 420px;
	height: 132px;
	border: 18px solid rgba(80, 166, 255, .1);
	transform: rotate(-16deg);
}

.cc-hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
	gap: 40px;
	align-items: center;
}

.cc-breadcrumb {
	margin: 4px 0 54px;
	color: #8fa1bc;
	font-size: 13px;
}

.cc-title-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.cc-title-row h1 {
	margin: 0;
	color: #071a43;
	font-size: clamp(30px, 3.05vw, 40px);
	line-height: 1.1;
	letter-spacing: 0;
}

.cc-title-row span {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 15px;
	border-radius: 17px;
	color: #1974ff;
	font-size: 15px;
	font-weight: 800;
	background: rgba(255,255,255,.88);
	box-shadow: 0 12px 26px rgba(37, 113, 217, .12);
}

.cc-hero-copy h2 {
	margin: 22px 0 16px;
	color: #071a43;
	font-size: 24px;
	line-height: 1.28;
	letter-spacing: 0;
}

.cc-hero-copy p {
	max-width: 560px;
	margin: 0;
	color: #415777;
	font-size: 16px;
	line-height: 2;
}

.cc-hero-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	max-width: 520px;
	margin-top: 28px;
}

.cc-hero-points div {
	text-align: center;
	min-width: 0;
}

.cc-hero-points i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	border-radius: 10px;
	color: #1477ff;
	font-size: 22px;
	background: rgba(255,255,255,.82);
}

.cc-hero-points b,
.cc-hero-points em {
	display: block;
	white-space: nowrap;
}

.cc-hero-points b {
	color: #183158;
	font-size: 14px;
}

.cc-hero-points em {
	margin-top: 4px;
	color: #637895;
	font-size: 12px;
	font-style: normal;
}

.cc-actions {
	display: flex;
	gap: 18px;
	margin-top: 34px;
}

.cc-primary,
.cc-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	height: 42px;
	padding: 0 22px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 800;
}

.cc-primary {
	color: #fff;
	background: linear-gradient(135deg, #2387ff, #075de8);
	box-shadow: 0 13px 26px rgba(17, 105, 255, .26);
}

.cc-secondary {
	color: #1974ff;
	border: 1px solid #8db9ff;
	background: rgba(255,255,255,.68);
}

.cc-hero-visual {
	position: relative;
	min-height: 420px;
}

.cc-desktop {
	position: absolute;
	right: 72px;
	top: 12px;
	width: 460px;
	height: 292px;
	border: 12px solid #1b2635;
	border-bottom-width: 42px;
	border-radius: 14px 14px 10px 10px;
	background: #fff;
	box-shadow: 0 32px 42px rgba(31, 82, 153, .16);
}

.cc-desktop::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -98px;
	width: 130px;
	height: 74px;
	background: linear-gradient(180deg, #dfe6ed, #aeb9c5);
	clip-path: polygon(30% 0, 70% 0, 88% 100%, 12% 100%);
	transform: translateX(-50%);
}

.cc-desktop-top {
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	gap: 7px;
	background: #fff;
	border-bottom: 1px solid #edf2fb;
}

.cc-desktop-top span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d9e6fa;
}

.cc-desktop-top b {
	margin-left: 8px;
	color: #1b2b4b;
	font-size: 12px;
}

.cc-desktop-body {
	display: grid;
	grid-template-columns: 44px 1fr;
	height: 202px;
}

.cc-desktop aside,
.cc-depth-screen aside {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 12px;
	padding-top: 24px;
	background: linear-gradient(180deg, #0e76ff, #075bdc);
}

.cc-desktop aside i,
.cc-depth-screen aside i {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: rgba(255,255,255,.75);
}

.cc-screen {
	padding: 16px 18px;
	background: #f7fbff;
}

.cc-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}

.cc-kpis span {
	display: block;
	color: #6f7f98;
	font-size: 9px;
}

.cc-kpis b {
	display: block;
	color: #126fff;
	font-size: 14px;
	line-height: 1.2;
}

.cc-course-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.cc-course-list article {
	min-height: 92px;
	padding: 8px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(42, 104, 184, .08);
}

.cc-course-list img {
	width: 100%;
	height: 42px;
	border-radius: 5px;
	object-fit: cover;
}

.cc-course-list article > i {
	display: grid;
	place-items: center;
	width: 100%;
	height: 42px;
	border-radius: 5px;
	color: #fff;
	background: linear-gradient(135deg, #ff463f, #ff8e54);
}

.cc-course-list article:nth-child(3) > i {
	background: linear-gradient(135deg, #58a8ff, #0f6cff);
}

.cc-course-list b,
.cc-course-list em {
	display: block;
	white-space: nowrap;
	overflow: hidden;
}

.cc-course-list b {
	margin-top: 8px;
	color: #203a62;
	font-size: 10px;
}

.cc-course-list em {
	color: #8a9ab2;
	font-size: 9px;
	font-style: normal;
}

.cc-phone {
	position: absolute;
	right: 36px;
	top: 164px;
	z-index: 3;
	width: 116px;
	height: 210px;
	padding: 34px 13px 14px;
	border: 8px solid #111927;
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 24px 28px rgba(8, 58, 146, .24);
}

.cc-phone-top {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 38px;
	height: 8px;
	border-radius: 0 0 7px 7px;
	background: #111927;
	transform: translateX(-50%);
}

.cc-phone-icons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.cc-phone-icons i {
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffb454, #ff7247);
}

.cc-phone-icons i:nth-child(2) { background: linear-gradient(135deg, #51d7b6, #18a987); }
.cc-phone-icons i:nth-child(3) { background: linear-gradient(135deg, #5ab1ff, #126dff); }
.cc-phone-icons i:nth-child(4) { background: linear-gradient(135deg, #a5c6ff, #4d8bff); }

.cc-phone span {
	display: block;
	height: 24px;
	margin-top: 9px;
	border-radius: 6px;
	background: linear-gradient(90deg, #dbeaff, #f5f9ff);
}

.cc-orbit {
	position: absolute;
	right: 0;
	bottom: 10px;
	width: 560px;
	height: 96px;
	border: 9px solid rgba(26, 121, 255, .15);
	border-radius: 50%;
	transform: rotate(-4deg);
}

.cc-section {
	padding: 34px 0;
}

.cc-section-title {
	text-align: center;
}

.cc-section-title h2 {
	display: inline-block;
	position: relative;
	margin: 0 0 26px;
	color: #071a43;
	font-size: 24px;
	line-height: 1.35;
	letter-spacing: 0;
}

.cc-section-title h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	width: 36px;
	height: 3px;
	border-radius: 3px;
	background: #1a77ff;
	transform: translateX(-50%);
}

.cc-pain-solution {
	padding-top: 26px;
	background: #fff;
}

.cc-vs-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 214px;
	overflow: hidden;
	border-radius: 12px;
	background:
		linear-gradient(105deg, rgba(255,246,248,.98) 0 43%, rgba(244,249,255,.98) 43% 100%);
	box-shadow: 0 16px 42px rgba(30, 94, 182, .08);
}

.cc-pain,
.cc-solution {
	padding: 26px 64px;
}

.cc-pain h2,
.cc-solution h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 20px;
	color: #172849;
}

.cc-pain h2 i {
	color: #ff5b5b;
}

.cc-solution h2 i {
	color: #2d8cff;
}

.cc-pain li,
.cc-solution li {
	position: relative;
	margin-top: 12px;
	padding-left: 22px;
	color: #3e516f;
	font-size: 14px;
	line-height: 1.5;
}

.cc-pain li::before,
.cc-solution li::before {
	content: "\f057";
	position: absolute;
	left: 0;
	top: 1px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #ff4e4e;
}

.cc-solution li::before {
	content: "\f058";
	color: #1d7cff;
}

.cc-vs {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: #1472ff;
	font-size: 24px;
	font-weight: 900;
	font-style: italic;
	background: #fff;
	box-shadow: 0 12px 28px rgba(31, 93, 177, .16);
	transform: translate(-50%, -50%);
}

.cc-flow {
	display: grid;
	grid-template-columns: 78px repeat(6, minmax(0, 1fr));
	gap: 28px;
	align-items: center;
}

.cc-flow-side {
	display: grid;
	place-items: center;
	min-height: 124px;
	border-radius: 7px;
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	text-align: center;
	line-height: 1.5;
	background: linear-gradient(180deg, #2387ff, #0961eb);
	box-shadow: 0 14px 24px rgba(21, 108, 255, .18);
}

.cc-flow-step {
	position: relative;
	min-height: 132px;
	padding: 0 10px 14px;
	border: 1px solid #dce8ff;
	border-radius: 10px;
	text-align: center;
	background: linear-gradient(180deg, #fff, #f7fbff);
}

.cc-flow-step::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 50%;
	width: 24px;
	border-top: 2px dotted #6fa8ff;
}

.cc-flow-side + .cc-flow-step::before {
	border-top-style: solid;
}

.cc-flow-step::after {
	content: "";
	position: absolute;
	left: -6px;
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-top: 2px solid #6fa8ff;
	border-right: 2px solid #6fa8ff;
	transform: rotate(45deg);
}

.cc-flow-step h3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 34px;
	margin: -18px auto 14px;
	padding: 0 16px;
	border: 1px solid #b8d2ff;
	border-radius: 8px;
	color: #1571ff;
	font-size: 14px;
	background: #eef6ff;
}

.cc-flow-step p {
	margin: 0;
	color: #50647f;
	font-size: 12px;
	line-height: 1.85;
}

.cc-course-card img {
	width: 100%;
	height: 48px;
	margin-bottom: 8px;
	border-radius: 7px;
	object-fit: cover;
}

.cc-course-card b {
	display: block;
	color: #1e355c;
	font-size: 12px;
	text-align: left;
}

.cc-course-card p {
	text-align: left;
	font-size: 10px;
	line-height: 1.6;
}

.cc-overview {
	padding-top: 20px;
}

.cc-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.cc-feature-grid article {
	position: relative;
	overflow: hidden;
	min-height: 164px;
	padding: 20px;
	border: 1px solid #dce8ff;
	border-radius: 8px;
	background:
		radial-gradient(circle at 88% 18%, rgba(45, 140, 255, .11), transparent 34%),
		linear-gradient(135deg, #fff, #f7fbff);
}

.cc-feature-grid article:nth-child(4) {
	grid-row: span 2;
	min-height: 342px;
}

.cc-feature-grid article:nth-child(5),
.cc-feature-grid article:nth-child(6),
.cc-feature-grid article:nth-child(7) {
	grid-column: span 1;
}

.cc-feature-grid h3 {
	margin: 0 0 6px;
	color: #1374ff;
	font-size: 18px;
}

.cc-feature-grid h4 {
	margin: 0 0 12px;
	color: #23416d;
	font-size: 14px;
}

.cc-feature-grid p {
	margin: 0;
	max-width: 250px;
	color: #536982;
	font-size: 12px;
	line-height: 1.75;
}

.cc-feature-grid img {
	position: absolute;
	right: 10px;
	bottom: 8px;
	width: 150px;
	height: 92px;
	object-fit: contain;
	filter: drop-shadow(0 14px 20px rgba(25, 104, 229, .14));
}

.cc-feature-grid article:nth-child(6) img {
	width: 174px;
	height: 82px;
	object-fit: cover;
	border-radius: 8px;
}

.cc-feature-grid article:nth-child(7) img {
	right: 24px;
	width: 84px;
	height: 128px;
	object-fit: contain;
}

.cc-progress-lines {
	display: flex;
	align-items: end;
	gap: 18px;
	height: 54px;
	margin-top: 28px;
	padding-left: 12px;
}

.cc-progress-lines i {
	width: 7px;
	border-radius: 4px;
	background: #1a77ff;
}

.cc-progress-lines i:nth-child(1) { height: 44px; }
.cc-progress-lines i:nth-child(2) { height: 34px; opacity: .75; }
.cc-progress-lines i:nth-child(3) { height: 48px; opacity: .5; }
.cc-progress-lines i:nth-child(4) { height: 28px; opacity: .35; }

.cc-doc-icons {
	display: flex;
	gap: 10px;
	margin-top: 30px;
}

.cc-doc-icons i {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: #fff;
	background: #1676ff;
}

.cc-doc-icons i:nth-child(2) { background: #ff5959; }
.cc-doc-icons i:nth-child(3) { background: #ff9d36; }
.cc-doc-icons i:nth-child(4) { background: #23c2a0; }
.cc-doc-icons i:nth-child(5) { background: #3c87ff; }

.cc-donut {
	display: grid;
	place-items: center;
	width: 144px;
	height: 144px;
	margin: 34px auto 22px;
	border-radius: 50%;
	background:
		radial-gradient(circle, #fff 0 52%, transparent 53%),
		conic-gradient(#1373ff 0 78%, #e1ecff 0);
	box-shadow: 0 16px 36px rgba(19, 115, 255, .12);
}

.cc-donut b {
	color: #102143;
	font-size: 28px;
	line-height: 1;
}

.cc-donut span {
	margin-top: -42px;
	color: #8ba0bb;
	font-size: 11px;
}

.cc-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.cc-stats span {
	display: block;
	padding-top: 10px;
	border-top: 1px solid #e4edff;
	color: #7d8fa8;
	font-size: 11px;
	text-align: center;
}

.cc-stats b {
	display: block;
	margin-top: 6px;
	color: #1474ff;
	font-size: 18px;
}

.cc-toggle-list {
	display: grid;
	gap: 10px;
	margin-top: 24px;
	width: 134px;
}

.cc-toggle-list span {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 26px;
	padding: 0 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #dfeaff;
	color: #385372;
	font-size: 12px;
}

.cc-toggle-list i {
	width: 32px;
	height: 16px;
	border-radius: 10px;
	background: #1a77ff;
}

.cc-toggle-list i::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin: 2px 0 0 17px;
	border-radius: 50%;
	background: #fff;
}

.cc-depth-card {
	padding: 24px;
	border: 1px solid #dbe8ff;
	border-radius: 10px;
	background: linear-gradient(135deg, #f9fcff, #f2f8ff);
}

.cc-tabs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.cc-tabs button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	border-radius: 8px;
	color: #26456e;
	font-size: 13px;
	font-weight: 800;
	background: #fff;
	box-shadow: inset 0 0 0 1px #d9e8ff;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.cc-tabs button.active,
.cc-tabs button:hover {
	color: #fff;
	background: linear-gradient(135deg, #2b8dff, #0c65ea);
	transform: translateY(-2px);
}

.cc-depth-body {
	display: grid;
	grid-template-columns: .7fr 1.3fr;
	gap: 30px;
	align-items: center;
}

.cc-depth-copy {
	padding: 12px 8px;
}

.cc-depth-copy h3 {
	margin: 0 0 18px;
	color: #102143;
	font-size: 24px;
}

.cc-depth-copy li {
	position: relative;
	margin-top: 13px;
	padding-left: 18px;
	color: #3d5575;
	font-size: 14px;
	line-height: 1.7;
}

.cc-depth-copy li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1475ff;
}

.cc-depth-copy a {
	display: inline-flex;
	margin-top: 22px;
	color: #1475ff;
	font-weight: 800;
}

.cc-depth-screen {
	position: relative;
	display: grid;
	grid-template-columns: 54px 1fr;
	min-height: 226px;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 42px rgba(29, 93, 178, .12);
}

.cc-ui-board {
	padding: 18px 20px;
	background:
		radial-gradient(circle at 92% 12%, rgba(24, 118, 255, .12), transparent 28%),
		linear-gradient(180deg, #fbfdff, #f3f8ff);
}

.cc-ui-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.cc-ui-toolbar b {
	margin-right: auto;
	color: #102143;
	font-size: 15px;
}

.cc-ui-toolbar span {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 6px;
	color: #0f67e5;
	font-size: 11px;
	font-weight: 800;
	background: #eaf3ff;
	box-shadow: inset 0 0 0 1px #cfe1ff;
}

.cc-ui-layout {
	display: grid;
	grid-template-columns: 142px 1fr;
	gap: 14px;
}

.cc-ui-tree,
.cc-ui-table,
.cc-video-card,
.cc-chapter-list,
.cc-rule-ui > div,
.cc-rank,
.cc-ai-ui article {
	border: 1px solid #dbe8ff;
	border-radius: 10px;
	background: rgba(255,255,255,.86);
	box-shadow: 0 10px 22px rgba(31, 92, 168, .06);
}

.cc-ui-tree {
	display: grid;
	gap: 8px;
	padding: 12px;
}

.cc-ui-tree strong {
	color: #102143;
	font-size: 12px;
}

.cc-ui-tree em {
	display: block;
	height: 24px;
	padding: 0 9px;
	border-radius: 6px;
	color: #5d718c;
	font-size: 11px;
	font-style: normal;
	line-height: 24px;
	background: #f3f7ff;
}

.cc-ui-tree em.on {
	color: #fff;
	background: linear-gradient(135deg, #2b8dff, #0c65ea);
}

.cc-ui-table {
	overflow: hidden;
}

.cc-ui-table div {
	display: grid;
	grid-template-columns: 1.35fr .8fr .6fr .55fr;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border-top: 1px solid #edf3ff;
	color: #48617e;
	font-size: 11px;
}

.cc-ui-table div:first-child {
	border-top: 0;
	color: #153366;
	font-weight: 900;
	background: #eef6ff;
}

.cc-ui-table i {
	display: inline-flex;
	justify-content: center;
	width: 52px;
	height: 20px;
	border-radius: 12px;
	color: #0f70f5;
	font-style: normal;
	line-height: 20px;
	background: #e8f2ff;
}

.cc-chapter-ui,
.cc-track-ui,
.cc-ai-ui {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.cc-video-card {
	overflow: hidden;
}

.cc-video-card img {
	display: block;
	width: 100%;
	height: 112px;
	object-fit: cover;
}

.cc-video-card strong {
	display: block;
	padding: 12px;
	color: #102143;
	font-size: 13px;
}

.cc-chapter-list {
	padding: 10px 12px;
}

.cc-chapter-list p,
.cc-rank p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #edf3ff;
	color: #344d6c;
	font-size: 12px;
}

.cc-chapter-list p:last-child,
.cc-rank p:last-child {
	border-bottom: 0;
}

.cc-chapter-list b {
	color: #1475ff;
}

.cc-chapter-list i {
	margin-left: auto;
	color: #16a46b;
	font-size: 11px;
	font-style: normal;
}

.cc-rule-ui {
	display: grid;
	gap: 12px;
}

.cc-rule-ui > div {
	padding: 13px 16px;
}

.cc-rule-ui strong {
	color: #1475ff;
	font-size: 13px;
}

.cc-rule-ui p {
	margin: 6px 0 0;
	color: #415b78;
	font-size: 12px;
}

.cc-bars {
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 16px;
	min-height: 146px;
	border-radius: 10px;
	background: linear-gradient(180deg, #fff, #edf6ff);
}

.cc-bars i {
	width: 16px;
	border-radius: 9px 9px 3px 3px;
	background: linear-gradient(180deg, #27a7ff, #0b68ef);
	box-shadow: 0 8px 14px rgba(18, 112, 245, .22);
}

.cc-rank {
	padding: 14px 18px;
}

.cc-rank strong {
	margin-left: auto;
	color: #0f70f5;
	font-size: 20px;
}

.cc-mobile-ui {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: center;
	gap: 22px;
}

.cc-mobile-ui img {
	width: 180px;
	height: 170px;
	object-fit: contain;
	filter: drop-shadow(0 18px 24px rgba(18, 95, 214, .18));
}

.cc-mobile-ui b {
	color: #102143;
	font-size: 20px;
}

.cc-mobile-ui p {
	color: #49617c;
	font-size: 13px;
	line-height: 1.8;
}

.cc-ai-ui {
	grid-template-columns: repeat(3, 1fr);
}

.cc-ai-ui article {
	padding: 18px 14px;
}

.cc-ai-ui b,
.cc-ai-ui strong {
	display: block;
}

.cc-ai-ui b {
	color: #6f829b;
	font-size: 11px;
}

.cc-ai-ui strong {
	margin: 10px 0;
	color: #1475ff;
	font-size: 16px;
}

.cc-ai-ui p {
	margin: 0;
	color: #4f6784;
	font-size: 11px;
	line-height: 1.6;
}

.cc-table-panel {
	padding: 24px;
}

.cc-filter-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 18px;
}

.cc-filter-row span,
.cc-tree i,
.cc-table span {
	display: block;
	border-radius: 6px;
	background: #edf4ff;
}

.cc-filter-row span {
	height: 30px;
}

.cc-tree-table {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 18px;
}

.cc-tree,
.cc-table {
	display: grid;
	gap: 11px;
}

.cc-tree i {
	height: 18px;
}

.cc-tree i:nth-child(2),
.cc-tree i:nth-child(4) {
	margin-left: 18px;
}

.cc-table span {
	height: 22px;
	background: linear-gradient(90deg, #eef5ff, #fff);
}

.cc-depth-screen img {
	position: absolute;
	right: -10px;
	bottom: -8px;
	width: 124px;
	height: 86px;
	object-fit: contain;
}

.cc-scenes {
	padding-top: 4px;
}

.cc-scene-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.cc-scene-grid article {
	position: relative;
	min-height: 184px;
	overflow: hidden;
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 14px 28px rgba(22, 57, 115, .12);
}

.cc-scene-grid article img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform .35s ease;
}

.cc-scene-grid article::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 42, 86, .03) 0%, rgba(9, 25, 52, .16) 44%, rgba(5, 18, 42, .78) 100%),
		linear-gradient(90deg, rgba(7, 22, 48, .26), transparent 58%);
}

.cc-scene-grid article:hover img {
	transform: scale(1.08);
}

.cc-scene-grid article > div {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 20px 18px;
}

.cc-scene-grid h3 {
	margin: 0 0 6px;
	font-size: 17px;
}

.cc-scene-grid p {
	margin: 0;
	color: rgba(255,255,255,.86);
	font-size: 12px;
	line-height: 1.45;
}

.cc-faq {
	padding-top: 0;
}

.cc-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}

.cc-faq-grid details {
	border: 1px solid #dfe9fb;
	border-radius: 7px;
	background: #fff;
}

.cc-faq-grid summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 18px;
	color: #23416d;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

.cc-faq-grid summary::-webkit-details-marker {
	display: none;
}

.cc-faq-grid summary::after {
	content: "\f078";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #1572ff;
	font-size: 12px;
	transition: transform .2s ease;
}

.cc-faq-grid details[open] summary::after {
	transform: rotate(180deg);
}

.cc-faq-grid p {
	margin: 0;
	padding: 0 18px 16px;
	color: #596c86;
	font-size: 13px;
	line-height: 1.75;
}

.cc-final-cta {
	padding: 28px 0 48px;
}

.cc-final-inner {
	display: grid;
	grid-template-columns: 1fr 360px;
	align-items: center;
	min-height: 188px;
	overflow: hidden;
	padding: 28px 54px;
	border-radius: 10px;
	background:
		radial-gradient(circle at 84% 44%, rgba(30, 126, 255, .14), transparent 34%),
		linear-gradient(115deg, #ddecff, #f0f7ff 55%, #d8ebff);
}

.cc-final-inner h2 {
	margin: 0 0 12px;
	color: #0d2d68;
	font-size: 28px;
}

.cc-final-inner p {
	margin: 0;
	color: #385578;
	font-size: 15px;
}

.cc-cta-art img {
	width: 360px;
	height: 174px;
	object-fit: contain;
	filter: drop-shadow(0 22px 28px rgba(20, 95, 220, .16));
}

@media (max-width: 1120px) {
	.cc-hero-inner,
	.cc-depth-body,
	.cc-final-inner {
		grid-template-columns: 1fr;
	}

	.cc-hero-visual {
		min-height: 380px;
	}

	.cc-flow,
	.cc-feature-grid,
	.cc-tabs,
	.cc-scene-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cc-flow-side {
		grid-column: 1 / -1;
		min-height: 78px;
	}

	.cc-flow-step::before,
	.cc-flow-step::after {
		display: none;
	}
}

@media (max-width: 760px) {
	.cc-hero {
		min-height: auto;
		padding-bottom: 32px;
	}

	.cc-hero-inner,
	.cc-vs-card,
	.cc-flow,
	.cc-feature-grid,
	.cc-tabs,
	.cc-scene-grid,
	.cc-faq-grid {
		grid-template-columns: 1fr;
	}

	.cc-breadcrumb {
		margin-bottom: 30px;
	}

	.cc-title-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.cc-title-row h1 {
		font-size: clamp(30px, 3.05vw, 40px);
	}

	.cc-hero-copy h2 {
		font-size: 24px;
	}

	.cc-hero-points {
		grid-template-columns: repeat(2, 1fr);
	}

	.cc-hero-visual {
		min-height: 300px;
	}

	.cc-desktop {
		right: 0;
		top: 0;
		width: min(100%, 420px);
		transform: scale(.82);
		transform-origin: top right;
	}

	.cc-phone {
		right: 18px;
		top: 138px;
		transform: scale(.86);
		transform-origin: top right;
	}

	.cc-orbit {
		right: -170px;
		width: 460px;
	}

	.cc-pain,
	.cc-solution {
		padding: 24px;
	}

	.cc-vs {
		position: static;
		margin: -16px auto;
		transform: none;
	}

	.cc-feature-grid article:nth-child(4) {
		grid-row: auto;
	}

	.cc-final-inner {
		padding: 24px;
	}
}