:root {
			--primary: #cf4242;
			--primary-dark: #b53535;
			--secondary: #F8F9FA;
			--dark: #212529;
			--light: #FFFFFF;
			--accent: #FF6B35;
			--gradient-start: #cf4242;
			--gradient-end: #a92a2a;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		}

		body {
			background-color: var(--secondary);
			color: var(--dark);
			line-height: 1.6;
			overflow-x: hidden;
		}

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
			position: relative;
		}

		.hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			text-align: center;
			padding: 60px 20px;
			overflow: hidden;
		}

		.hero:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			background: radial-gradient(circle at 80% 10%, rgba(207, 66, 66, 0.1), transparent),
				radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.1), transparent);
			z-index: -1;
		}

		.logo {
			margin-bottom: 20px;
			font-weight: 800;
			font-size: 34px;
			letter-spacing: -0.5px;
			color: var(--primary);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.logo-image {
			margin-right: 10px;
			height: 32px;
			width: 32px;
		}

		h1 {
			font-size: 64px;
			line-height: 1.1;
			margin-bottom: 20px;
			background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			font-weight: 800;
			letter-spacing: -1.5px;

			.small {
				font-size: 50px;
			}
		}

		h2 {
			font-size: 24px;
			font-weight: 400;
			color: #555;
			margin-bottom: 40px;
			max-width: 600px;
		}

		.app-showcase {
			position: relative;
			margin: 50px 0;
			transition: transform 0.3s ease-in-out;
			display: flex;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
		}

		.app-image-container {
			position: relative;
			flex: 1;
			min-width: 300px;
			max-width: 400px;
		}

		.app-image-container:nth-child(3) {
			margin-top: 150px;
		}

		.app-image {
			width: 100%;
			height: auto;
			border-radius: 24px;
			box-shadow: 0 20px 60px rgba(207, 66, 66, 0.15);
			transition: transform 0.5s ease, box-shadow 0.5s ease;
		}

		.app-image:hover {
			transform: translateY(-10px);
			box-shadow: 0 30px 70px rgba(207, 66, 66, 0.25);
		}

		.glow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			height: 80%;
			background: radial-gradient(circle, rgba(207, 66, 66, 0.3), transparent 70%);
			filter: blur(40px);
			z-index: -1;
		}

		.features {
			display: flex;
			justify-content: center;
			gap: 30px;
			flex-wrap: wrap;
			margin: 30px 0;
			font-weight: 500;
		}

		.feature {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 16px;
			background-color: rgba(207, 66, 66, 0.1);
			border-radius: 100px;
			color: var(--primary-dark);
		}

		.feature svg {
			stroke: var(--primary);
		}

		.download-buttons {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin: 40px 0;
			flex-wrap: wrap;
		}

		.download-button {
			position: relative;
			display: inline-flex;
			align-items: center;
			gap: 12px;
			padding: 16px 32px;
			border-radius: 100px;
			text-decoration: none;
			font-weight: 600;
			font-size: 18px;
			transition: all 0.3s ease;
			overflow: hidden;
			z-index: 1;
		}

		.download-button.primary {
			background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
			color: white;
			box-shadow: 0 10px 20px rgba(207, 66, 66, 0.2);
		}

		.download-button.primary:hover {
			box-shadow: 0 15px 25px rgba(207, 66, 66, 0.3);
			transform: translateY(-3px);
		}

		.download-button.secondary {
			background: white;
			color: var(--primary);
			border: 2px solid rgba(207, 66, 66, 0.2);
		}

		.download-button.secondary:hover {
			background: rgba(207, 66, 66, 0.05);
			transform: translateY(-3px);
		}

		.download-button:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
			transform: translateX(-100%);
			transition: transform 0.6s ease;
			z-index: -1;
		}

		.download-button:hover:after {
			transform: translateX(100%);
		}

		.footer {
			margin-top: 60px;
			color: #666;
			font-size: 16px;
		}

		.support {
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			margin-bottom: 15px;
		}

		.support a {
			color: var(--primary);
			text-decoration: none;
			font-weight: 500;
			transition: all 0.2s ease;
		}

		.support a:hover {
			color: var(--primary-dark);
		}

		.legal-links {
			margin-top: 15px;
		}

		.legal-links a {
			color: var(--primary);
			text-decoration: none;
			font-weight: 500;
			font-size: 14px;
			padding: 8px 12px;
			border-radius: 6px;
			transition: all 0.2s ease;
		}

		.legal-links a:hover {
			background-color: rgba(207, 66, 66, 0.1);
		}

		@media (max-width: 768px) {
			h1 {
				font-size: 40px;

				.small {
					font-size: 25px;
				}
			}

			h2 {
				font-size: 20px;
			}

			.features {
				flex-direction: column;
				align-items: center;
				gap: 15px;
			}

			.app-showcase {

				align-items: center;
			}

			.app-image-container {
				max-width: 200px;
			}

			.app-image-container:nth-child(3) {
				margin-top: 20px;
			}
		}