:root {
	--blue: #176dff;
	--blue-2: #0b55e9;
	--cyan: #22c7d8;
	--green: #22c787;
	--orange: #ff9d28;
	--purple: #765dff;
	--ink: #071a43;
	--text: #334766;
	--muted: #6b7e99;
	--line: #dbe8fb;
	--soft: #f3f8ff;
	--card: #fff;
	--shadow: 0 18px 42px rgba(37, 103, 190, .12);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--text);
	background: #fff;
	font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
	letter-spacing: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

.page {
	overflow: hidden;
	background:
		linear-gradient(180deg, #f7fbff 0, #fff 560px),
		#fff;
}

.shell {
	width: min(1200px, calc(100% - 48px));
	margin: 0 auto;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .92);
	border-bottom: 1px solid rgba(205, 220, 244, .72);
	backdrop-filter: blur(14px);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 66px;
	gap: 26px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 170px;
}

.brand img:first-child {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.brand img:last-child {
	width: 118px;
	height: auto;
	object-fit: contain;
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 34px;
	font-size: 14px;
	color: #1a2c4d;
	white-space: nowrap;
}

.nav-links a {
	position: relative;
	padding: 24px 0;
}

.nav-links .active {
	color: var(--blue);
	font-weight: 700;
}

.nav-links .active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 11px;
	width: 24px;
	height: 3px;
	border-radius: 999px;
	background: var(--blue);
	transform: translateX(-50%);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.btn.primary {
	color: #fff;
	background: linear-gradient(135deg, #2d8cff, #095deb);
	box-shadow: 0 12px 26px rgba(19, 101, 239, .26);
}

.btn.ghost {
	color: var(--blue);
	background: #fff;
	border-color: #bdd6ff;
}

.hero {
	position: relative;
	padding: 66px 0 50px;
	background:
		radial-gradient(circle at 82% 45%, rgba(53, 137, 255, .18), transparent 36%),
		linear-gradient(115deg, #f8fbff 0%, #eef7ff 58%, #eaf4ff 100%);
}

.hero::before {
	content: "";
	position: absolute;
	inset: auto -180px -110px auto;
	width: 760px;
	height: 260px;
	border: 28px solid rgba(55, 140, 255, .08);
	border-radius: 50%;
	transform: rotate(-12deg);
}

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

.eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 999px;
	color: var(--blue);
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 10px 24px rgba(55, 116, 205, .1);
	font-size: 13px;
	font-weight: 700;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

.hero h1 {
	margin: 25px 0 12px;
	color: var(--ink);
	font-size: clamp(30px, 3.05vw, 40px);
	line-height: 1.05;
	font-weight: 900;
}

.hero h2 {
	margin: 0 0 20px;
	color: var(--ink);
	font-size: 24px;
	line-height: 1.45;
}

.hero p {
	max-width: 560px;
	margin-bottom: 24px;
	color: #405878;
	font-size: 16px;
	line-height: 2;
}

.hero-points {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 560px;
	margin: 28px 0 30px;
}

.mini-point {
	min-width: 0;
	text-align: center;
}

.mini-icon,
.icon {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	color: var(--blue);
	background: #fff;
	box-shadow: 0 12px 26px rgba(31, 104, 210, .12);
	font-size: 16px;
	font-weight: 900;
}

.mini-point b {
	display: block;
	margin-top: 8px;
	color: #20385c;
	font-size: 13px;
	white-space: nowrap;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.link-arrow {
	color: var(--blue);
	font-weight: 800;
}

.preview {
	position: relative;
	min-height: 440px;
}

.window {
	position: absolute;
	right: 22px;
	top: 4px;
	width: 640px;
	min-height: 390px;
	border: 1px solid rgba(178, 207, 246, .92);
	border-radius: 13px;
	background: rgba(255, 255, 255, .96);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.window.dark-frame {
	border: 12px solid #1c2b3f;
	border-bottom-width: 32px;
	border-radius: 17px;
}

.window-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 18px;
	border-bottom: 1px solid #e8f0fc;
	color: #1c3357;
	font-size: 14px;
	font-weight: 800;
}

.window-actions {
	display: flex;
	gap: 6px;
}

.window-actions i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c5d5ed;
}

.app-layout {
	display: grid;
	grid-template-columns: 54px 1fr;
	min-height: 340px;
}

.side-rail {
	padding: 16px 10px;
	background: linear-gradient(180deg, #2179ff, #0d59df);
}

.side-rail span {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 13px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .2);
}

.app-main {
	padding: 18px;
}

.kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 14px;
}

.kpi {
	padding: 14px;
	border: 1px solid #e6eefb;
	border-radius: 8px;
	background: #fff;
}

.kpi small {
	display: block;
	color: #7a8ca8;
	font-size: 11px;
}

.kpi b {
	display: block;
	margin-top: 8px;
	color: var(--blue);
	font-size: 22px;
}

.panel-grid {
	display: grid;
	grid-template-columns: 1.5fr .75fr;
	gap: 12px;
}

.panel {
	border: 1px solid #e4eefc;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(64, 112, 180, .06);
	overflow: hidden;
}

.panel-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 15px;
	border-bottom: 1px solid #edf3fb;
	color: #1d3458;
	font-size: 14px;
	font-weight: 800;
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.table th,
.table td {
	padding: 11px 12px;
	border-bottom: 1px solid #edf3fb;
	text-align: left;
}

.table th {
	color: #7789a2;
	background: #f7faff;
	font-weight: 700;
}

.status {
	color: var(--green);
	font-weight: 800;
}

.ring {
	position: relative;
	width: 122px;
	height: 122px;
	margin: 20px auto 10px;
	border-radius: 50%;
	background: conic-gradient(var(--blue) 0 78%, #dfe9fb 78% 100%);
}

.ring::after {
	content: attr(data-value);
	position: absolute;
	inset: 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--ink);
	background: #fff;
	font-size: 22px;
	font-weight: 900;
}

.bar-chart {
	display: flex;
	align-items: end;
	height: 118px;
	gap: 10px;
	padding: 18px;
}

.bar-chart i {
	flex: 1;
	min-width: 8px;
	border-radius: 7px 7px 0 0;
	background: linear-gradient(180deg, #2b8bff, #9dccff);
}

.phone {
	position: absolute;
	right: 0;
	bottom: 28px;
	width: 166px;
	border: 8px solid #151c27;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 22px 42px rgba(23, 80, 160, .18);
	overflow: hidden;
}

.phone-head {
	height: 42px;
	padding: 14px 16px 0;
	color: var(--ink);
	font-size: 13px;
	font-weight: 900;
}

.phone-card {
	margin: 8px 12px;
	padding: 10px;
	border-radius: 10px;
	background: #f5f8fe;
	font-size: 11px;
}

.phone-card b {
	display: block;
	color: var(--blue);
	font-size: 16px;
}

.section {
	padding: 58px 0;
}

.section.alt {
	background: linear-gradient(180deg, #f7fbff, #fff);
}

.section-head {
	max-width: 800px;
	margin: 0 auto 32px;
	text-align: center;
}

.section-head h2 {
	margin-bottom: 12px;
	color: var(--ink);
	font-size: 26px;
	line-height: 1.25;
}

.section-head p {
	margin-bottom: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.8;
}

.stat-strip {
	position: relative;
	z-index: 2;
	margin-top: -30px;
}

.stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	padding: 20px;
	border: 1px solid #dceafd;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--shadow);
}

.stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	min-height: 72px;
	border-right: 1px solid #e5eefb;
}

.stat:last-child {
	border-right: 0;
}

.stat b {
	display: block;
	color: var(--ink);
	font-size: 23px;
}

.stat span {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-size: 13px;
}

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

.card-grid.three {
	grid-template-columns: repeat(3, 1fr);
}

.card-grid.five {
	grid-template-columns: repeat(5, 1fr);
}

.card {
	min-height: 142px;
	padding: 24px;
	border: 1px solid #dceafd;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(40, 103, 181, .08);
}

.card h3 {
	margin: 16px 0 9px;
	color: var(--ink);
	font-size: 18px;
}

.card p {
	margin: 0;
	color: #526780;
	font-size: 14px;
	line-height: 1.75;
}

.flow {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	counter-reset: step;
}

.flow li {
	position: relative;
	list-style: none;
	padding: 24px 16px;
	border: 1px solid #dceafd;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	box-shadow: 0 12px 28px rgba(48, 108, 188, .07);
}

.flow li::before {
	counter-increment: step;
	content: counter(step);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0 auto 12px;
	border-radius: 50%;
	color: #fff;
	background: var(--blue);
	font-weight: 900;
}

.flow strong {
	display: block;
	color: var(--ink);
	font-size: 17px;
}

.flow span {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.65;
}

.feature-row {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 28px;
	align-items: center;
	padding: 28px 0;
	border-bottom: 1px solid #e5eefb;
}

.feature-row:nth-child(even) {
	grid-template-columns: 1.18fr .82fr;
}

.feature-row:nth-child(even) .feature-copy {
	order: 2;
}

.feature-copy h3 {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ink);
	font-size: 22px;
}

.feature-copy h3 span {
	color: var(--blue);
	font-size: 22px;
}

.feature-copy p,
.feature-copy li {
	color: #4e6380;
	font-size: 15px;
	line-height: 1.85;
}

.feature-copy ul {
	margin: 0;
	padding-left: 18px;
}

.mock-card {
	padding: 22px;
	border: 1px solid #dceafd;
	border-radius: 11px;
	background: linear-gradient(180deg, #fff, #f9fcff);
	box-shadow: 0 16px 36px rgba(45, 104, 184, .09);
}

.timeline {
	display: grid;
	gap: 12px;
}

.timeline-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #5a6e8a;
}

.timeline-row i {
	display: block;
	height: 16px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.timeline-row:nth-child(2) i {
	margin-left: 16%;
	width: 45%;
	background: linear-gradient(90deg, #16bfd2, #11a8c3);
}

.timeline-row:nth-child(3) i {
	margin-left: 33%;
	width: 48%;
	background: linear-gradient(90deg, var(--purple), #9a7dff);
}

.timeline-row:nth-child(4) i {
	margin-left: 55%;
	width: 36%;
	background: linear-gradient(90deg, var(--green), #43d6a1);
}

.timeline-row:nth-child(5) i {
	margin-left: 70%;
	width: 26%;
	background: linear-gradient(90deg, var(--orange), #ffb057);
}

.mini-list {
	display: grid;
	gap: 10px;
}

.mini-list div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border: 1px solid #e7effb;
	border-radius: 8px;
	background: #fff;
	color: #506782;
	font-size: 13px;
}

.dark-band {
	padding: 52px 0;
	color: #fff;
	background:
		radial-gradient(circle at 82% 50%, rgba(58, 150, 255, .34), transparent 26%),
		linear-gradient(115deg, #05286a, #0149a8);
}

.dark-band h2 {
	color: #fff;
	text-align: center;
}

.dark-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 26px;
}

.dark-item {
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
}

.dark-item b {
	display: block;
	margin-bottom: 8px;
	color: #fff;
}

.dark-item span {
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	line-height: 1.65;
}

.scenario-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.scenario {
	overflow: hidden;
	border: 1px solid #dceafd;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(42, 102, 180, .08);
}

.scenario-img {
	height: 112px;
	background:
		linear-gradient(135deg, rgba(23, 109, 255, .12), rgba(34, 199, 135, .08)),
		repeating-linear-gradient(45deg, rgba(23, 109, 255, .12) 0 8px, transparent 8px 18px);
}

.scenario div:last-child {
	padding: 16px;
}

.scenario h3 {
	margin-bottom: 7px;
	color: var(--ink);
	font-size: 16px;
}

.scenario p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.65;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 22px;
}

details {
	border: 1px solid #dceafd;
	border-radius: 9px;
	background: #fff;
}

summary {
	position: relative;
	padding: 17px 48px 17px 20px;
	color: #173156;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	color: var(--blue);
	font-size: 22px;
	transform: translateY(-50%);
}

details[open] summary::after {
	content: "-";
}

details p {
	margin: 0;
	padding: 0 20px 18px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.75;
}

.cta {
	padding: 44px 0;
	color: #fff;
	background: linear-gradient(115deg, #0566f4, #278cff);
}

.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.cta h2 {
	margin-bottom: 8px;
	color: #fff;
	font-size: 28px;
}

.cta p {
	margin: 0;
	color: rgba(255, 255, 255, .84);
}

.cta .btn.ghost {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
}

.cta .btn.primary {
	color: var(--blue);
	background: #fff;
	box-shadow: none;
}

.msg-list,
.file-grid,
.live-card {
	display: grid;
	gap: 12px;
}

.message {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-radius: 8px;
	background: #f6faff;
	font-size: 12px;
}

.message i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f04444;
}

.message:nth-child(n+2) i {
	background: var(--blue);
}

.file-grid {
	grid-template-columns: repeat(4, 1fr);
}

.file {
	min-height: 80px;
	padding: 12px;
	border: 1px solid #e4eefb;
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	text-align: center;
}

.file b {
	display: block;
	margin: 6px auto 8px;
	width: 34px;
	height: 38px;
	border-radius: 6px;
	color: #fff;
	background: var(--orange);
	line-height: 38px;
}

.file:nth-child(2) b { background: #2e7cff; }
.file:nth-child(3) b { background: #28bb7d; }
.file:nth-child(4) b { background: #f04444; }

.live-screen {
	position: relative;
	min-height: 220px;
	border-radius: 12px;
	background:
		linear-gradient(135deg, rgba(0, 58, 160, .2), rgba(0, 113, 255, .1)),
		linear-gradient(115deg, #0d55c8, #1679ff);
	color: #fff;
	overflow: hidden;
}

.live-screen::after {
	content: "";
	position: absolute;
	right: 42px;
	bottom: 0;
	width: 150px;
	height: 190px;
	border-radius: 90px 90px 0 0;
	background: rgba(255, 255, 255, .32);
}

.live-badge {
	display: inline-flex;
	margin: 18px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #ff3d4c;
	font-weight: 900;
}

.live-title {
	position: absolute;
	left: 28px;
	bottom: 30px;
	font-size: 26px;
	font-weight: 900;
}

.heatmap {
	display: grid;
	grid-template-columns: 100px repeat(4, 1fr);
	gap: 8px;
	font-size: 12px;
}

.heatmap span {
	padding: 10px;
	border-radius: 6px;
	background: #eef6ff;
	text-align: center;
}

.heatmap .hot {
	background: #65c7e5;
}

.heatmap .warm {
	background: #8de1c4;
}

@media (max-width: 1060px) {
	.nav-links {
		display: none;
	}

	.hero-grid,
	.feature-row,
	.feature-row:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.feature-row:nth-child(even) .feature-copy {
		order: 0;
	}

	.preview {
		min-height: 390px;
	}

	.window {
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
	}

	.phone {
		right: 16px;
	}

	.card-grid,
	.card-grid.three,
	.card-grid.five,
	.scenario-grid,
	.dark-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow,
	.stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.stat {
		border-right: 0;
		border-bottom: 1px solid #e5eefb;
	}
}

@media (max-width: 680px) {
	.shell {
		width: min(100% - 28px, 1200px);
	}

	.nav {
		height: auto;
		padding: 14px 0;
	}

	.nav-actions {
		display: none;
	}

	.hero {
		padding-top: 40px;
	}

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

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

	.hero-points,
	.card-grid,
	.card-grid.three,
	.card-grid.five,
	.scenario-grid,
	.dark-grid,
	.flow,
	.stats,
	.faq-grid,
	.panel-grid,
	.kpi-grid,
	.file-grid {
		grid-template-columns: 1fr;
	}

	.stat {
		justify-content: flex-start;
		padding-left: 12px;
	}

	.preview {
		min-height: auto;
	}

	.phone {
		display: none;
	}

	.app-layout {
		grid-template-columns: 1fr;
	}

	.side-rail {
		display: none;
	}

	.cta-inner {
		display: block;
	}

	.cta .hero-actions {
		margin-top: 22px;
	}
}

/* Rich learning-hours composition */
.hours-page {
	background:
		linear-gradient(180deg, #f5faff 0, #fff 620px),
		#fff;
}

.hours-hero {
	padding: 54px 0 62px;
	background:
		linear-gradient(120deg, rgba(214, 233, 255, .94), rgba(246, 251, 255, .98) 42%, rgba(226, 241, 255, .94)),
		radial-gradient(circle at 20% 80%, rgba(23, 109, 255, .14), transparent 36%);
	min-height: 720px;
}

.hours-hero::before {
	inset: auto auto -90px -120px;
	width: 720px;
	height: 230px;
	border-color: rgba(23, 109, 255, .1);
	transform: rotate(-18deg);
}

.hours-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	background:
		linear-gradient(170deg, transparent 0 42%, rgba(255,255,255,.72) 43% 46%, transparent 47%),
		linear-gradient(174deg, transparent 0 50%, rgba(23,109,255,.09) 51% 53%, transparent 54%);
	pointer-events: none;
}

.hours-hero .hero-grid {
	grid-template-columns: minmax(390px, .86fr) minmax(0, 1.14fr);
}

.hours-title {
	font-size: 26px;
}

.hours-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 8px;
}

.hours-tags span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #d6e6ff;
	border-radius: 999px;
	color: #21466f;
	background: rgba(255,255,255,.86);
	box-shadow: 0 10px 26px rgba(23, 109, 255, .08);
	font-size: 13px;
	font-weight: 700;
}

.hours-illustration {
	position: relative;
	width: 230px;
	height: 150px;
	margin-top: 26px;
}

.hours-platform {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 180px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(23,109,255,.22), rgba(255,255,255,.82));
	box-shadow: 0 24px 46px rgba(45, 115, 210, .16);
}

.hours-platform::before {
	content: "";
	position: absolute;
	inset: 12px 46px;
	border-radius: 50%;
	border: 18px solid rgba(23, 109, 255, .75);
	border-top-color: rgba(34, 199, 135, .66);
	background: #fff;
}

.hours-cube {
	position: absolute;
	bottom: 52px;
	width: 28px;
	border-radius: 8px 8px 4px 4px;
	background: linear-gradient(180deg, #4aa0ff, #176dff);
	box-shadow: 0 14px 28px rgba(23,109,255,.22);
}

.hours-cube.one { left: 32px; height: 62px; }
.hours-cube.two { left: 72px; height: 86px; background: linear-gradient(180deg, #75d9ff, #2088ff); }
.hours-cube.three { left: 112px; height: 48px; background: linear-gradient(180deg, #9bbdff, #4f82ff); }

.hours-clock {
	position: absolute;
	left: 150px;
	top: 8px;
	width: 50px;
	height: 50px;
	border: 3px solid rgba(23,109,255,.24);
	border-radius: 50%;
	background: rgba(255,255,255,.82);
}

.hours-clock::before,
.hours-clock::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 12px;
	width: 3px;
	height: 16px;
	border-radius: 999px;
	background: var(--blue);
	transform-origin: bottom;
}

.hours-clock::after {
	top: 25px;
	width: 14px;
	height: 3px;
	transform: rotate(0);
}

.hours-dashboard {
	position: relative;
	min-width: 0;
	min-height: 660px;
}

.hours-board {
	position: absolute;
	right: 76px;
	top: 4px;
	width: min(590px, calc(100% - 86px));
	max-width: 100%;
	border: 1px solid rgba(177, 207, 248, .96);
	border-radius: 14px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 26px 54px rgba(31, 98, 181, .16);
	overflow: hidden;
}

.hours-board-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 16px;
	border-bottom: 1px solid #e7effb;
}

.hours-board-head b {
	color: var(--ink);
	font-size: 15px;
}

.hours-date {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border: 1px solid #dce9fb;
	border-radius: 6px;
	color: #7187a4;
	background: #f9fbff;
	font-size: 12px;
}

.hours-board-body {
	display: grid;
	grid-template-columns: 50px 1fr;
	min-height: 0;
}

.hours-rail {
	padding: 12px 10px;
	background: linear-gradient(180deg, #1c7dff, #0c57df);
}

.hours-rail i {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 9px;
	border-radius: 9px;
	background: rgba(255,255,255,.23);
}

.hours-board-main {
	min-width: 0;
	padding: 14px;
}

.hours-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.hours-kpis .kpi {
	padding: 12px 11px;
}

.hours-kpis b {
	font-size: 22px;
}

.delta {
	display: block;
	margin-top: 4px;
	color: #1cb97f;
	font-size: 11px;
	font-weight: 800;
}

.hours-dashboard-grid {
	display: grid;
	grid-template-columns: 1.35fr .8fr;
	gap: 10px;
	margin-top: 10px;
}

.hours-mini-table {
	min-width: 0;
	margin-top: 10px;
}

.hours-dashboard-grid .panel,
.hours-mini-table {
	min-width: 0;
}

.hours-board .panel-title {
	padding: 11px 13px;
	font-size: 13px;
}

.hours-board .bar-chart {
	height: 102px;
	gap: 9px;
	padding: 16px 17px;
}

.hours-board .ring {
	width: 98px;
	height: 98px;
	margin: 14px auto 8px;
}

.hours-board .ring::after {
	inset: 15px;
	font-size: 20px;
}

.hours-board .table th,
.hours-board .table td {
	padding: 9px 11px;
}

.donut-legend {
	display: grid;
	gap: 6px;
	padding: 0 18px 14px;
	font-size: 12px;
}

.donut-legend span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #5d728d;
}

.donut-legend i {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--blue);
}

.donut-legend span:nth-child(2) i { background: #4ec0ff; }
.donut-legend span:nth-child(3) i { background: #ffc44d; }
.donut-legend span:nth-child(4) i { background: #98a7bd; }

.hours-phone {
	right: 0;
	bottom: 42px;
	width: 174px;
}

.hours-phone .phone-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.phone-bars {
	display: flex;
	align-items: end;
	gap: 4px;
	height: 74px;
	padding: 10px;
}

.phone-bars i {
	flex: 1;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, #247fff, #9bc9ff);
}

.phone-ring {
	width: 82px;
	height: 82px;
	margin: 8px auto;
	border-radius: 50%;
	background: conic-gradient(#1b78ff 0 88%, #e2ebf8 88% 100%);
	position: relative;
}

.phone-ring::after {
	content: "88%";
	position: absolute;
	inset: 15px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	font-weight: 900;
}

.hours-stat-card {
	padding: 0;
	overflow: hidden;
}

.hours-stat-title {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0 0 14px 8px;
	color: var(--blue);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.25;
}

.hours-stats {
	align-items: center;
	padding: 24px 28px 20px;
	row-gap: 0;
}

.hours-stats .stat {
	align-items: center;
	justify-content: center;
	min-height: 72px;
}

.hours-stats .stat > .icon {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	margin-top: 0;
	color: var(--blue);
	font-size: 18px;
	line-height: 1;
	text-align: center;
}

.hours-why {
	grid-template-columns: repeat(6, 1fr);
}

.rich-card {
	position: relative;
	overflow: hidden;
	min-height: 150px;
	padding: 23px 20px;
}

.rich-card::after {
	content: "";
	position: absolute;
	right: -28px;
	bottom: -28px;
	width: 84px;
	height: 84px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(23,109,255,.11), rgba(255,255,255,0));
	transform: rotate(18deg);
}

.matrix-panel {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 20px 12px;
	border: 1px solid #dceafd;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(35, 95, 172, .08);
}

.matrix-item {
	min-height: 126px;
	padding: 8px 17px;
	border-right: 1px solid #e5eefb;
}

.matrix-item:last-child {
	border-right: 0;
}

.matrix-item .icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 16px;
}

.matrix-item h3 {
	margin: 13px 0 8px;
	color: var(--ink);
	font-size: 16px;
}

.matrix-item p {
	margin: 0;
	color: #5d728e;
	font-size: 12px;
	line-height: 1.65;
}

.hours-feature-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 28px;
}

.hours-feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: center;
	min-height: 260px;
	padding: 28px;
	border: 1px solid #dceafd;
	border-radius: 13px;
	background: linear-gradient(180deg, #fff, #f9fcff);
	box-shadow: 0 16px 36px rgba(45, 104, 184, .09);
}

.hours-feature h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
	font-size: 22px;
	line-height: 1.35;
}

.hours-feature h3 span {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 28px;
	border-radius: 6px;
	color: #fff;
	background: var(--blue);
	font-size: 16px;
}

.hours-feature p,
.hours-feature li {
	color: #4f647f;
	font-size: 14px;
	line-height: 1.85;
}

.hours-feature ul {
	margin: 0;
	padding-left: 18px;
}

.compact-chart {
	min-height: 182px;
}

.hours-feature .mock-card {
	width: 100%;
	overflow: hidden;
	padding: 18px;
}

.hours-feature .panel-grid {
	grid-template-columns: 1.2fr .8fr;
	gap: 12px;
}

.hours-feature .table {
	min-width: 0;
	table-layout: fixed;
}

.hours-feature .table th,
.hours-feature .table td {
	padding: 10px 9px;
	white-space: normal;
	word-break: keep-all;
}

.hours-feature .heatmap {
	grid-template-columns: minmax(92px, 1.4fr) repeat(4, minmax(44px, 1fr));
	gap: 8px;
}

.hours-feature .heatmap span {
	min-width: 0;
	padding: 10px 8px;
}

.rank-audit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.rank-card,
.audit-card {
	padding: 26px;
	border: 1px solid #dceafd;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(45, 104, 184, .09);
}

.rank-podium {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: end;
	gap: 18px;
	margin: 10px 0 18px;
}

.podium-person {
	text-align: center;
}

.podium-avatar {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 8px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #3b8dff, #78c6ff);
	font-weight: 900;
	box-shadow: 0 12px 26px rgba(23,109,255,.18);
}

.podium-person.gold .podium-avatar {
	width: 72px;
	height: 72px;
	background: linear-gradient(135deg, #ffbf43, #ffdf8c);
	color: #8a5600;
}

.podium-person b {
	display: block;
	color: var(--ink);
}

.podium-person span {
	color: var(--muted);
	font-size: 13px;
}

.audit-card {
	position: relative;
	overflow: hidden;
}

.audit-card::after {
	content: "✓";
	position: absolute;
	right: 42px;
	bottom: 30px;
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	border-radius: 36px;
	color: #fff;
	background: linear-gradient(135deg, #2d86ff, #84c7ff);
	font-size: 62px;
	font-weight: 900;
	box-shadow: 0 22px 42px rgba(23,109,255,.22);
	transform: rotate(-8deg);
}

.audit-list {
	display: grid;
	gap: 14px;
	max-width: 68%;
}

.audit-list div {
	display: flex;
	gap: 10px;
	color: #4f647f;
	line-height: 1.65;
}

.audit-list b {
	color: var(--blue);
}

.hours-scenarios {
	grid-template-columns: repeat(5, 1fr);
}

.hours-scenarios .scenario {
	padding: 20px;
}

.hours-scenarios .scenario-img {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 13px;
	color: var(--blue);
	background: #eef6ff;
	font-weight: 900;
}

.hours-scenarios .scenario div:last-child {
	padding: 0;
}

.hours-page .panel,
.hours-page .mock-card,
.hours-page .rank-card {
	overflow-x: auto;
}

.hours-page .table {
	table-layout: auto;
}

.hours-page .table th,
.hours-page .table td {
	white-space: nowrap;
	word-break: keep-all;
}

.hours-page .mock-card .table {
	min-width: 520px;
}

.hours-page .hours-mini-table .table {
	min-width: 500px;
}

.hours-page .rank-card .table {
	min-width: 430px;
}

.hours-page .hours-feature .mock-card {
	overflow: hidden;
}

.hours-page .hours-feature .mock-card .table {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}

.hours-page .hours-feature .mock-card .table th,
.hours-page .hours-feature .mock-card .table td {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.hours-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 52%, rgba(255,255,255,.22), transparent 24%),
		linear-gradient(105deg, #116dff, #2e91ff);
}

.hours-cta::after {
	content: "";
	position: absolute;
	right: 12%;
	bottom: -56px;
	width: 280px;
	height: 170px;
	border: 1px solid rgba(255,255,255,.36);
	border-radius: 24px;
	background: rgba(255,255,255,.13);
	transform: rotate(-8deg);
}

@media (max-width: 1180px) {
	.hours-hero .hero-grid,
	.hours-feature-grid,
	.rank-audit {
		grid-template-columns: 1fr;
	}

	.hours-board {
		position: relative;
		right: auto;
		top: auto;
		width: calc(100% - 80px);
	}

	.matrix-panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.matrix-item {
		border-right: 0;
		border-bottom: 1px solid #e5eefb;
	}
}

@media (max-width: 760px) {
	.hours-title {
		font-size: 26px;
	}

	.hours-hero .hero-grid,
	.hours-feature,
	.hours-why,
	.hours-scenarios,
	.matrix-panel {
		grid-template-columns: 1fr;
	}

	.hours-board {
		width: 100%;
	}

	.hours-board-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		height: auto;
		padding: 12px;
	}

	.hours-board-body,
	.hours-dashboard-grid,
	.hours-kpis {
		grid-template-columns: 1fr;
	}

	.hours-mini-table {
		overflow-x: auto;
	}

	.hours-mini-table .table {
		min-width: 520px;
	}

	.hours-feature .mock-card {
		padding: 14px;
	}

	.hours-feature .table {
		font-size: 11px;
	}

	.hours-feature .table th,
	.hours-feature .table td {
		padding: 8px 6px;
		word-break: break-all;
	}

	.hours-feature .heatmap {
		grid-template-columns: minmax(68px, 1.2fr) repeat(4, minmax(28px, 1fr));
		gap: 6px;
		font-size: 11px;
	}

	.hours-feature .heatmap span {
		padding: 8px 4px;
		overflow-wrap: anywhere;
	}

	.hours-rail,
	.hours-phone,
	.audit-card::after {
		display: none;
	}

	.audit-list {
		max-width: none;
	}
}

/* Enterprise-grade polish shared by learning module pages */
.site-header {
	box-shadow: 0 10px 30px rgba(22, 71, 132, .05);
}

.nav-links a {
	transition: color .2s ease;
}

.nav-links a:hover {
	color: var(--blue);
}

.btn,
.link-arrow,
.card,
.flow li,
.mock-card,
.scenario,
details {
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.card:hover,
.flow li:hover,
.mock-card:hover,
.scenario:hover,
details:hover {
	border-color: #bcd8ff;
	box-shadow: 0 22px 46px rgba(35, 93, 170, .12);
	transform: translateY(-3px);
}

.hero {
	min-height: 600px;
}

.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	background:
		linear-gradient(174deg, transparent 0 48%, rgba(255,255,255,.78) 49% 53%, transparent 54%),
		linear-gradient(178deg, transparent 0 60%, rgba(23,109,255,.08) 61% 63%, transparent 64%);
	pointer-events: none;
}

.hero-grid {
	z-index: 2;
}

.eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 5px rgba(23, 109, 255, .1);
}

.hero h1 {
	max-width: 720px;
	text-wrap: balance;
}

.hero h2 {
	max-width: 680px;
	font-weight: 800;
	text-wrap: balance;
}

.hero-points {
	align-items: stretch;
}

.mini-point {
	padding: 14px 10px;
	border: 1px solid rgba(193, 216, 248, .78);
	border-radius: 10px;
	background: rgba(255,255,255,.66);
	box-shadow: 0 12px 28px rgba(37, 96, 171, .08);
	backdrop-filter: blur(8px);
}

.preview::before {
	content: "";
	position: absolute;
	right: 38px;
	top: -20px;
	width: 150px;
	height: 150px;
	border: 1px solid rgba(23,109,255,.18);
	border-radius: 32px;
	background: rgba(255,255,255,.42);
	transform: rotate(14deg);
}

.window,
.hours-board {
	backdrop-filter: blur(12px);
}

.window::after,
.hours-board::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
	pointer-events: none;
}

.window-top,
.hours-board-head {
	background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94));
}

.panel,
.kpi,
.phone-card,
.mini-list div,
.file,
.message {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.stat-strip {
	padding: 0 0 4px;
}

.stats {
	position: relative;
	overflow: hidden;
}

.stats::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green), var(--orange));
}

.section {
	position: relative;
}

.section:not(.alt)::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(23,109,255,.035) 1px, transparent 1px),
		linear-gradient(180deg, rgba(23,109,255,.03) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
	pointer-events: none;
}

.section > .shell {
	position: relative;
	z-index: 1;
}

.section-head h2 {
	text-wrap: balance;
}

.card {
	position: relative;
	overflow: hidden;
}

.card::after {
	content: "";
	position: absolute;
	right: -28px;
	bottom: -34px;
	width: 96px;
	height: 96px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(23,109,255,.12), rgba(34,199,135,.08));
	transform: rotate(18deg);
}

