:root {
		--hc-primary: #EB6F46;
		--hc-primary-dark: #d85f36;
		--hc-secondary: #ffc107;
		--hc-secondary-dark: #e0a800;
		--hc-danger: #dc3545;
		--hc-danger-dark: #bb2d3b;
		--hc-dark: #331b17;
		--hc-text: #5a4038;
		--hc-muted: #8f736a;
		--hc-bg: #fffaf7;
		--hc-card: #ffffff;
		--hc-panel: #fff3ed;
		--hc-border: #f2ddd5;
		--hc-shadow: 0 16px 40px rgba(51, 27, 23, 0.08);
		--hc-radius: 20px;
	}

	body {
		background: var(--hc-bg);
		color: var(--hc-text);
	}

	.section-title {
		font-size: 2.3rem;
		font-weight: 800;
		color: var(--hc-dark);
		margin-bottom: 14px;
	}

	.section-subtitle {
		max-width: 820px;
		margin: 0 auto;
		color: var(--hc-muted);
		font-size: 1.04rem;
		line-height: 1.85;
	}

	.hc-badge {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 9px 16px;
		border-radius: 999px;
		background: rgba(235, 111, 70, 0.12);
		color: var(--hc-primary-dark);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .2px;
		margin-bottom: 18px;
		border: 1px solid rgba(235, 111, 70, 0.15);
	}

	.btn-hc-primary {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: #fff;
		color: var(--hc-primary);
		border: none;
		border-radius: 999px;
		padding: 14px 28px;
		font-weight: 700;
		box-shadow: 0 10px 24px rgba(220, 53, 69, 0.12);
		transition: all .3s ease;
	}

	.btn-hc-primary:hover {
		color: var(--hc-primary-dark);
		transform: translateY(-2px);
	}

	.btn-hc-outline {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		border: 1px solid rgba(255, 255, 255, .35);
		color: #fff;
		background: rgba(255, 255, 255, .08);
		border-radius: 999px;
		padding: 14px 28px;
		font-weight: 600;
		transition: all .3s ease;
	}

	.btn-hc-outline:hover {
		color: #fff;
		background: rgba(255, 255, 255, .16);
	}

	.hc-hero {
		position: relative;
		overflow: hidden;
		padding: 110px 0 90px;
		background:
			radial-gradient(circle at top right, rgba(255, 193, 7, .22), transparent 25%),
			radial-gradient(circle at left center, rgba(255, 255, 255, .08), transparent 30%),
			linear-gradient(135deg, #5a1d22 0%, #dc3545 38%, #EB6F46 72%, #ffc107 100%);
	}

	.hc-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background:
			linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 42%),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'%3E%3Cpath d='M0 90h180M90 0v180'/%3E%3Ccircle cx='90' cy='90' r='48'/%3E%3C/g%3E%3C/svg%3E");
		background-size: cover, 260px;
		pointer-events: none;
	}

	.hero-content,
	.hero-mockup {
		position: relative;
		z-index: 2;
	}

	.hero-kicker {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: rgba(255, 255, 255, .12);
		border: 1px solid rgba(255, 255, 255, .18);
		color: #fff;
		border-radius: 999px;
		padding: 8px 16px;
		font-size: 13px;
		font-weight: 700;
		margin-bottom: 18px;
	}

	.hero-title {
		color: #fff;
		font-size: 3.15rem;
		font-weight: 800;
		line-height: 1.12;
		margin-bottom: 20px;
	}

	.hero-title span {
		color: #fff0a8;
	}

	.hero-text {
		max-width: 650px;
		color: rgba(255, 255, 255, .9);
		font-size: 1.08rem;
		line-height: 1.9;
		margin-bottom: 30px;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		margin-bottom: 28px;
	}

	.hero-points {
		display: flex;
		flex-wrap: wrap;
		gap: 14px 24px;
	}

	.hero-points .item {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: rgba(255, 255, 255, .9);
		font-size: .95rem;
	}

	.hero-points .item i {
		color: #ffe082;
	}

	.hero-preview-card {
		background: rgba(255, 255, 255, .13);
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 26px;
		backdrop-filter: blur(14px);
		box-shadow: 0 25px 60px rgba(51, 27, 23, .24);
		padding: 18px;
	}

	.preview-toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		background: rgba(255, 255, 255, .94);
		border-radius: 18px;
		padding: 14px;
		margin-bottom: 14px;
	}

	.preview-chip,
	.preview-control {
		background: #fff8f5;
		border: 1px solid #f2ddd5;
		border-radius: 999px;
		padding: 9px 14px;
		font-size: .83rem;
		color: var(--hc-text);
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-weight: 600;
	}

	.preview-publish {
		margin-left: auto;
		background: linear-gradient(135deg, var(--hc-primary), var(--hc-danger));
		color: #fff;
		border: none;
	}

	.preview-grid {
		background: rgba(255, 255, 255, .96);
		border-radius: 22px;
		padding: 16px;
		overflow: hidden;
	}

	.preview-hours {
		display: grid;
		grid-template-columns: 180px repeat(8, 1fr);
		gap: 8px;
		margin-bottom: 10px;
	}

	.preview-hours div {
		background: #fff3ed;
		border: 1px solid #f2ddd5;
		color: var(--hc-muted);
		font-size: .75rem;
		text-align: center;
		padding: 8px 4px;
		border-radius: 12px;
		font-weight: 700;
	}

	.preview-row {
		display: grid;
		grid-template-columns: 180px 1fr;
		gap: 10px;
		margin-bottom: 10px;
	}

	.preview-carer {
		background: #fff8f5;
		border: 1px solid #f2ddd5;
		border-radius: 16px;
		padding: 14px;
	}

	.preview-carer strong {
		display: block;
		color: var(--hc-dark);
		font-size: .95rem;
	}

	.preview-carer span {
		font-size: .78rem;
		color: var(--hc-muted);
	}

	.preview-timeline {
		position: relative;
		min-height: 72px;
		background:
			linear-gradient(to right, rgba(235, 111, 70, .08) 1px, transparent 1px),
			linear-gradient(to right, rgba(220, 53, 69, .07) 1px, transparent 1px);
		background-size: 12.5% 100%, 6.25% 100%;
		background-color: #fff;
		border: 1px solid #f2ddd5;
		border-radius: 16px;
		overflow: hidden;
	}

	.shift-demo {
		position: absolute;
		top: 12px;
		height: 22px;
		border-radius: 999px;
		font-size: .72rem;
		font-weight: 700;
		padding: 0 10px;
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		color: #fff;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
	}

	.shift-scheduled {
		background: linear-gradient(135deg, #EB6F46, #ff9a76);
	}

	.shift-completed {
		background: linear-gradient(135deg, #ffc107, #ffd95c);
		color: #5c3b00;
	}

	.shift-ongoing {
		background: linear-gradient(135deg, #dc3545, #ef6673);
	}

	.shift-late {
		background: linear-gradient(135deg, #8b1e2d, #dc3545);
	}

	.shift-cancelled {
		background: linear-gradient(135deg, #c9b3ab, #9f877f);
	}

	.current-time-line {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 58%;
		width: 2px;
		background: var(--hc-danger);
	}

	.current-time-label {
		position: absolute;
		top: 6px;
		left: calc(58% - 20px);
		background: var(--hc-danger);
		color: #fff;
		padding: 4px 8px;
		border-radius: 999px;
		font-size: .68rem;
		font-weight: 700;
	}

	.summary-strip {
		position: relative;
		margin-top: -46px;
		z-index: 4;
	}

	.summary-panel {
		background: #fff;
		border: 1px solid var(--hc-border);
		border-radius: 24px;
		padding: 34px 24px;
		box-shadow: var(--hc-shadow);
	}

	.summary-item i {
		font-size: 30px;
		color: var(--hc-primary);
		margin-bottom: 14px;
	}

	.summary-item h3 {
		font-size: 1.08rem;
		color: var(--hc-dark);
		font-weight: 700;
		margin-bottom: 10px;
	}

	.summary-item p {
		color: var(--hc-muted);
		line-height: 1.8;
		margin: 0;
	}

	.trust-bar {
		background: linear-gradient(180deg, #fff9f6 0%, #fff4ee 100%);
		border-top: 1px solid var(--hc-border);
		border-bottom: 1px solid var(--hc-border);
	}

	.trust-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 16px;
		background: #fff;
		border: 1px solid var(--hc-border);
		border-radius: 999px;
		color: var(--hc-muted);
		font-size: .92rem;
		font-weight: 600;
	}

	.trust-chip i {
		color: var(--hc-primary);
	}

	.feature-card,
	.detail-card,
	.process-card,
	.status-card,
	.highlight-card,
	.faq-card {
		background: var(--hc-card);
		border: 1px solid var(--hc-border);
		border-radius: var(--hc-radius);
		padding: 28px;
		height: 100%;
		box-shadow: 0 8px 22px rgba(51, 27, 23, .04);
		transition: all .3s ease;
	}

	.feature-card:hover,
	.detail-card:hover,
	.process-card:hover,
	.status-card:hover,
	.highlight-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--hc-shadow);
	}

	.feature-icon,
	.detail-icon,
	.process-icon,
	.status-icon,
	.highlight-icon {
		width: 64px;
		height: 64px;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28px;
		margin-bottom: 18px;
	}

	.bg-primary-soft {
		background: linear-gradient(135deg, #EB6F46, #ff946d);
	}

	.bg-secondary-soft {
		background: linear-gradient(135deg, #ffc107, #ffd95f);
		color: #5c3b00 !important;
	}

	.bg-danger-soft {
		background: linear-gradient(135deg, #dc3545, #ef6874);
	}

	.bg-warm-soft {
		background: linear-gradient(135deg, #f08b5d, #EB6F46);
	}

	.bg-dark-soft {
		background: linear-gradient(135deg, #5a1d22, #8d2d37);
	}

	.bg-mix-soft {
		background: linear-gradient(135deg, #EB6F46, #dc3545);
	}

	.feature-card h4,
	.detail-card h4,
	.process-card h4,
	.status-card h4,
	.highlight-card h4,
	.faq-card h5 {
		color: var(--hc-dark);
		font-weight: 700;
		margin-bottom: 10px;
	}

	.feature-card p,
	.detail-card p,
	.process-card p,
	.status-card p,
	.highlight-card p,
	.faq-card p {
		color: var(--hc-muted);
		line-height: 1.8;
		margin-bottom: 0;
	}

	.feature-card ul,
	.detail-card ul {
		padding-left: 18px;
		margin: 14px 0 0;
	}

	.feature-card li,
	.detail-card li {
		color: var(--hc-text);
		margin-bottom: 8px;
		font-size: .96rem;
	}

	.showcase-panel {
		background: linear-gradient(135deg, #ffffff 0%, #fff7f2 100%);
		border: 1px solid var(--hc-border);
		border-radius: 26px;
		padding: 38px;
		box-shadow: var(--hc-shadow);
	}

	.check-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.check-list li {
		position: relative;
		padding-left: 34px;
		margin-bottom: 16px;
		color: var(--hc-text);
		line-height: 1.75;
	}

	.check-list li::before {
		content: "\e64c";
		font-family: 'themify';
		position: absolute;
		left: 0;
		top: 2px;
		color: var(--hc-danger);
		font-size: 16px;
	}

	.status-pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border-radius: 999px;
		padding: 8px 14px;
		font-weight: 700;
		font-size: .84rem;
		margin-bottom: 12px;
	}

	.status-assigned {
		background: rgba(235, 111, 70, .12);
		color: var(--hc-primary-dark);
	}

	.status-partial {
		background: rgba(255, 193, 7, .18);
		color: #7a5900;
	}

	.status-unassigned {
		background: rgba(220, 53, 69, .12);
		color: var(--hc-danger-dark);
	}

	.stats-section {
		background: linear-gradient(180deg, #fff9f5 0%, #fff2e8 100%);
	}

	.stat-card {
		background: #fff;
		border: 1px solid var(--hc-border);
		border-radius: 18px;
		padding: 28px 18px;
		text-align: center;
		height: 100%;
		box-shadow: 0 10px 24px rgba(51, 27, 23, .05);
	}

	.stat-number {
		font-size: 2.5rem;
		color: var(--hc-primary);
		font-weight: 800;
		margin-bottom: 6px;
	}

	.stat-label {
		color: var(--hc-muted);
		font-size: .95rem;
		font-weight: 600;
	}

	.timeline-flow {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 18px;
	}

	.timeline-step {
		min-width: 130px;
		text-align: center;
	}

	.timeline-step .circle {
		width: 78px;
		height: 78px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 0 auto 12px;
		font-size: 28px;
		box-shadow: 0 12px 22px rgba(235, 111, 70, .16);
	}

	.timeline-line {
		width: 56px;
		border-top: 2px dashed #efb8a6;
		margin-top: -22px;
	}

	.cta-section {
		background:
			radial-gradient(circle at top right, rgba(255, 255, 255, .08), transparent 20%),
			linear-gradient(135deg, #5a1d22 0%, #dc3545 42%, #EB6F46 78%, #ffc107 100%);
		color: #fff;
		padding: 82px 0;
	}

	.cta-section h2 {
		color: #fff;
		font-size: 2.35rem;
		font-weight: 800;
		margin-bottom: 14px;
	}

	.cta-section p {
		max-width: 760px;
		margin: 0 auto 25px;
		color: rgba(255, 255, 255, .88);
		line-height: 1.85;
	}

	@media (min-width: 1200px) {
		.container {
			max-width: 1140px;
		}
	}

	@media (max-width: 991px) {
		.hero-title {
			font-size: 2.45rem;
		}

		.summary-strip {
			margin-top: -30px;
		}

		.preview-hours {
			grid-template-columns: 140px repeat(8, 1fr);
		}

		.preview-row {
			grid-template-columns: 140px 1fr;
		}

		.timeline-flow {
			gap: 14px;
		}
	}

	@media (max-width: 767px) {
		.hc-hero {
			padding: 82px 0 62px;
		}

		.hero-title {
			font-size: 2rem;
		}

		.hero-actions {
			flex-direction: column;
			align-items: stretch;
		}

		.btn-hc-primary,
		.btn-hc-outline {
			justify-content: center;
		}

		.summary-panel,
		.showcase-panel {
			padding: 24px 18px;
		}

		.preview-hours {
			grid-template-columns: 110px repeat(4, 1fr);
		}

		.preview-hours div:nth-child(n+6) {
			display: none;
		}

		.section-title {
			font-size: 1.85rem;
		}

		.cta-section h2 {
			font-size: 1.85rem;
		}

		.timeline-line {
			display: none;
		}
	}

	@media (max-width: 575px) {
		.hero-title {
			font-size: 1.75rem;
		}

		.feature-card,
		.detail-card,
		.process-card,
		.status-card,
		.highlight-card,
		.faq-card {
			padding: 22px 18px;
		}

		.stat-number {
			font-size: 2rem;
		}

		.preview-toolbar {
			padding: 12px;
		}

		.preview-control,
		.preview-chip {
			width: 100%;
			justify-content: center;
		}

		.preview-publish {
			margin-left: 0;
		}
	}

	@media print {

		.hc-hero,
		.cta-section,
		.hero-actions,
		.btn-hc-primary,
		.btn-hc-outline {
			display: none !important;
		}

		.feature-card,
		.detail-card,
		.process-card,
		.status-card,
		.highlight-card,
		.faq-card,
		.stat-card {
			box-shadow: none !important;
			break-inside: avoid;
		}
	}