/*!
Theme Name: staffco
Theme URI: http://staffco.io/
Author: staffco.io
Author URI: http://staffco.io/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: staffco
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

staffco is based on Underscores https://staffco.io/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ============================================
    CSS VARIABLES - Design Tokens
============================================ */
:root {
	/* Colors */
	--color-primary: #0066FF;
	--color-primary-hover: #0052CC;
	--color-primary-light: rgba(0, 102, 255, 0.08);
	--color-accent-green: #22C55E;
	--color-accent-green-dark: #027F56;
	--color-accent-sky: #0EA5E9;
	--color-accent-purple: #7C3AED;
	--color-accent-blue-dark: #0726D9;

	/* Backgrounds */
	--color-bg-primary: #FFFFFF;
	--color-bg-secondary: #F9FAFB;
	--color-bg-tertiary: #F3F4F6;
	--color-bg-dark: #1D1D1F;

	/* Text */
	--color-text-primary: #1D1D1F;
	--color-text-secondary: #4B5563;
	--color-text-muted: #9CA3AF;
	--color-text-inverse: #FFFFFF;

	/* Borders */
	--color-border: rgba(0, 0, 0, 0.08);
	--color-border-light: rgba(0, 0, 0, 0.04);

	/* Typography */
	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	--spacing-3xl: 64px;
	--spacing-4xl: 96px;

	/* Border Radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.16);

	/* Container */
	--container-max: 1200px;
	--container-padding: 24px;
}

/* ============================================
           RESET & BASE
           ============================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-family);
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	line-height: 1.6;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: inherit;
	transition: color 0.2s ease;
}

img {
	max-width: 100%;
	height: auto;
}

/* ============================================
           UTILITIES
           ============================================ */
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ============================================
           BUTTONS
           ============================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
	border-radius: var(--radius-md);
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
	transform: translateY(-1px);
}

.btn-secondary {
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
}

.btn-secondary:hover {
	background: var(--color-bg-secondary);
	border-color: rgba(0, 0, 0, 0.12);
}

.btn-lg {
	padding: 16px 32px;
	font-size: 16px;
}

/* ============================================
           NAVIGATION
           ============================================ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--color-border);
	z-index: 1000;
}

.nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding: 0 var(--container-padding);
	max-width: var(--container-max);
	margin: 0 auto;
}

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

.nav-logo-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-text-primary);
	letter-spacing: -0.5px;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-secondary);
	border-radius: var(--radius-sm);
	transition: all 0.15s ease;
}

.nav-link:hover {
	color: var(--color-text-primary);
	background: var(--color-bg-secondary);
}

.nav-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.nav-item:hover .nav-link svg {
	transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s ease;
}

.nav-item:hover .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-dropdown-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--color-text-secondary);
	border-radius: var(--radius-md);
	transition: all 0.15s ease;
}

.nav-dropdown-item:hover {
	background: var(--color-bg-secondary);
	color: var(--color-text-primary);
}

.nav-dropdown-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-tertiary);
	border-radius: var(--radius-md);
	color: var(--color-primary);
}

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

.nav-login {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-secondary);
	padding: 10px 16px;
}

.nav-login:hover {
	color: var(--color-primary);
}

.nav-cta {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	padding: 10px 20px;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 600;
}

.nav-cta:hover {
	background: var(--color-primary-hover);
}

/* Mobile Menu Toggle */
.nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
}

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

	.nav-toggle {
		display: flex;
	}
}

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


/* ============================================
           HERO SECTION
           ============================================ */
.hero {
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 100%);
	padding: 80px 32px 100px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(0, 102, 255, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(2, 127, 86, 0.1) 100%);
	padding: 8px 16px;
	border-radius: 20px;
	margin-bottom: 24px;
}

.hero-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}

.hero-badge-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-dark);
}

.hero-title {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}

.hero-title-gradient {
	background: linear-gradient(135deg, #0066FF 0%, #0EA5E9 50%, #7C3AED 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-description {
	font-size: 20px;
	color: var(--color-text-secondary);
	line-height: 1.6;
	max-width: 600px;
	margin: 0 auto 40px;
}

@media only screen and (max-width: 768px) {
	.hero {
		padding: 60px 24px 80px;
	}

	.hero-title {
		font-size: 36px;
	}

	.hero-description {
		font-size: 17px;
	}
}

/* ============================================
           DOWNLOAD CARDS SECTION
           ============================================ */
.downloads {
	padding: 0 32px 80px;
	margin-top: -40px;
	position: relative;
	z-index: 10;
}

.downloads-container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	gap: 24px;
	justify-content: center;
	flex-wrap: wrap;
}

.download-card {
	position: relative;
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	padding: 32px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex: 1;
	min-width: 280px;
	max-width: 340px;
}

.download-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

.download-card-recommended {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #22C55E 0%, #027F56 100%);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.download-card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.download-card-icon {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: var(--color-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-primary);
	transition: all 0.3s ease;
}

.download-card:hover .download-card-icon {
	background: linear-gradient(135deg, #0066FF 0%, #0EA5E9 100%);
	color: white;
}

.download-card-title {
	text-align: center;
}

.download-card-os {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 4px;
}

.download-card-desc {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.download-card-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--color-primary);
	color: white;
	padding: 14px 32px;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	transition: all 0.2s ease;
}

.download-btn:hover {
	background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
	box-shadow: var(--shadow-button);
}

.download-card-requirements {
	width: 100%;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.download-card-requirements-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.download-card-requirements-list {
	font-size: 13px;
	color: var(--color-text-secondary);
}

.download-card-requirements-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.download-card-requirements-check {
	color: var(--color-accent);
	flex-shrink: 0;
}

.downloads-alt {
	text-align: center;
	margin-top: 32px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.downloads-alt a {
	color: var(--color-primary);
	font-weight: 500;
}

.downloads-alt a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 768px) {
	.downloads {
		padding: 0 24px 60px;
	}

	.download-card {
		max-width: 100%;
	}
}

/* ============================================
           FEATURES SECTION
           ============================================ */
.features {
	background: white;
	padding: 80px 32px;
}

.features-container {
	max-width: 1000px;
	margin: 0 auto;
}

.features-header {
	text-align: center;
	margin-bottom: 60px;
}

.features-title {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 16px;
}

.features-subtitle {
	font-size: 18px;
	color: var(--color-text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
}

.feature-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.feature-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(0, 102, 255, 0.1) 0%, rgba(14, 165, 233, 0.1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	flex-shrink: 0;
}

.feature-content h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.feature-content p {
	font-size: 14px;
	color: var(--color-text-secondary);
	line-height: 1.5;
}

@media only screen and (max-width: 768px) {
	.features {
		padding: 60px 24px;
	}

	.features-title {
		font-size: 28px;
	}

	.features-subtitle {
		font-size: 16px;
	}
}

/* ============================================
           STEPS SECTION
           ============================================ */
.steps {
	background: var(--color-bg-light);
	padding: 80px 32px;
}

.steps-container {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.steps-title {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 48px;
}

.steps-list {
	display: flex;
	justify-content: center;
	gap: 48px;
	flex-wrap: wrap;
}

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

.step-number {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0066FF 0%, #7C3AED 100%);
	color: white;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-title {
	font-size: 18px;
	font-weight: 600;
}

.step-desc {
	font-size: 14px;
	color: var(--color-text-secondary);
}

@media only screen and (max-width: 768px) {
	.steps {
		padding: 60px 24px;
	}

	.steps-title {
		font-size: 28px;
	}

	.steps-list {
		gap: 32px;
	}
}

/* ============================================
           FOOTER
           ============================================ */
.footer {
	background: var(--color-bg-dark);
	color: var(--color-text-inverse);
	padding: 80px 0 40px;
}

.footer-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.footer-main {
	display: grid;
	grid-template-columns: 2fr repeat(4, 1fr);
	gap: 48px;
	margin-bottom: 64px;
}

.footer-brand {
	max-width: 280px;
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.footer-logo-text {
	font-size: 22px;
	font-weight: 700;
}

.footer-tagline {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
	margin-bottom: 24px;
}

.footer-social {
	display: flex;
	gap: 12px;
}

.footer-social-link {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.2s ease;
}

.footer-social-link:hover {
	background: var(--color-primary);
	color: white;
}

.footer-column h5 {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.footer-column ul {
	list-style: none;
}

.footer-column li {
	margin-bottom: 12px;
}

.footer-column a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s ease;
}

.footer-column a:hover {
	color: white;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-copyright {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
	display: flex;
	gap: 24px;
}

.footer-legal a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.5);
}

.footer-legal a:hover {
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.footer-main {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-brand {
		grid-column: span 3;
		max-width: none;
		margin-bottom: 24px;
	}
}

@media (max-width: 640px) {
	.footer {
		padding: 48px 0 32px;
	}

	.footer-main {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.footer-brand {
		grid-column: span 2;
	}
}


/* ============================================
           UTILITY CLASSES
           ============================================ */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.content-wrapper {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px;
	gap: 48px;
}

/* Table of Contents */
.tocify {
	width: 280px;
	flex-shrink: 0;
	position: sticky;
	top: 100px;
	height: fit-content;
}

.toc-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 16px;
}

.toc-list {
	list-style: none;
}

.toc-list li {
	margin-bottom: 8px;
}

.toc-list a {
	font-size: 14px;
	color: var(--color-text-secondary);
	display: block;
	padding: 6px 12px;
	border-radius: 6px;
	border-left: 2px solid transparent;
	transition: all 0.2s ease;
}

.toc-list a:hover {
	color: var(--color-primary);
	background: var(--color-bg-card);
	border-left-color: var(--color-primary);
	text-decoration: none;
}

/* Main Content */
.main-content {
	flex: 1;
	min-width: 0;
}

.legal-content {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	padding: 48px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.legal-content h2:nth-child(2) {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

.legal-content h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 40px 0 16px 0;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}

.legal-content h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-primary);
	margin: 24px 0 12px 0;
}

.legal-content p {
	margin-bottom: 16px;
	color: var(--color-text-secondary);
}

.legal-content ul,
.legal-content ol {
	margin: 0 0 16px 24px;
	color: var(--color-text-secondary);
}

.legal-content li {
	margin-bottom: 8px;
}

.legal-content strong {
	color: var(--color-text-primary);
	font-weight: 600;
}

.highlight-box {
	background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
	border-left: 4px solid var(--color-primary);
	padding: 16px 20px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 24px 0;
}

.highlight-box p {
	margin: 0;
	color: var(--color-text-primary);
}

.highlight-box.warning {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.08) 100%);
	border-left-color: var(--color-purple);
}

.highlight-box.success {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(2, 127, 86, 0.08) 100%);
	border-left-color: var(--color-accent);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
}

.data-table th,
.data-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}