.card > * {
	position: relative;
	z-index: 1;
}

.flow {
	padding-left: 0;
}

.flow li {
	overflow: hidden;
}

.flow li::after {
	content: "";
	position: absolute;
	right: -24px;
	top: -24px;
	width: 78px;
	height: 78px;
	border-radius: 24px;
	background: rgba(23,109,255,.07);
	transform: rotate(18deg);
}

.feature-row {
	margin: 0 0 18px;
	padding: 34px;
	border: 1px solid #dceafd;
	border-radius: 14px;
	background: rgba(255,255,255,.82);
	box-shadow: 0 16px 34px rgba(45, 104, 184, .07);
}

.feature-row:last-child {
	margin-bottom: 0;
}

.feature-copy h3 span {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 32px;
	border-radius: 7px;
	color: #fff;
	background: linear-gradient(135deg, var(--blue), #4aa4ff);
	font-size: 17px;
}

.enterprise-section {
	padding-top: 42px;
	background:
		linear-gradient(180deg, #fff, #f7fbff);
}

.enterprise-section + .stat-strip {
	margin-top: 0;
}

.enterprise-panel {
	display: grid;
	grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
	gap: 30px;
	align-items: stretch;
	padding: 28px;
	border: 1px solid #d8e8fb;
	border-radius: 16px;
	background:
		radial-gradient(circle at 18% 20%, rgba(34,199,216,.1), transparent 32%),
		linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,250,255,.92));
	box-shadow: 0 24px 58px rgba(32, 89, 168, .12);
}

