/* Design: colors, typography, theming, visual appearance */

:root {
	--bg: #fbfbfd;
	--text: #1d1d1f;
	--text-secondary: #86868b;
	--card-bg: #ffffff;
	--card-shadow: 0 4px 24px rgba(0,0,0,0.06);
	--card-hover-shadow: 0 8px 40px rgba(0,0,0,0.10);
	--accent: #0071e3;
	--badge-mac: #1d1d1f;
	--badge-ios: #0071e3;
	--radius: 20px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--text: #f5f5f7;
		--text-secondary: #86868b;
		--card-bg: #1c1c1e;
		--card-shadow: 0 4px 24px rgba(0,0,0,0.3);
		--card-hover-shadow: 0 8px 40px rgba(0,0,0,0.5);
		--badge-mac: #f5f5f7;
	}
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hero-icon {
	border-radius: 18px;
}

.hero h1 {
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.07;
}

.hero p {
	font-size: 21px;
	font-weight: 400;
	color: var(--text-secondary);
	line-height: 1.5;
}

.card {
	background: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--card-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-icon {
	border-radius: 14px;
	font-size: 26px;
}

.card-icon.json-xml { background: linear-gradient(135deg, #5e5ce6, #bf5af2); }
.card-icon.reel-brand { background: linear-gradient(135deg, #ff375f, #ff6482); }
.card-icon.prax { background: linear-gradient(135deg, #30d158, #34c759); }

.card h2 {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.card .description {
	font-size: 17px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.badge {
	font-size: 13px;
	font-weight: 500;
	border-radius: 100px;
	letter-spacing: 0.01em;
}

.badge.macos {
	color: var(--badge-mac);
	border: 1px solid var(--badge-mac);
}

.badge.ios {
	color: var(--badge-ios);
	border: 1px solid var(--badge-ios);
}

.footer {
	color: var(--text-secondary);
	font-size: 14px;
	border-top: 1px solid rgba(134,134,139,0.15);
}

.footer-section h3 {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text);
}

.footer-section p {
	line-height: 1.5;
}

.footer a {
	color: var(--accent);
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

.copyright {
	font-size: 13px;
}

@media (max-width: 600px) {
	.hero h1 { font-size: 36px; }
	.hero p { font-size: 17px; }
}