.data-table th {
	background: var(--color-bg-light);
	font-weight: 600;
	color: var(--color-text-primary);
}

.data-table td {
	color: var(--color-text-secondary);
}

.data-table tr:last-child td {
	border-bottom: none;
}

@media only screen and (max-width: 1024px) {
	.tocify {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.content-wrapper {
		padding: 32px 24px;
	}

	.legal-content {
		padding: 32px 24px;
	}
}

.page-header {
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 100%);
	padding: 60px 32px 48px;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
	font-size: 42px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--color-text-primary);
}

.page-header-meta {
	font-size: 15px;
	color: var(--color-text-secondary);
}

@media only screen and (max-width: 768px) {
	.page-header {
		padding: 48px 24px 36px;
	}

	.page-header h1 {
		font-size: 32px;
	}

	.cookie-category {
		padding: 20px;
	}

	.cookie-table {
		font-size: 12px;
	}

	.cookie-table th,
	.cookie-table td {
		padding: 10px 8px;
	}

	.preferences-section {
		padding: 24px 20px;
	}
}

ul.tocify-header.nav.nav-list {
	position: unset !important;
	background: unset !important;
	backdrop-filter: unset !important;
	border-bottom: unset !important;
}

.tocify-extend-page {
	display: none !important;
}

.legal-content a {
	color: #0166ff;
}

.legal-content a:hover {
	text-decoration: underline;
	color: #003f9f;
}

.cookie-category {
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 24px;
	margin: 24px 0;
}

.cookie-category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 12px;
}

.cookie-category-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cookie-category-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.cookie-category-icon.essential {
	background: linear-gradient(135deg, #22C55E 0%, #027F56 100%);
}

.cookie-category-icon.functional {
	background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
}

.cookie-category-icon.analytics {
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.cookie-category-icon.marketing {
	background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}

.cookie-category-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.cookie-category-badge {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cookie-category-badge.required {
	background: rgba(34, 197, 94, 0.1);
	color: var(--color-accent-dark);
}

.cookie-category-badge.optional {
	background: rgba(107, 114, 128, 0.1);
	color: var(--color-text-secondary);
}

.cookie-category-description {
	color: var(--color-text-secondary);
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.6;
}

/* Cookie Table */
.cookie-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 16px;
}

.cookie-table th,
.cookie-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}

.cookie-table th {
	background: white;
	font-weight: 600;
	color: var(--color-text-primary);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cookie-table td {
	color: var(--color-text-secondary);
}

.cookie-table tr:last-child td {
	border-bottom: none;
}

.cookie-table code {
	background: rgba(0, 0, 0, 0.05);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'SF Mono', Monaco, 'Courier New', monospace;
	font-size: 12px;
	color: var(--color-text-primary);
}

.cookie-duration {
	white-space: nowrap;
}

.preferences-section {
	background: linear-gradient(135deg, rgba(0, 102, 255, 0.03) 0%, rgba(124, 58, 237, 0.03) 100%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 32px;
	margin: 32px 0;
	text-align: center;
}

.preferences-section h3 {
	margin-top: 0;
	margin-bottom: 12px;
}

.preferences-section p {
	max-width: 500px;
	margin: 0 auto 20px;
}

.preferences-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-primary);
	color: white;
	padding: 12px 24px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.preferences-btn:hover {
	background: var(--color-primary-hover);
	text-decoration: none;
	color: white;
}

.browser-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.browser-item {
	background: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: border-color 0.2s ease;
}

.browser-item:hover {
	border-color: var(--color-primary);
}

.browser-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 8px;
}

.browser-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--color-text-primary);
}

/* ============================================
           HERO SECTION
           ============================================ */
.hero {
	padding: 160px 0 100px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(0, 102, 255, 0.06) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(34, 197, 94, 0.05) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.hero-container {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-primary-light);
	color: var(--color-primary);
	padding: 8px 16px;
	border-radius: var(--radius-full);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 24px;
}

.hero-badge-dot {
	width: 8px;
	height: 8px;
	background: var(--color-accent-green);
	border-radius: 50%;
	animation: pulse 2s infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.hero-title {
	font-size: 64px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -2px;
	margin-bottom: 24px;
	color: var(--color-text-primary);
}

.hero-title-highlight {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-purple) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-description {
	font-size: 20px;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin-bottom: 40px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.hero-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 48px;
}

.hero-note {
	font-size: 14px;
	color: var(--color-text-muted);
}

.hero-note strong {
	color: var(--color-text-secondary);
}

@media (max-width: 768px) {
	.hero {
		padding: 120px 0 60px;
	}

	.hero-title {
		font-size: 40px;
		letter-spacing: -1px;
	}

	.hero-description {
		font-size: 17px;
	}

	.hero-cta {
		flex-direction: column;
	}

	.hero-cta .btn {
		width: 100%;
	}
}

/* ============================================
           SOCIAL PROOF BAR
           ============================================ */
.social-proof {
	padding: 48px 0;
	background: var(--color-bg-primary);
	border-bottom: 1px solid var(--color-border);
}

.social-proof-container {
	text-align: center;
}

.social-proof-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 24px;
}

.social-proof-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
}

.proof-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: var(--color-bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-light);
}

.proof-badge-icon {
	width: 24px;
	height: 24px;
	color: var(--color-accent-green);
}

.proof-badge-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-primary);
}

@media (max-width: 640px) {
	.social-proof-badges {
		gap: 16px;
	}

	.proof-badge {
		padding: 10px 16px;
	}
}