.enterprise-copy {
	position: relative;
	min-height: 260px;
	padding: 28px;
	border-radius: 12px;
	color: #fff;
	background:
		radial-gradient(circle at 88% 18%, rgba(79,188,255,.36), transparent 28%),
		linear-gradient(145deg, #062a6e, #075fce 64%, #1397d8);
	overflow: hidden;
}

.enterprise-copy::after {
	content: "";
	position: absolute;
	right: -64px;
	bottom: -58px;
	width: 190px;
	height: 190px;
	border: 24px solid rgba(255,255,255,.13);
	border-radius: 50%;
}

.enterprise-copy .eyebrow {
	color: #fff;
	background: rgba(255,255,255,.14);
	box-shadow: none;
}

.enterprise-copy .eyebrow::before {
	box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}

.enterprise-copy h2 {
	position: relative;
	z-index: 1;
	margin: 26px 0 16px;
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	text-wrap: balance;
}

.enterprise-copy p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: rgba(255,255,255,.82);
	font-size: 15px;
	line-height: 1.9;
}

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

.enterprise-item {
	position: relative;
	min-height: 150px;
	padding: 22px 22px 20px;
	border: 1px solid #dfeafa;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(39, 98, 178, .07);
	overflow: hidden;
}

.enterprise-item::after {
	content: "";
	position: absolute;
	right: -26px;
	bottom: -28px;
	width: 88px;
	height: 88px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(23,109,255,.1), rgba(34,199,135,.08));
	transform: rotate(16deg);
}

.enterprise-item b {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 30px;
	border-radius: 7px;
	color: #fff;
	background: linear-gradient(135deg, var(--blue), #4aa4ff);
	font-size: 14px;
}

.enterprise-item h3 {
	margin: 18px 0 9px;
	color: var(--ink);
	font-size: 18px;
}

.enterprise-item p {
	margin: 0;
	color: #526780;
	font-size: 14px;
	line-height: 1.75;
}

.dark-band {
	position: relative;
	overflow: hidden;
}

.dark-band::before {
	content: "";
	position: absolute;
	left: 8%;
	top: -88px;
	width: 260px;
	height: 260px;
	border: 32px solid rgba(255,255,255,.08);
	border-radius: 50%;
}

.dark-band .shell {
	position: relative;
	z-index: 1;
}

.cta {
	position: relative;
	overflow: hidden;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.cta-inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 1060px) {
	.hero {
		min-height: auto;
	}

	.enterprise-panel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.hero::after,
	.preview::before,
	.section:not(.alt)::before {
		display: none;
	}

	.mini-point {
		text-align: left;
	}

	.mini-point b {
		white-space: normal;
	}

	.feature-row {
		padding: 22px;
	}

	.enterprise-panel {
		padding: 16px;
		border-radius: 12px;
	}

	.enterprise-copy {
		min-height: auto;
		padding: 22px;
	}

	.enterprise-copy h2 {
		font-size: 26px;
	}

	.enterprise-grid {
		grid-template-columns: 1fr;
	}
}