/* ============================================
           PRODUCT SCREENSHOT
           ============================================ */
.product-preview {
            padding: 0 0 80px;
            background: var(--color-bg-secondary);
            overflow: hidden;
        }

        .product-preview-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--container-padding);
        }

        .collage-container {
            position: relative;
            width: 100%;
            height: 600px;
            perspective: 1500px;
        }

        .collage-screenshot {
            position: absolute;
            border-radius: 16px;
            overflow: hidden;
            background: white;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .collage-screenshot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top left;
            display: block;
        }

        .collage-screenshot-main {
            width: 70%;
            height: 460px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            box-shadow: 0 25px 80px -20px rgba(0,0,0,0.25), 0 10px 30px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
        }

        .collage-screenshot-main:hover {
            transform: translate(-50%, -50%) scale(1.02);
            box-shadow: 0 35px 100px -20px rgba(0,0,0,0.3), 0 15px 40px -10px rgba(0,0,0,0.2);
        }

        .collage-screenshot-left {
            width: 50%;
            height: 380px;
            left: 0;
            top: 55%;
            transform: translateY(-50%) rotateY(6deg);
            z-index: 5;
            box-shadow: 0 20px 60px -15px rgba(0,0,0,0.2), 0 8px 25px -8px rgba(0,0,0,0.12);
        }

        .collage-screenshot-left:hover {
            transform: translateY(-50%) rotateY(3deg) scale(1.02);
            z-index: 15;
        }

        .collage-screenshot-right {
            width: 50%;
            height: 380px;
            right: 0;
            top: 55%;
            transform: translateY(-50%) rotateY(-6deg);
            z-index: 5;
            box-shadow: 0 20px 60px -15px rgba(0,0,0,0.2), 0 8px 25px -8px rgba(0,0,0,0.12);
        }

        .collage-screenshot-right:hover {
            transform: translateY(-50%) rotateY(-3deg) scale(1.02);
            z-index: 15;
        }

        /* Browser chrome effect */
        .collage-screenshot::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 28px;
            background: linear-gradient(180deg, #F7F7F7 0%, #EFEFEF 100%);
            border-bottom: 1px solid rgba(0,0,0,0.08);
            z-index: 2;
            border-radius: 16px 16px 0 0;
        }

        .collage-screenshot::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 14px;
            width: 8px;
            height: 8px;
            background: #FF5F57;
            border-radius: 50%;
            box-shadow: 14px 0 0 #FFBD2E, 28px 0 0 #28CA41;
            z-index: 3;
        }

        /* Decorative elements */
        .collage-decoration {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .collage-decoration-1 {
            width: 250px; height: 250px;
            background: radial-gradient(circle, rgba(0,102,255,0.06) 0%, transparent 70%);
            top: -80px; right: 15%;
            z-index: 1;
        }

        .collage-decoration-2 {
            width: 180px; height: 180px;
            background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
            bottom: -40px; left: 20%;
            z-index: 1;
        }

        @media (max-width: 1024px) {
            .collage-container {
                height: 500px;
            }
            .collage-screenshot-main {
                width: 80%;
                height: 380px;
            }
            .collage-screenshot-left,
            .collage-screenshot-right {
                width: 45%;
                height: 300px;
            }
        }

        @media (max-width: 768px) {
            .product-preview {
                padding: 0 0 48px;
            }
            .collage-container {
                height: 350px;
                perspective: none;
            }
            .collage-screenshot-main {
                width: 95%;
                height: 300px;
                transform: translate(-50%, -50%);
            }
            .collage-screenshot-main:hover {
                transform: translate(-50%, -50%);
            }
            .collage-screenshot-left,
            .collage-screenshot-right {
                display: none;
            }
            .collage-decoration {
                display: none;
            }
        }

/* ============================================
           FEATURES SECTION
           ============================================ */
.features {
	padding: 100px 0;
	background: var(--color-bg-primary);
}

.features-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 64px;
}

.section-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
}

.section-title {
	font-size: 44px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -1px;
	color: var(--color-text-primary);
	margin-bottom: 16px;
}

.section-description {
	font-size: 18px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.feature-card {
	padding: 32px;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: all 0.3s ease;
}

.feature-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.feature-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	margin-bottom: 20px;
	color: white;
}

.feature-icon svg {
	width: 28px;
	height: 28px;
}

.feature-icon-blue {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%);
}

.feature-icon-green {
	background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-accent-green-dark) 100%);
}

.feature-icon-purple {
	background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-blue-dark) 100%);
}

.feature-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 12px;
}

.feature-description {
	font-size: 15px;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.features {
		padding: 64px 0;
	}

	.section-title {
		font-size: 32px;
	}

	.features-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ============================================
           USE CASES / SOLUTIONS
           ============================================ */
.solutions {
	padding: 100px 0;
	background: var(--color-bg-secondary);
}

.solutions-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 64px;
}

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

.solution-card {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px;
	text-align: center;
	transition: all 0.3s ease;
}

.solution-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
 /* Hero */
        .hero {
            padding: 140px 0 80px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -15%;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-container-hr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-content {
            max-width: 560px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(0, 102, 255, 0.1) 100%);
            color: var(--color-accent-purple);
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .hero-title {
            font-size: 52px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }

        .hero-title-highlight {
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.7;
            margin-bottom: 32px;
        }

        .hero-cta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
        }

        .hero-note {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .hero-note-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .hero-note-item svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
        }

        .hero-visual {
            position: relative;
        }

        .hero-image-wrapper {
            background: var(--color-bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-border);
            overflow: hidden;
        }

        .hero-image-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            color: var(--color-text-muted);
        }

        .hero-image-placeholder svg {
            width: 48px;
            height: 48px;
            opacity: 0.5;
        }

        @media (max-width: 1024px) {
            .hero-container-hr {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-content {
                max-width: 100%;
            }

            .hero-cta,
            .hero-note {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding: 120px 0 60px;
            }

            .hero-title {
                font-size: 36px;
                letter-spacing: -1px;
            }

            .hero-description {
                font-size: 16px;
            }

            .hero-cta {
                flex-direction: column;
            }

            .hero-cta .btn {
                width: 100%;
            }

            .hero-note {
                flex-direction: column;
                gap: 8px;
            }
        }

        /* What is HR Software */
        .what-is {
            padding: 80px 0;
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
        }

        .what-is-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }

        .what-is-content h2 {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 20px;
        }

        .what-is-content p {
            font-size: 17px;
            color: var(--color-text-secondary);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .what-is-list {
            list-style: none;
            margin-top: 24px;
        }

        .what-is-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            font-size: 16px;
            color: var(--color-text-secondary);
        }

        .what-is-list li svg {
            width: 20px;
            height: 20px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        @media (max-width: 1024px) {
            .what-is-container {
                grid-template-columns: 1fr;
            }
        }

        /* Pain Points / Challenges */
        .challenges {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .challenges-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .section-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            margin-bottom: 16px;
        }

        .section-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        .challenges-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .challenge-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            position: relative;
        }

        .challenge-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--color-accent-orange) 0%, var(--color-primary) 100%);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .challenge-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(245, 158, 11, 0.1);
            border-radius: var(--radius-md);
            margin-bottom: 20px;
            color: var(--color-accent-orange);
        }

        .challenge-icon svg {
            width: 24px;
            height: 24px;
        }

        .challenge-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .challenge-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .challenges-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .challenges {
                padding: 64px 0;
            }

            .section-title {
                font-size: 32px;
            }

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

        /* Solution / Features */
        .solution {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .solution-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .feature-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .feature-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            margin-bottom: 20px;
        }

        .feature-icon svg {
            width: 28px;
            height: 28px;
            color: white;
        }

        .feature-icon-blue {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%);
        }

        .feature-icon-green {
            background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-accent-green-dark) 100%);
        }

        .feature-icon-purple {
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, #5B21B6 100%);
        }

        .feature-icon-orange {
            background: linear-gradient(135deg, var(--color-accent-orange) 0%, #EA580C 100%);
        }

        .feature-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .feature-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .solution {
                padding: 64px 0;
            }

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

        /* Benefits with Stats */
        .benefits {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-bg-dark) 0%, #2d2d30 100%);
            color: var(--color-text-inverse);
        }

        .benefits-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .benefits-header .section-label {
            color: var(--color-accent-green);
        }

        .benefits-header .section-title {
            color: white;
        }

        .benefits-header .section-description {
            color: rgba(255, 255, 255, 0.7);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            margin-bottom: 64px;
        }

        .stat-card {
            text-align: center;
            padding: 32px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-number {
            font-size: 48px;
            font-weight: 800;
            color: var(--color-accent-green);
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
        }

        .benefits-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 24px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .benefit-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-accent-green);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .benefit-icon svg {
            width: 20px;
            height: 20px;
            color: white;
        }

        .benefit-content h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .benefit-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .benefits-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .benefits {
                padding: 64px 0;
            }

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

            .stat-number {
                font-size: 36px;
            }
        }

        /* Use Cases */
        .use-cases {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .use-cases-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .use-cases-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .use-case-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 24px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .use-case-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-md);
        }

        .use-case-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-tertiary);
            border-radius: var(--radius-md);
            margin: 0 auto 16px;
            color: var(--color-primary);
        }

        .use-case-icon svg {
            width: 28px;
            height: 28px;
        }

        .use-case-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .use-case-description {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        @media (max-width: 1024px) {
            .use-cases-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .use-cases {
                padding: 64px 0;
            }

            .use-cases-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Pricing Preview */
        .pricing {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .pricing-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .pricing-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .pricing-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .pricing-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .pricing-card-popular {
            border: 2px solid var(--color-primary);
            position: relative;
        }

        .pricing-card-popular::before {
            content: 'Most Popular';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-primary);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: var(--radius-full);
        }

        .pricing-plan-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .pricing-price {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .pricing-price span {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-muted);
        }

        .pricing-description {
            font-size: 14px;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .pricing-cta {
            width: 100%;
            margin-bottom: 24px;
        }

        .pricing-features {
            list-style: none;
            text-align: left;
        }

        .pricing-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 8px 0;
        }

        .pricing-features li svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        .pricing-link {
            display: block;
            text-align: center;
            margin-top: 32px;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-primary);
        }

        .pricing-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 900px) {
            .pricing-cards {
                grid-template-columns: 1fr;
                max-width: 400px;
            }
        }

        /* FAQ */
        .faq {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .faq-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 24px;
        }

        .faq-question {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .faq-answer {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.7;
        }

        @media (max-width: 768px) {
            .faq {
                padding: 64px 0;
            }

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

        /* CTA */
        .cta {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-primary) 100%);
            text-align: center;
        }

        .cta-title {
            font-size: 40px;
            font-weight: 800;
            color: var(--color-text-inverse);
            margin-bottom: 16px;
        }

        .cta-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 32px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .cta-buttons .btn-primary {
            background: white;
            color: var(--color-text-primary);
        }

        .cta-buttons .btn-primary:hover {
            background: #f0f0f0;
        }

        .cta-buttons .btn-secondary {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.4);
        }

        .cta-buttons .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .cta {
                padding: 64px 0;
            }

            .cta-title {
                font-size: 32px;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }

		.hero-container-tt {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-content {
            max-width: 560px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .hero-title {
            font-size: 52px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }

        .hero-title-highlight {
            color: var(--color-primary);
        }

        .hero-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.7;
            margin-bottom: 32px;
        }

        .hero-cta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
        }

        .hero-note {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .hero-note-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .hero-note-item svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
        }

        .hero-visual {
            position: relative;
        }

        .hero-image-wrapper {
            background: var(--color-bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-border);
            overflow: hidden;
        }

        .hero-image-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            color: var(--color-text-muted);
        }

        .hero-image-placeholder svg {
            width: 48px;
            height: 48px;
            opacity: 0.5;
        }

        @media (max-width: 1024px) {
            .hero-container-tt {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .hero-content {
                max-width: 100%;
            }
            .hero-cta {
                justify-content: center;
            }
            .hero-note {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero {
                padding: 120px 0 60px;
            }
            .hero-title {
                font-size: 36px;
                letter-spacing: -1px;
            }
            .hero-description {
                font-size: 16px;
            }
            .hero-cta {
                flex-direction: column;
            }
            .hero-cta .btn {
                width: 100%;
            }
            .hero-note {
                flex-direction: column;
                gap: 8px;
            }
        }

        /* ============================================
           TRUST BADGES
           ============================================ */
        .trust-section {
            padding: 48px 0;
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
        }

        .trust-container {
            text-align: center;
        }

        .trust-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;
        }

        .trust-badges {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 32px;
        }

        .trust-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-secondary);
        }

        .trust-badge svg {
            width: 20px;
            height: 20px;
            color: var(--color-accent-green);
        }

        /* ============================================
           FEATURES SECTION
           ============================================ */
        .features {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .features-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .section-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            margin-bottom: 16px;
        }

        .section-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .feature-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .feature-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            margin-bottom: 20px;
        }

        .feature-icon svg {
            width: 28px;
            height: 28px;
            color: white;
        }

        .feature-icon-blue { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%); }
        .feature-icon-green { background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-accent-green-dark) 100%); }
        .feature-icon-purple { background: linear-gradient(135deg, var(--color-accent-purple) 0%, #5B21B6 100%); }
        .feature-icon-orange { background: linear-gradient(135deg, var(--color-accent-orange) 0%, #EA580C 100%); }

        .feature-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .feature-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .features {
                padding: 64px 0;
            }
            .section-title {
                font-size: 32px;
            }
            .features-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           HOW IT WORKS
           ============================================ */
        .how-it-works {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .how-it-works-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

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

        .step-card {
            text-align: center;
            position: relative;
        }

        .step-card:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 36px;
            right: -16px;
            width: calc(100% - 72px);
            height: 2px;
            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-border) 100%);
            transform: translateX(50%);
        }

        .step-number {
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary-light);
            color: var(--color-primary);
            font-size: 28px;
            font-weight: 800;
            border-radius: 50%;
            margin: 0 auto 20px;
            position: relative;
            z-index: 1;
        }

        .step-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .step-description {
            font-size: 14px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .steps-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 48px;
            }
            .step-card::after {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .steps-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           BENEFITS SECTION
           ============================================ */
        .benefits {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .benefits-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }

        .benefits-content {
            max-width: 520px;
        }

        .benefits-list {
            list-style: none;
            margin-top: 32px;
        }

        .benefits-list li {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--color-border);
        }

        .benefits-list li:last-child {
            border-bottom: none;
        }

        .benefit-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-accent-green);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .benefit-icon svg {
            width: 20px;
            height: 20px;
            color: white;
        }

        .benefit-text h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .benefit-text p {
            font-size: 14px;
            color: var(--color-text-secondary);
        }

        .benefits-visual {
            position: relative;
        }

        .benefits-image-wrapper {
            background: var(--color-bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-border);
            overflow: hidden;
        }

        .benefits-image-placeholder {
            width: 100%;
            height: 450px;
            background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            color: var(--color-text-muted);
        }

        @media (max-width: 1024px) {
            .benefits-container {
                grid-template-columns: 1fr;
            }
            .benefits-content {
                max-width: 100%;
            }
        }

        /* ============================================
           PRICING PREVIEW
           ============================================ */
        .pricing-preview {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .pricing-preview-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .pricing-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .pricing-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .pricing-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .pricing-card-popular {
            border: 2px solid var(--color-primary);
            position: relative;
        }

        .pricing-card-popular::before {
            content: 'Most Popular';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-primary);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: var(--radius-full);
        }

        .pricing-plan-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .pricing-price {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .pricing-price span {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-muted);
        }

        .pricing-description {
            font-size: 14px;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .pricing-cta {
            width: 100%;
            margin-bottom: 24px;
        }

        .pricing-features {
            list-style: none;
            text-align: left;
        }

        .pricing-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 8px 0;
        }

        .pricing-features li svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        .pricing-link {
            display: block;
            text-align: center;
            margin-top: 32px;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-primary);
        }

        .pricing-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 900px) {
            .pricing-cards {
                grid-template-columns: 1fr;
                max-width: 400px;
            }
        }

		/* ============================================
		  home page section
		   ============================================ */

		   .hero-home {
            padding: 160px 0 100px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-home::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(0, 102, 255, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-home::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(34, 197, 94, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-home-container {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
            padding: 0 var(--container-padding);
        }

        .hero-home-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            padding: 8px 16px;
            border-radius: var(--radius-full);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .hero-home-badge-dot {
            width: 8px;
            height: 8px;
            background: var(--color-accent-green);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .hero-home-title {
            font-size: 64px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 24px;
            color: var(--color-text-primary);
        }

        .hero-home-title-highlight {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-home-description {
            font-size: 20px;
            line-height: 1.6;
            color: var(--color-text-secondary);
            margin-bottom: 40px;
            max-width: 680px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-home-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 48px;
        }

        .hero-home-note {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .hero-home-note strong {
            color: var(--color-text-secondary);
        }

        @media (max-width: 768px) {
            .hero-home {
                padding: 120px 0 60px;
            }
            .hero-home-title {
                font-size: 40px;
                letter-spacing: -1px;
            }
            .hero-home-description {
                font-size: 17px;
            }
            .hero-home-cta {
                flex-direction: column;
            }
            .hero-home-cta .btn {
                width: 100%;
            }
        }

        /* ============================================
           SOCIAL proof-home BAR
           ============================================ */
        .social-proof-home {
            padding: 48px 0;
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
        }

        .social-proof-home-container {
            text-align: center;
        }

        .social-proof-home-label {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;
        }

        .social-proof-home-badges {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 32px;
        }

        .proof-home-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: var(--color-bg-secondary);
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border-light);
        }

        .proof-home-badge-icon {
            width: 24px;
            height: 24px;
            color: var(--color-accent-green);
        }

        .proof-home-badge-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text-primary);
        }

        @media (max-width: 640px) {
            .social-proof-home-badges {
                gap: 16px;
            }
            .proof-home-badge {
                padding: 10px 16px;
            }
        }

        /* ============================================
           PRODUCT SCREENSHOT
           ============================================ */
        .product-home-preview {
            padding: 80px 0;
            background: var(--color-bg-secondary);
        }

        .product-home-preview-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 var(--container-padding);
        }

        .product-home-screenshot-wrapper {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--color-border);
        }

        .product-home-screenshot {
            width: 100%;
            height: auto;
            display: block;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 500px;
        }

        /* Placeholder for actual screenshot */
        .product-home-screenshot-placeholder {
            width: 100%;
            min-height: 500px;
            background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
            color: var(--color-text-muted);
        }

        .product-home-screenshot-placeholder svg {
            width: 64px;
            height: 64px;
            opacity: 0.5;
        }

        @media (max-width: 768px) {
            .product-home-preview {
                padding: 48px 0;
            }
            .product-home-screenshot-placeholder {
                min-height: 300px;
            }
        }

        /* ============================================
           FEATURES SECTION
           ============================================ */
        .features-home {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .features-home-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .section-home-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .section-home-title {
            font-size: 44px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            color: var(--color-text-primary);
            margin-bottom: 16px;
        }

        .section-home-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        .features-home-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .feature-home-card {
            padding: 32px;
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            transition: all 0.3s ease;
        }

        .feature-home-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .feature-home-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            margin-bottom: 20px;
            color: white;
        }

        .feature-home-icon svg {
            width: 28px;
            height: 28px;
        }

        .feature-home-icon-blue {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%);
        }

        .feature-home-icon-green {
            background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-accent-green-dark) 100%);
        }

        .feature-home-icon-purple {
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-blue-dark) 100%);
        }

        .feature-home-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 12px;
        }

        .feature-home-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .features-home-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .features-home {
                padding: 64px 0;
            }
            .section-home-title {
                font-size: 32px;
            }
            .features-home-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
        }

        /* ============================================
           USE CASES / SOLUTIONS
           ============================================ */
        .solutions-home {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .solutions-home-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .solutions-home-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .solution-home-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 28px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .solution-home-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .solution-home-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-tertiary);
            border-radius: var(--radius-md);
            color: var(--color-primary);
        }

        .solution-home-icon svg {
            width: 24px;
            height: 24px;
        }

        .solution-home-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-text-primary);
            margin-bottom: 8px;
        }

        .solution-home-description {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        @media (max-width: 1024px) {
            .solutions-home-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .solutions-home {
                padding: 64px 0;
            }
            .solutions-home-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================
           INTEGRATIONS
           ============================================ */
        .integrations-home {
            padding: 80px 0;
            background: var(--color-bg-primary);
            border-top: 1px solid var(--color-border);
            border-bottom: 1px solid var(--color-border);
        }

        .integrations-home-container {
            text-align: center;
        }

        .integrations-home-label {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-muted);
            margin-bottom: 32px;
        }

        .integrations-home-logos {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            opacity: 0.6;
        }

        .integration-home-logo {
            height: 32px;
            width: auto;
            filter: grayscale(100%);
            transition: all 0.2s ease;
        }

        .integration-home-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        /* Placeholder logos using text */
        .integration-home-logo-placeholder {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-text-muted);
            opacity: 0.5;
        }

        @media (max-width: 640px) {
            .integrations-home-logos {
                gap: 24px;
            }
        }

        /* ============================================
           TESTIMONIALS
           ============================================ */
        .testimonials-home {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .testimonials-home-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .testimonials-home-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .testimonial-home-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.3s ease;
        }

        .testimonial-home-card:hover {
            box-shadow: var(--shadow-lg);
        }

        .testimonial-home-stars {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
        }

        .testimonial-home-star {
            width: 20px;
            height: 20px;
            color: #FBBF24;
        }

        .testimonial-home-text {
            font-size: 16px;
            line-height: 1.7;
            color: var(--color-text-secondary);
            margin-bottom: 24px;
        }

        .testimonial-home-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .testimonial-home-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-purple) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 16px;
        }

        .testimonial-home-author-info {
            flex: 1;
        }

        .testimonial-home-author-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-primary);
        }

        .testimonial-home-author-role {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        @media (max-width: 1024px) {
            .testimonials-home-grid {
                grid-template-columns: 1fr;
                max-width: 600px;
                margin: 0 auto;
            }
        }

        @media (max-width: 640px) {
            .testimonials-home {
                padding: 64px 0;
            }
        }

        /* ============================================
           PRICING SECTION
           ============================================ */
        .pricing-home {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .pricing-home-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .pricing-home-toggle {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 32px;
            padding: 6px;
            background: var(--color-bg-secondary);
            border-radius: var(--radius-full);
        }

        .pricing-home-toggle-label {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-muted);
            padding: 8px 16px;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pricing-home-toggle-label.active {
            background: var(--color-bg-primary);
            color: var(--color-text-primary);
            box-shadow: var(--shadow-sm);
        }

        .pricing-home-toggle-badge {
            background: var(--color-accent-green);
            color: white;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: var(--radius-full);
        }

        .pricing-home-toggle-switch {
            display: none;
        }

        .pricing-home-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            align-items: start;
        }

        .pricing-home-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            position: relative;
            transition: all 0.3s ease;
        }

        .pricing-home-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .pricing-home-card-popular {
            border: 2px solid var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: scale(1.02);
        }

        .pricing-home-card-popular:hover {
            transform: scale(1.02) translateY(-4px);
        }

        .pricing-home-popular-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-primary);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: var(--radius-full);
            white-space: nowrap;
        }

        .pricing-home-card-header {
            margin-bottom: 24px;
        }

        .pricing-home-plan-name {
            font-size: 22px;
            font-weight: 700;
            color: var(--color-text-primary);
            margin-bottom: 4px;
        }

        .pricing-home-plan-description {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .pricing-home-card-price {
            margin-bottom: 32px;
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px;
        }

        .pricing-home-currency {
            font-size: 24px;
            font-weight: 600;
            color: var(--color-text-primary);
        }

        .pricing-home-amount {
            font-size: 48px;
            font-weight: 800;
            color: var(--color-text-primary);
            line-height: 1;
            letter-spacing: -2px;
        }

        .pricing-home-amount-custom {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-text-primary);
            line-height: 1;
        }

        .pricing-home-period {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .pricing-home-features-home {
            list-style: none;
            margin-bottom: 32px;
        }

        .pricing-home-features-home li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 10px 0;
            border-bottom: 1px solid var(--color-border-light);
        }

        .pricing-home-features-home li:last-child {
            border-bottom: none;
        }

        .pricing-home-check {
            width: 20px;
            height: 20px;
            color: var(--color-accent-green);
            flex-shrink: 0;
            margin-top: 1px;
        }

        .pricing-home-cta {
            width: 100%;
            text-align: center;
        }

        .pricing-home-card-enterprise {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        }

        .pricing-home-footer {
            text-align: center;
            margin-top: 48px;
        }

        .pricing-home-footer p {
            font-size: 14px;
            color: var(--color-text-muted);
            margin-bottom: 16px;
        }

        .pricing-home-footer strong {
            color: var(--color-text-secondary);
        }

        .pricing-home-compare-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-primary);
        }

        .pricing-home-compare-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 1200px) {
            .pricing-home-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .pricing-home-card-popular {
                transform: scale(1);
            }
            .pricing-home-card-popular:hover {
                transform: translateY(-4px);
            }
        }

        @media (max-width: 640px) {
            .pricing-home {
                padding: 64px 0;
            }
            .pricing-home-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }
            .pricing-home-toggle-label {
                font-size: 13px;
                padding: 6px 12px;
            }
            .pricing-home-amount {
                font-size: 40px;
            }
        }

        /* ============================================
           CTA SECTION
           ============================================ */
        .cta-home-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-text-primary) 0%, #2d2d30 100%);
            position: relative;
            overflow: hidden;
        }

        .cta-home-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            pointer-events: none;
        }

        .cta-home-container {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
        }

        .cta-home-title {
            font-size: 44px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            color: var(--color-text-inverse);
            margin-bottom: 16px;
        }

        .cta-home-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 40px;
        }

        .cta-home-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .cta-home-buttons .btn-primary {
            background: var(--color-text-inverse);
            color: var(--color-text-primary);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .cta-home-buttons .btn-primary:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
        }

        .cta-home-buttons .btn-secondary {
            background: transparent;
            color: var(--color-text-inverse);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cta-home-buttons .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        @media (max-width: 768px) {
            .cta-home-section {
                padding: 64px 0;
            }
            .cta-home-title {
                font-size: 32px;
            }
            .cta-home-buttons {
                flex-direction: column;
            }
            .cta-home-buttons .btn {
                width: 100%;
            }
        }

        /* ============================================
           pricing page
           ============================================ */
           /* ============================================
           BUTTONS
           ============================================ */
        .btn-pricing {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 15px;
            padding: 14px 28px;
            border-radius: var(--radius-md);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .btn-pricing-primary {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
        }

        .btn-pricing-primary:hover {
            background: var(--color-primary-hover);
            box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
            transform: translateY(-1px);
        }

        .btn-pricing-secondary {
            background: var(--color-bg-primary);
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
        }

        .btn-pricing-secondary:hover {
            background: var(--color-bg-secondary);
            border-color: rgba(0, 0, 0, 0.12);
        }

        /* ============================================
           HERO SECTION
           ============================================ */
        .hero-pricing {
            padding: 140px 0 80px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            text-align: center;
        }

        .hero-pricing-title {
            font-size: 52px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }

        .hero-pricing-description {
            font-size: 20px;
            color: var(--color-text-secondary);
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .hero-pricing-toggle {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            background: var(--color-bg-tertiary);
            padding: 6px;
            border-radius: var(--radius-full);
        }

        .toggle-option-pricing {
            padding: 12px 24px;
            font-size: 15px;
            font-weight: 500;
            color: var(--color-text-muted);
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toggle-option-pricing.active {
            background: var(--color-bg-primary);
            color: var(--color-text-primary);
            box-shadow: var(--shadow-sm);
        }

        .toggle-badge-badge {
            background: var(--color-accent-green);
            color: white;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: var(--radius-full);
        }

        @media (max-width: 768px) {
            .hero-pricing {
                padding: 120px 0 60px;
            }
            .hero-pricing-title {
                font-size: 36px;
                letter-spacing: -1px;
            }
            .hero-pricing-description {
                font-size: 17px;
            }
        }

        /* ============================================
           PRICING CARDS
           ============================================ */
        .pricing-page-section {
            padding: 0 0 80px;
            background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
        }

        .pricing-page-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            align-items: start;
        }

        .pricing-page-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            padding: 32px;
            position: relative;
            transition: all 0.3s ease;
        }

        .pricing-page-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .pricing-page-card-popular {
            border: 2px solid var(--color-primary);
            box-shadow: var(--shadow-lg);
        }

        .pricing-page-card-popular:hover {
            transform: translateY(-6px);
        }

        .popular-badge-princing {
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-primary);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 6px 20px;
            border-radius: var(--radius-full);
            white-space: nowrap;
        }

        .plan-princing-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .plan-princing-icon-basic { background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%); color: #4F46E5; }
        .plan-princing-icon-standard { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); color: var(--color-primary); }
        .plan-princing-icon-pro { background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%); color: var(--color-accent-purple); }
        .plan-princing-icon-enterprise { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); color: var(--color-accent-green-dark); }

        .plan-princing-name {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .plan-princing-tagline {
            font-size: 14px;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .plan-princing-price {
            margin-bottom: 8px;
        }

        .price-princing-amount {
            font-size: 48px;
            font-weight: 800;
            letter-spacing: -2px;
            line-height: 1;
        }

        .price-princing-currency {
            font-size: 24px;
            font-weight: 600;
            vertical-align: top;
        }

        .price-princing-period {
            font-size: 15px;
            color: var(--color-text-muted);
        }

        .price-princing-custom {
            font-size: 32px;
            font-weight: 700;
        }

        .plan-princing-billing {
            font-size: 13px;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .plan-princing-cta {
            width: 100%;
            margin-bottom: 24px;
        }

        .plan-princing-features {
            list-style: none;
        }

        .plan-princing-features li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 8px 0;
        }

        .feature-check-princing {
            width: 18px;
            height: 18px;
            color: var(--color-accent-green);
            flex-shrink: 0;
            margin-top: 2px;
        }

        @media (max-width: 1200px) {
            .pricing-page-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .pricing-page-grid {
                grid-template-columns: 1fr;
            }
            .pricing-page-card {
                max-width: 400px;
                margin: 0 auto;
            }
        }

        /* ============================================
           FEATURE comparison-princing TABLE
           ============================================ */
        .comparison-princing {
            padding: 80px 0;
            background: var(--color-bg-primary);
        }

        .comparison-princing-header {
            text-align: center;
            margin-bottom: 48px;
        }

        .comparison-princing-title {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 12px;
        }

        .comparison-princing-description {
            font-size: 18px;
            color: var(--color-text-secondary);
        }

        .comparison-princing-table-wrapper {
            overflow-x: auto;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
        }

        .comparison-princing-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        .comparison-princing-table thead {
            background: var(--color-bg-secondary);
        }

        .comparison-princing-table th {
            padding: 20px 16px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            border-bottom: 1px solid var(--color-border);
        }

        .comparison-princing-table th:first-child {
            text-align: left;
            width: 280px;
        }

        .comparison-princing-table th.popular {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }

        .comparison-princing-table td {
            padding: 16px;
            text-align: center;
            border-bottom: 1px solid var(--color-border-light);
            font-size: 14px;
        }

        .comparison-princing-table td:first-child {
            text-align: left;
            color: var(--color-text-secondary);
        }

        .comparison-princing-table td.popular {
            background: rgba(0, 102, 255, 0.02);
        }

        .comparison-princing-table tbody tr:last-child td {
            border-bottom: none;
        }

        .comparison-princing-table .category-row td {
            background: var(--color-bg-tertiary);
            font-weight: 600;
            color: var(--color-text-primary);
            padding: 12px 16px;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .check-icon-princing {
            width: 20px;
            height: 20px;
            color: var(--color-accent-green);
            display: inline-block;
        }

        .dash-icon-princing {
            width: 20px;
            height: 2px;
            background: var(--color-text-muted);
            display: inline-block;
            border-radius: 1px;
        }
        .cta-pricing {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--color-text-primary) 0%, #2d2d30 100%);
            text-align: center;
        }

        .cta-pricing-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-text-inverse);
            margin-bottom: 16px;
        }

        .cta-pricing-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 32px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-pricing-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .cta-pricing-buttons .btn-pricing-primary {
            background: white;
            color: var(--color-text-primary);
        }

        .cta-pricing-buttons .btn-pricing-primary:hover {
            background: #f0f0f0;
        }

        .cta-pricing-buttons .btn-pricing-secondary {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cta-pricing-buttons .btn-pricing-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* ============================================
           hr software page 
           ============================================ */
           /* Buttons */
        .btn-hr {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 15px;
            padding: 14px 28px;
            border-radius: var(--radius-md);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .btn-hr-primary {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
        }

        .btn-hr-primary:hover {
            background: var(--color-primary-hover);
            box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
            transform: translateY(-1px);
        }

        .btn-hr-secondary {
            background: var(--color-bg-primary);
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
        }

        .btn-hr-secondary:hover {
            background: var(--color-bg-secondary);
        }

        .btn-hr-lg {
            padding: 16px 32px;
            font-size: 16px;
        }

        /* hero-hr */
        .hero-hr {
            padding: 140px 0 80px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-hr::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -15%;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-hr-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-hr-content {
            max-width: 560px;
        }

        .hero-hr-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(0, 102, 255, 0.1) 100%);
            color: var(--color-accent-purple);
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .hero-hr-title {
            font-size: 52px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }

        .hero-hr-title-highlight {
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-hr-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.7;
            margin-bottom: 32px;
        }

        .hero-hr-cta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
        }

        .hero-hr-note {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
            color: var(--color-text-muted);
        }

        .hero-hr-note-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .hero-hr-note-item svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
        }

        .hero-hr-visual {
            position: relative;
        }

        .hero-hr-image-wrapper {
            background: var(--color-bg-primary);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-border);
            overflow: hidden;
        }

        .hero-hr-image-placeholder {
            width: 100%;
            height: 400px;
            background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            color: var(--color-text-muted);
        }

        .hero-hr-image-placeholder svg {
            width: 48px;
            height: 48px;
            opacity: 0.5;
        }

        @media (max-width: 1024px) {
            .hero-hr-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-hr-content {
                max-width: 100%;
            }

            .hero-hr-cta,
            .hero-hr-note {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero-hr {
                padding: 120px 0 60px;
            }

            .hero-hr-title {
                font-size: 36px;
                letter-spacing: -1px;
            }

            .hero-hr-description {
                font-size: 16px;
            }

            .hero-hr-cta {
                flex-direction: column;
            }

            .hero-hr-cta .btn-hr {
                width: 100%;
            }

            .hero-hr-note {
                flex-direction: column;
                gap: 8px;
            }
        }

        /* What is HR Software */
        .what-is-hr {
            padding: 80px 0;
            background: var(--color-bg-primary);
            border-bottom: 1px solid var(--color-border);
        }

        .what-is-hr-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }

        .what-is-hr-content h2 {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 20px;
        }

        .what-is-hr-content p {
            font-size: 17px;
            color: var(--color-text-secondary);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .what-is-hr-list {
            list-style: none;
            margin-top: 24px;
        }

        .what-is-hr-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            font-size: 16px;
            color: var(--color-text-secondary);
        }

        .what-is-hr-list li svg {
            width: 20px;
            height: 20px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        @media (max-width: 1024px) {
            .what-is-hr-container {
                grid-template-columns: 1fr;
            }
        }

        /* Pain Points / Challenges */
        .challenges-hr {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .challenges-hr-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .section-hr-label {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .section-hr-title {
            font-size: 40px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -1px;
            margin-bottom: 16px;
        }

        .section-hr-description {
            font-size: 18px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        .challenges-hr-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .challenge-hr-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            position: relative;
        }

        .challenge-hr-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--color-accent-orange) 0%, var(--color-primary) 100%);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .challenge-hr-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(245, 158, 11, 0.1);
            border-radius: var(--radius-md);
            margin-bottom: 20px;
            color: var(--color-accent-orange);
        }

        .challenge-hr-icon svg {
            width: 24px;
            height: 24px;
        }

        .challenge-hr-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .challenge-hr-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .challenges-hr-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .challenges-hr {
                padding: 64px 0;
            }

            .section-hr-title {
                font-size: 32px;
            }

            .challenges-hr-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Solution / Features */
        .challenge-hr {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .challenge-hr-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .features-hr-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .feature-hr-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.3s ease;
        }

        .feature-hr-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .feature-hr-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            margin-bottom: 20px;
        }

        .feature-hr-icon svg {
            width: 28px;
            height: 28px;
            color: white;
        }

        .feature-hr-icon-blue {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-sky) 100%);
        }

        .feature-hr-icon-green {
            background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-accent-green-dark) 100%);
        }

        .feature-hr-icon-purple {
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, #5B21B6 100%);
        }

        .feature-hr-icon-orange {
            background: linear-gradient(135deg, var(--color-accent-orange) 0%, #EA580C 100%);
        }

        .feature-hr-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .feature-hr-description {
            font-size: 15px;
            color: var(--color-text-secondary);
            line-height: 1.6;
        }

        @media (max-width: 1024px) {
            .features-hr-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .challenge-hr {
                padding: 64px 0;
            }

            .features-hr-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Benefits with Stats */
        .benefits-hr {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-bg-dark) 0%, #2d2d30 100%);
            color: var(--color-text-inverse);
        }

        .benefits-hr-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .benefits-hr-header .section-hr-label {
            color: var(--color-accent-green);
        }

        .benefits-hr-header .section-hr-title {
            color: white;
        }

        .benefits-hr-header .section-hr-description {
            color: rgba(255, 255, 255, 0.7);
        }

        .stats-hr-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            margin-bottom: 64px;
        }

        .stat-hr-card {
            text-align: center;
            padding: 32px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-hr-number {
            font-size: 48px;
            font-weight: 800;
            color: var(--color-accent-green);
            margin-bottom: 8px;
        }

        .stat-hr-label {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
        }

        .benefits-hr-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 24px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .benefit-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-accent-green);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .benefit-icon svg {
            width: 20px;
            height: 20px;
            color: white;
        }

        .benefit-content h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .benefit-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        @media (max-width: 1024px) {
            .stats-hr-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .benefits-hr-list {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .benefits-hr {
                padding: 64px 0;
            }

            .stats-hr-grid {
                grid-template-columns: 1fr;
            }

            .stat-hr-number {
                font-size: 36px;
            }
        }

        /* Use Cases */
        .use-hr-cases {
            padding: 100px 0;
            background: var(--color-bg-secondary);
        }

        .use-hr-cases-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 64px;
        }

        .use-hr-cases-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .use-hr-case-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 24px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .use-hr-case-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-md);
        }

        .use-hr-case-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-bg-tertiary);
            border-radius: var(--radius-md);
            margin: 0 auto 16px;
            color: var(--color-primary);
        }

        .use-hr-case-icon svg {
            width: 28px;
            height: 28px;
        }

        .use-hr-case-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .use-hr-case-description {
            font-size: 14px;
            color: var(--color-text-muted);
        }

        @media (max-width: 1024px) {
            .use-hr-cases-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .use-hr-cases {
                padding: 64px 0;
            }

            .use-hr-cases-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Pricing Preview */
        .pricing-hr {
            padding: 100px 0;
            background: var(--color-bg-primary);
        }

        .pricing-hr-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .pricing-hr-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .pricing-hr-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .pricing-hr-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .pricing-hr-card-popular {
            border: 2px solid var(--color-primary);
            position: relative;
        }

        .pricing-hr-card-popular::before {
            content: 'Most Popular';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-primary);
            color: white;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: var(--radius-full);
        }

        .pricing-hr-plan-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .pricing-hr-price {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .pricing-hr-price span {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-muted);
        }

        .pricing-hr-description {
            font-size: 14px;
            color: var(--color-text-muted);
            margin-bottom: 24px;
        }

        .pricing-hr-cta {
            width: 100%;
            margin-bottom: 24px;
        }

        .pricing-hr-features {
            list-style: none;
            text-align: left;
        }

        .pricing-hr-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 8px 0;
        }

        .pricing-hr-features li svg {
            width: 16px;
            height: 16px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        .pricing-hr-link {
            display: block;
            text-align: center;
            margin-top: 32px;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-primary);
        }

        .pricing-hr-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 900px) {
            .pricing-hr-cards {
                grid-template-columns: 1fr;
                max-width: 400px;
            }
        }
        .cta-hr {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-primary) 100%);
            text-align: center;
        }

        .cta-hr-title {
            font-size: 40px;
            font-weight: 800;
            color: var(--color-text-inverse);
            margin-bottom: 16px;
        }

        .cta-hr-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 32px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-hr-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .cta-hr-buttons .btn-hr-primary {
            background: white;
            color: var(--color-text-primary);
        }

        .cta-hr-buttons .btn-hr-primary:hover {
            background: #f0f0f0;
        }

        .cta-hr-buttons .btn-hr-secondary {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.4);
        }

        .cta-hr-buttons .btn-hr-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .cta-hr {
                padding: 64px 0;
            }

            .cta-hr-title {
                font-size: 32px;
            }

            .cta-hr-buttons {
                flex-direction: column;
                align-items: center;
            }
        }

        /* Buttons */
        .btn-hap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 15px;
            padding: 14px 28px;
            border-radius: var(--radius-md);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-hap-primary {
            background: var(--color-primary);
            color: var(--color-text-inverse);
            box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
        }

        .btn-hap-primary:hover {
            background: var(--color-primary-hover);
            transform: translateY(-1px);
        }

        .btn-hap-secondary {
            background: var(--color-bg-primary);
            color: var(--color-text-primary);
            border: 1px solid var(--color-border);
        }

        .btn-hap-secondary:hover {
            background: var(--color-bg-secondary);
        }

        .btn-hap-lg {
            padding: 16px 32px;
            font-size: 16px;
        }

        /* hero-hap */
        .hero-hap {
            padding: 140px 0 80px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            text-align: center;
        }

        .hero-hap-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .hero-hap-title {
            font-size: 52px;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -2px;
            margin-bottom: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-hap-description {
            font-size: 20px;
            color: var(--color-text-secondary);
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        @media (max-width: 768px) {
            .hero-hap {
                padding: 120px 0 60px;
            }

            .hero-hap-title {
                font-size: 36px;
            }

            .hero-hap-description {
                font-size: 17px;
            }
        }

        /* Platform Icons Row */
        .platforms-row-hap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 32px;
            margin-bottom: 48px;
            flex-wrap: wrap;
        }

        .platform-icon-hap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--color-text-muted);
            font-size: 13px;
            font-weight: 500;
        }

        .platform-icon-hap svg {
            width: 32px;
            height: 32px;
            opacity: 0.6;
        }

        /* App Categories */
        .app-hap-categories {
            padding: 80px 0;
            background: var(--color-bg-primary);
        }

        .category-hap {
            margin-bottom: 80px;
        }

        .category-hap:last-child {
            margin-bottom: 0;
        }

        .category-hap-header {
            margin-bottom: 40px;
        }

        .category-hap-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            padding: 6px 12px;
            border-radius: var(--radius-full);
        }

        .category-hap-label-blue {
            background: rgba(0, 102, 255, 0.1);
            color: var(--color-primary);
        }

        .category-hap-label-green {
            background: rgba(34, 197, 94, 0.1);
            color: var(--color-accent-green-dark);
        }

        .category-hap-label-purple {
            background: rgba(124, 58, 237, 0.1);
            color: var(--color-accent-purple);
        }

        .category-hap-title {
            font-size: 32px;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 12px;
        }

        .category-hap-description {
            font-size: 17px;
            color: var(--color-text-secondary);
            max-width: 600px;
        }

        /* App Cards Grid */
        .apps-hapgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .app-hap-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .app-hap-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .app-hap-icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-lg);
            margin-bottom: 20px;
        }

        .app-hap-icon svg {
            width: 32px;
            height: 32px;
        }

        .app-hap-icon-windows {
            background: linear-gradient(135deg, #00A4EF 0%, #0078D4 100%);
            color: white;
        }

        .app-hap-icon-mac {
            background: linear-gradient(135deg, #333333 0%, #000000 100%);
            color: white;
        }

        .app-hap-icon-linux {
            background: linear-gradient(135deg, #FCC624 0%, #E95420 100%);
            color: white;
        }

        .app-hap-icon-ios {
            background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
            color: white;
        }

        .app-hap-icon-android {
            background: linear-gradient(135deg, #3DDC84 0%, #00A36C 100%);
            color: white;
        }

        .app-hap-icon-chrome {
            background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 75%, #EA4335 100%);
            color: white;
        }

        .app-hap-icon-firefox {
            background: linear-gradient(135deg, #FF9500 0%, #FF0039 100%);
            color: white;
        }

        .app-hap-icon-edge {
            background: linear-gradient(135deg, #0078D4 0%, #00BCF2 100%);
            color: white;
        }

        .app-hap-name {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .app-hap-description {
            font-size: 14px;
            color: var(--color-text-secondary);
            line-height: 1.6;
            flex: 1;
            margin-bottom: 20px;
        }

        .app-hap-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            font-size: 13px;
            color: var(--color-text-muted);
        }

        .app-hap-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .app-hap-meta-item svg {
            width: 14px;
            height: 14px;
        }

        .app-hap-actions {
            display: flex;
            gap: 12px;
        }

        .app-hap-btn {
            flex: 1;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 600;
            border-radius: var(--radius-md);
            text-align: center;
            transition: all 0.2s ease;
        }

        .app-hap-btn-primary {
            background: var(--color-primary);
            color: white;
        }

        .app-hap-btn-primary:hover {
            background: var(--color-primary-hover);
        }

        .app-hap-btn-secondary {
            background: var(--color-bg-tertiary);
            color: var(--color-text-primary);
        }

        .app-hap-btn-secondary:hover {
            background: var(--color-bg-secondary);
        }

        @media (max-width: 1024px) {
            .apps-hapgrid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .app-hap-categories {
                padding: 48px 0;
            }

            .category-hap {
                margin-bottom: 48px;
            }

            .category-hap-title {
                font-size: 26px;
            }

            .apps-hapgrid {
                grid-template-columns: 1fr;
            }
        }

        /* Requirements Section */
        .requirements {
            padding: 80px 0;
            background: var(--color-bg-secondary);
        }

        .requirements-header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-hap-title {
            font-size: 32px;
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 12px;
        }

        .section-hap-description {
            font-size: 17px;
            color: var(--color-text-secondary);
        }

        .requirements-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .requirement-card {
            background: var(--color-bg-primary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: 24px;
        }

        .requirement-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .requirement-title svg {
            width: 20px;
            height: 20px;
            color: var(--color-primary);
        }

        .requirement-list {
            list-style: none;
        }

        .requirement-list li {
            font-size: 14px;
            color: var(--color-text-secondary);
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .requirement-list li svg {
            width: 14px;
            height: 14px;
            color: var(--color-accent-green);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .requirements-grid {
                grid-template-columns: 1fr;
            }
        }

        /* CTA Section */
        .cta-hap {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--color-text-primary) 0%, #2d2d30 100%);
            text-align: center;
        }

        .cta-hap-title {
            font-size: 40px;
            font-weight: 800;
            color: var(--color-text-inverse);
            margin-bottom: 16px;
        }

        .cta-hap-description {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 32px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-hap-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .cta-hap-buttons .btn-hap-primary {
            background: white;
            color: var(--color-text-primary);
        }

        .cta-hap-buttons .btn-hap-primary:hover {
            background: #f0f0f0;
        }

        .cta-hap-buttons .btn-hap-secondary {
            background: transparent;
            color: white;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .cta-hap-buttons .btn-hap-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            .cta-hap {
                padding: 64px 0;
            }

            .cta-hap-title {
                font-size: 32px;
            }

            .cta-hap-buttons {
                flex-direction: column;
                align-items: center;
            }
        }