ai

Running

App Files Files Community

ai / index.html

mayafree

Update index.html

d8e71e4 verified 4 months ago

raw

history blame contribute delete

122 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MAYAfree.ai - AI Creative Playground</title>
	<meta name="description" content="MAYAfree.ai - Your Ultimate AI Creative Playground. Generate images, videos, audio and more with cutting-edge AI models.">
	<!-- 파비콘 설정 -->
	<link rel="icon" type="image/png" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
	<link rel="apple-touch-icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
	<link rel="shortcut icon" href="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
	<!-- Open Graph (Facebook, Discord, Slack 등) -->
	<meta property="og:title" content="MAYAfree.ai - AI Creative Playground">
	<meta property="og:description" content="Generate stunning images, videos, audio and more with state-of-the-art AI models. No coding required!">
	<meta property="og:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
	<meta property="og:url" content="https://mayafree.ai">
	<meta property="og:type" content="website">
	<meta property="og:site_name" content="MAYAfree.ai">
	<!-- Twitter Card -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="MAYAfree.ai - AI Creative Playground">
	<meta name="twitter:description" content="Generate stunning images, videos, audio with cutting-edge AI. No coding required!">
	<meta name="twitter:image" content="https://huggingface.co/spaces/Heartsync/humangen/resolve/main/logo.png">
	<meta name="twitter:site" content="@mayafree_ai">
	<!-- 추가 SEO 메타태그 -->
	<meta name="keywords" content="AI, image generation, video generation, audio generation, creative tools, mayafree, artificial intelligence">
	<meta name="author" content="MAYAfree.ai">
	<meta name="robots" content="index, follow">
	<link rel="canonical" href="https://mayafree.ai">
	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	/* ═══════════════════════════════════════════════════════════
	💡 SOFT NEON GLOW 스타일 - MAYAfree.ai
	═══════════════════════════════════════════════════════════ */

	/* 🎨 핵심 색상 팔레트 */
	:root {
	--neon-pink: #ffb6c1;
	--neon-mint: #98fb98;
	--neon-lavender: #dda0dd;
	--neon-aqua: #b0e0e6;
	--neon-yellow: #ffeaa7;
	--neon-coral: #f8b4b4;
	--neon-bg: #1a1a2e;
	--neon-bg-dark: #0f0f1a;
	--neon-bg-card: rgba(255, 182, 193, 0.08);
	--white: #ffffff;
	--text-primary: #e8e8f0;
	--text-secondary: rgba(255, 255, 255, 0.6);
	--shadow-sm: 0 0 10px rgba(255, 182, 193, 0.2);
	--shadow-md: 0 0 20px rgba(255, 182, 193, 0.3);
	--shadow-lg: 0 0 40px rgba(255, 182, 193, 0.4);
	--radius: 20px;
	--radius-sm: 12px;
	}

	/* ===== Reset & Base ===== */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Rajdhani', sans-serif;
	background: linear-gradient(135deg, var(--neon-bg) 0%, var(--neon-bg-dark) 100%);
	min-height: 100vh;
	color: var(--text-primary);
	overflow-x: hidden;
	}

	/* Animated background */
	body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	radial-gradient(ellipse at 20% 20%, rgba(255, 182, 193, 0.08) 0%, transparent 50%),
	radial-gradient(ellipse at 80% 80%, rgba(221, 160, 221, 0.08) 0%, transparent 50%),
	radial-gradient(ellipse at 50% 50%, rgba(152, 251, 152, 0.05) 0%, transparent 50%);
	pointer-events: none;
	z-index: -1;
	}

	/* ===== Header ===== */
	.header {
	text-align: center;
	padding: 3rem 1rem 2rem;
	position: relative;
	}

	.logo {
	font-family: 'Orbitron', sans-serif;
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--neon-pink);
	text-shadow:
	0 0 10px rgba(255, 182, 193, 0.5),
	0 0 20px rgba(255, 182, 193, 0.3),
	0 0 40px rgba(255, 182, 193, 0.2),
	0 0 80px rgba(255, 182, 193, 0.1);
	letter-spacing: 4px;
	margin-bottom: 1.5rem;
	animation: softPulse 3s ease-in-out infinite;
	}

	@keyframes softPulse {
	0%, 100% {
	text-shadow:
	0 0 10px rgba(255, 182, 193, 0.5),
	0 0 20px rgba(255, 182, 193, 0.3),
	0 0 40px rgba(255, 182, 193, 0.2);
	}
	50% {
	text-shadow:
	0 0 15px rgba(255, 182, 193, 0.7),
	0 0 30px rgba(255, 182, 193, 0.5),
	0 0 60px rgba(255, 182, 193, 0.3),
	0 0 100px rgba(255, 182, 193, 0.2);
	}
	}

	/* ===== Banner Image ===== */
	.banner-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	}

	.banner-image {
	width: 100%;
	max-width: 1200px;
	height: auto;
	border: 1px solid rgba(255, 182, 193, 0.3);
	border-radius: var(--radius);
	box-shadow:
	0 0 30px rgba(255, 182, 193, 0.2),
	inset 0 0 20px rgba(255, 182, 193, 0.05);
	display: block;
	}

	/* ===== Enterprise Banner ===== */
	.enterprise-banner {
	max-width: 1200px;
	margin: 1.5rem auto 0;
	padding: 1rem 2rem;
	background: rgba(221, 160, 221, 0.1);
	border: 1px solid rgba(221, 160, 221, 0.3);
	border-radius: var(--radius);
	box-shadow:
	0 0 20px rgba(221, 160, 221, 0.15),
	inset 0 0 20px rgba(221, 160, 221, 0.05);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	}

	.enterprise-banner-text {
	font-family: 'Orbitron', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--neon-lavender);
	text-shadow: 0 0 10px rgba(221, 160, 221, 0.5);
	letter-spacing: 1px;
	}

	.enterprise-banner-link {
	font-family: 'Orbitron', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--neon-mint);
	text-decoration: none;
	padding: 0.25rem 0.75rem;
	background: rgba(152, 251, 152, 0.1);
	border: 1px solid rgba(152, 251, 152, 0.4);
	border-radius: 50px;
	transition: all 0.4s ease;
	text-shadow: 0 0 10px rgba(152, 251, 152, 0.5);
	}

	.enterprise-banner-link:hover {
	background: rgba(152, 251, 152, 0.2);
	box-shadow:
	0 0 20px rgba(152, 251, 152, 0.4),
	0 0 40px rgba(152, 251, 152, 0.2);
	transform: scale(1.05);
	}

	.tagline {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--neon-aqua);
	margin-bottom: 1rem;
	text-shadow: 0 0 10px rgba(176, 224, 230, 0.5);
	}

	.subtitle {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
	}

	/* ===== Notice Box ===== */
	.notice-box {
	max-width: 700px;
	margin: 1.5rem auto 0;
	padding: 1rem 1.5rem;
	background: rgba(255, 182, 193, 0.08);
	border: 1px solid rgba(255, 182, 193, 0.2);
	border-radius: var(--radius);
	box-shadow:
	0 0 20px rgba(255, 182, 193, 0.1),
	inset 0 0 20px rgba(255, 182, 193, 0.05);
	}

	.notice-item {
	font-size: 0.95rem;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	line-height: 1.5;
	}

	.notice-item:last-child {
	margin-bottom: 0;
	}

	.notice-link {
	color: var(--neon-mint);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all 0.3s ease;
	text-shadow: 0 0 5px rgba(152, 251, 152, 0.3);
	}

	.notice-link:hover {
	border-bottom-color: var(--neon-mint);
	text-shadow: 0 0 15px rgba(152, 251, 152, 0.6);
	}

	/* ===== Stats Bar ===== */
	.stats-bar {
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: 1.5rem;
	margin: 2rem auto;
	max-width: 800px;
	background: rgba(255, 182, 193, 0.08);
	border: 1px solid rgba(255, 182, 193, 0.2);
	border-radius: var(--radius);
	box-shadow:
	0 0 30px rgba(255, 182, 193, 0.15),
	inset 0 0 20px rgba(255, 182, 193, 0.05);
	flex-wrap: wrap;
	}

	.stat-item {
	text-align: center;
	}

	.stat-number {
	font-family: 'Orbitron', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--neon-pink);
	text-shadow:
	0 0 10px rgba(255, 182, 193, 0.5),
	0 0 20px rgba(255, 182, 193, 0.3);
	letter-spacing: 1px;
	}

	.stat-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	/* ===== Navigation Tabs ===== */
	.nav-tabs {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	}

	.nav-tab {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(221, 160, 221, 0.3);
	border-radius: 50px;
	background: rgba(30, 30, 50, 0.6);
	color: var(--neon-lavender);
	cursor: pointer;
	box-shadow: 0 0 15px rgba(221, 160, 221, 0.1);
	transition: all 0.4s ease;
	}

	.nav-tab:hover {
	background: rgba(221, 160, 221, 0.15);
	box-shadow:
	0 0 20px rgba(221, 160, 221, 0.3),
	0 0 40px rgba(221, 160, 221, 0.15);
	transform: translateY(-2px);
	}

	.nav-tab.active {
	background: rgba(255, 182, 193, 0.2);
	border-color: var(--neon-pink);
	color: var(--neon-pink);
	box-shadow:
	0 0 20px rgba(255, 182, 193, 0.4),
	0 0 40px rgba(255, 182, 193, 0.2);
	}

	/* ===== BEST Tab Special Style ===== */
	.nav-tab.best-tab {
	background: linear-gradient(135deg, rgba(255, 234, 167, 0.2), rgba(248, 180, 180, 0.2));
	border-color: var(--neon-yellow);
	color: var(--neon-yellow);
	animation: bestGlow 2s infinite;
	}

	.nav-tab.best-tab.active {
	background: linear-gradient(135deg, rgba(255, 234, 167, 0.3), rgba(248, 180, 180, 0.3));
	}

	@keyframes bestGlow {
	0%, 100% {
	box-shadow: 0 0 15px rgba(255, 234, 167, 0.3);
	}
	50% {
	box-shadow:
	0 0 25px rgba(255, 234, 167, 0.5),
	0 0 50px rgba(255, 234, 167, 0.3);
	}
	}

	/* ===== Main Container ===== */
	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 1rem;
	}

	/* ===== Category Section ===== */
	.category-section {
	margin-bottom: 3rem;
	}

	.category-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 182, 193, 0.2);
	}

	.category-icon {
	font-size: 2rem;
	filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.5));
	}

	.category-title {
	font-family: 'Orbitron', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--neon-pink);
	text-shadow:
	0 0 10px rgba(255, 182, 193, 0.5),
	0 0 20px rgba(255, 182, 193, 0.3);
	}

	.category-count {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	background: rgba(152, 251, 152, 0.15);
	color: var(--neon-mint);
	padding: 0.25rem 0.75rem;
	border: 1px solid rgba(152, 251, 152, 0.3);
	border-radius: 50px;
	text-shadow: 0 0 5px rgba(152, 251, 152, 0.3);
	}

	/* ===== BEST Category Special Header ===== */
	.category-header.best-header {
	background: linear-gradient(135deg, rgba(255, 234, 167, 0.1), rgba(248, 180, 180, 0.1));
	padding: 1rem;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 234, 167, 0.3);
	box-shadow:
	0 0 30px rgba(255, 234, 167, 0.15),
	inset 0 0 20px rgba(255, 234, 167, 0.05);
	}

	.category-header.best-header .category-title {
	color: var(--neon-yellow);
	text-shadow:
	0 0 10px rgba(255, 234, 167, 0.5),
	0 0 20px rgba(255, 234, 167, 0.3);
	}

	.best-badge {
	background: linear-gradient(135deg, rgba(255, 234, 167, 0.2), rgba(248, 180, 180, 0.2));
	color: var(--neon-yellow);
	font-family: 'Orbitron', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgba(255, 234, 167, 0.4);
	border-radius: 50px;
	animation: bestGlow 2s infinite;
	}

	/* ===== Card Grid ===== */
	.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	}

	/* ===== Card Styles ===== */
	.card {
	background: rgba(255, 182, 193, 0.08);
	border: 1px solid rgba(255, 182, 193, 0.2);
	border-radius: var(--radius);
	box-shadow:
	0 0 20px rgba(255, 182, 193, 0.1),
	inset 0 0 20px rgba(255, 182, 193, 0.03);
	overflow: hidden;
	transition: all 0.4s ease;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: block;
	}

	.card:hover {
	transform: translateY(-8px);
	box-shadow:
	0 0 40px rgba(255, 182, 193, 0.3),
	0 0 80px rgba(255, 182, 193, 0.15),
	inset 0 0 30px rgba(255, 182, 193, 0.05);
	border-color: rgba(255, 182, 193, 0.4);
	}

	/* ===== BEST Card Special Style ===== */
	.card.best-card {
	border-color: rgba(255, 234, 167, 0.4);
	box-shadow:
	0 0 25px rgba(255, 234, 167, 0.2),
	inset 0 0 20px rgba(255, 234, 167, 0.05);
	}

	.card.best-card:hover {
	box-shadow:
	0 0 50px rgba(255, 234, 167, 0.4),
	0 0 100px rgba(255, 234, 167, 0.2);
	}

	/* ===== Help Desk Card Special Style ===== */
	.card.helpdesk-card {
	border-color: rgba(152, 251, 152, 0.4);
	box-shadow:
	0 0 25px rgba(152, 251, 152, 0.15),
	inset 0 0 20px rgba(152, 251, 152, 0.05);
	}

	.card.helpdesk-card:hover {
	box-shadow:
	0 0 50px rgba(152, 251, 152, 0.3),
	0 0 100px rgba(152, 251, 152, 0.15);
	}

	.card-preview {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	position: relative;
	overflow: hidden;
	}

	/* Gradient backgrounds for cards */
	.card-preview.gradient-1 {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
	}
	.card-preview.gradient-2 {
	background: linear-gradient(135deg, rgba(240, 147, 251, 0.3) 0%, rgba(245, 87, 108, 0.3) 100%);
	}
	.card-preview.gradient-3 {
	background: linear-gradient(135deg, rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.3) 100%);
	}
	.card-preview.gradient-4 {
	background: linear-gradient(135deg, rgba(67, 233, 123, 0.3) 0%, rgba(56, 249, 215, 0.3) 100%);
	}
	.card-preview.gradient-5 {
	background: linear-gradient(135deg, rgba(250, 112, 154, 0.3) 0%, rgba(254, 225, 64, 0.3) 100%);
	}
	.card-preview.gradient-6 {
	background: linear-gradient(135deg, rgba(168, 237, 234, 0.3) 0%, rgba(254, 214, 227, 0.3) 100%);
	}
	.card-preview.gradient-7 {
	background: linear-gradient(135deg, rgba(255, 154, 158, 0.3) 0%, rgba(254, 207, 239, 0.3) 100%);
	}
	.card-preview.gradient-8 {
	background: linear-gradient(135deg, rgba(255, 236, 210, 0.3) 0%, rgba(252, 182, 159, 0.3) 100%);
	}
	.card-preview.gradient-9 {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(240, 147, 251, 0.3) 100%);
	}
	.card-preview.gradient-10 {
	background: linear-gradient(135deg, rgba(17, 153, 142, 0.3) 0%, rgba(56, 239, 125, 0.3) 100%);
	}
	.card-preview.gradient-qwen {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.4) 50%, rgba(168, 85, 247, 0.3) 100%);
	}
	.card-preview.gradient-qwen-lora {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 50%, rgba(236, 72, 153, 0.3) 100%);
	}
	.card-preview.gradient-korea {
	background: linear-gradient(135deg, rgba(0, 71, 160, 0.3) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(198, 12, 48, 0.3) 100%);
	}
	.card-preview.gradient-fortune {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(236, 72, 153, 0.3) 50%, rgba(245, 158, 11, 0.3) 100%);
	}
	.card-preview.gradient-nsfw {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(153, 27, 27, 0.3) 50%, rgba(127, 29, 29, 0.3) 100%);
	}
	.card-preview.gradient-nsfw-2 {
	background: linear-gradient(135deg, rgba(190, 24, 93, 0.3) 0%, rgba(157, 23, 77, 0.3) 50%, rgba(131, 24, 67, 0.3) 100%);
	}
	.card-preview.gradient-nsfw-3 {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(109, 40, 217, 0.3) 50%, rgba(91, 33, 182, 0.3) 100%);
	}
	.card-preview.gradient-nsfw-4 {
	background: linear-gradient(135deg, rgba(234, 88, 12, 0.3) 0%, rgba(194, 65, 12, 0.3) 50%, rgba(154, 52, 18, 0.3) 100%);
	}
	.card-preview.gradient-nsfw-5 {
	background: linear-gradient(135deg, rgba(8, 145, 178, 0.3) 0%, rgba(14, 116, 144, 0.3) 50%, rgba(21, 94, 117, 0.3) 100%);
	}
	.card-preview.gradient-nsfw-6 {
	background: linear-gradient(135deg, rgba(219, 39, 119, 0.3) 0%, rgba(190, 24, 93, 0.3) 50%, rgba(157, 23, 77, 0.3) 100%);
	}
	.card-preview.gradient-novel {
	background: linear-gradient(135deg, rgba(76, 29, 149, 0.3) 0%, rgba(124, 58, 237, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(244, 63, 94, 0.3) 100%);
	}
	.card-preview.gradient-exam {
	background: linear-gradient(135deg, rgba(3, 105, 161, 0.3) 0%, rgba(2, 132, 199, 0.3) 30%, rgba(6, 182, 212, 0.3) 70%, rgba(34, 211, 238, 0.3) 100%);
	}
	.card-preview.gradient-best {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(139, 92, 246, 0.3) 100%);
	}
	.card-preview.gradient-youtube {
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.3) 0%, rgba(204, 0, 0, 0.3) 30%, rgba(153, 0, 0, 0.3) 70%, rgba(31, 41, 55, 0.4) 100%);
	}
	.card-preview.gradient-minimax {
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(59, 130, 246, 0.3) 50%, rgba(96, 165, 250, 0.3) 100%);
	}
	.card-preview.gradient-kimi {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(192, 132, 252, 0.3) 100%);
	}
	.card-preview.gradient-deepseek {
	background: linear-gradient(135deg, rgba(5, 150, 105, 0.3) 0%, rgba(16, 185, 129, 0.3) 50%, rgba(52, 211, 153, 0.3) 100%);
	}
	.card-preview.gradient-glm {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(249, 115, 22, 0.3) 50%, rgba(251, 191, 36, 0.3) 100%);
	}
	.card-preview.gradient-motion {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(236, 72, 153, 0.3) 30%, rgba(245, 158, 11, 0.3) 70%, rgba(16, 185, 129, 0.3) 100%);
	}
	.card-preview.gradient-helpdesk {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.3) 30%, rgba(4, 120, 87, 0.3) 70%, rgba(6, 95, 70, 0.3) 100%);
	}
	.card-preview.gradient-camera3d {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 30%, rgba(236, 72, 153, 0.3) 70%, rgba(249, 115, 22, 0.3) 100%);
	}
	.card-preview.gradient-flipbook {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(249, 115, 22, 0.3) 25%, rgba(250, 204, 21, 0.3) 50%, rgba(59, 130, 246, 0.3) 75%, rgba(139, 92, 246, 0.3) 100%);
	}
	.card-preview.gradient-hwp {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 25%, rgba(236, 72, 153, 0.3) 50%, rgba(16, 185, 129, 0.3) 75%, rgba(250, 204, 21, 0.3) 100%);
	}

	.card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-family: 'Orbitron', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.35rem 0.75rem;
	border-radius: 50px;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.badge-new {
	background: rgba(152, 251, 152, 0.2);
	color: var(--neon-mint);
	border: 1px solid rgba(152, 251, 152, 0.4);
	box-shadow: 0 0 15px rgba(152, 251, 152, 0.3);
	}
	.badge-hot {
	background: rgba(249, 115, 22, 0.2);
	color: #fdba74;
	border: 1px solid rgba(249, 115, 22, 0.4);
	box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
	}
	.badge-beta {
	background: rgba(139, 92, 246, 0.2);
	color: var(--neon-lavender);
	border: 1px solid rgba(139, 92, 246, 0.4);
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
	}
	.badge-free {
	background: rgba(16, 185, 129, 0.2);
	color: #6ee7b7;
	border: 1px solid rgba(16, 185, 129, 0.4);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
	}
	.badge-qwen {
	background: rgba(99, 102, 241, 0.2);
	color: #a5b4fc;
	border: 1px solid rgba(99, 102, 241, 0.4);
	box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
	}
	.badge-korea {
	background: rgba(0, 71, 160, 0.2);
	color: #93c5fd;
	border: 1px solid rgba(0, 71, 160, 0.4);
	box-shadow: 0 0 15px rgba(0, 71, 160, 0.3);
	}
	.badge-fortune {
	background: rgba(139, 92, 246, 0.2);
	color: var(--neon-lavender);
	border: 1px solid rgba(139, 92, 246, 0.4);
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
	}
	.badge-nsfw {
	background: rgba(220, 38, 38, 0.2);
	color: #fca5a5;
	border: 1px solid rgba(220, 38, 38, 0.4);
	box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
	}
	.badge-novel {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.3));
	color: #f0abfc;
	border: 1px solid rgba(236, 72, 153, 0.4);
	box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
	}
	.badge-exam {
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(6, 182, 212, 0.3));
	color: #67e8f9;
	border: 1px solid rgba(6, 182, 212, 0.4);
	box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
	}
	.badge-best {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
	color: var(--neon-yellow);
	border: 1px solid rgba(245, 158, 11, 0.4);
	box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
	animation: bestGlow 2s infinite;
	}
	.badge-youtube {
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(204, 0, 0, 0.3));
	color: #fca5a5;
	border: 1px solid rgba(255, 0, 0, 0.4);
	box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
	}
	.badge-llm {
	background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(124, 58, 237, 0.3));
	color: #c4b5fd;
	border: 1px solid rgba(124, 58, 237, 0.4);
	box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
	}
	.badge-minimax {
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(59, 130, 246, 0.3));
	color: #93c5fd;
	border: 1px solid rgba(59, 130, 246, 0.4);
	box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
	}
	.badge-kimi {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.3));
	color: #d8b4fe;
	border: 1px solid rgba(168, 85, 247, 0.4);
	box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
	}
	.badge-deepseek {
	background: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.3));
	color: #6ee7b7;
	border: 1px solid rgba(16, 185, 129, 0.4);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
	}
	.badge-glm {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(249, 115, 22, 0.3));
	color: #fdba74;
	border: 1px solid rgba(249, 115, 22, 0.4);
	box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
	}
	.badge-motion {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
	color: #f0abfc;
	border: 1px solid rgba(236, 72, 153, 0.4);
	box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
	}
	.badge-helpdesk {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
	color: #6ee7b7;
	border: 1px solid rgba(16, 185, 129, 0.4);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
	animation: helpdeskGlow 2s infinite;
	}
	.badge-camera3d {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
	color: #c4b5fd;
	border: 1px solid rgba(139, 92, 246, 0.4);
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
	}
	.badge-flipbook {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(139, 92, 246, 0.3));
	color: #fca5a5;
	border: 1px solid rgba(239, 68, 68, 0.4);
	box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
	animation: flipbookGlow 2s infinite;
	}
	.badge-hwp {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
	color: #93c5fd;
	border: 1px solid rgba(59, 130, 246, 0.4);
	box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
	animation: hwpGlow 2s infinite;
	}

	@keyframes helpdeskGlow {
	0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
	50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 30px rgba(16, 185, 129, 0.3); }
	}
	@keyframes flipbookGlow {
	0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
	50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 30px rgba(139, 92, 246, 0.3); }
	}
	@keyframes hwpGlow {
	0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
	50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 30px rgba(16, 185, 129, 0.3); }
	}

	.card-content {
	padding: 1.25rem;
	}

	.card-title {
	font-family: 'Orbitron', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 0.5rem;
	color: var(--neon-pink);
	text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
	}

	.card-description {
	font-size: 0.95rem;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 1rem;
	}

	/* Card Highlights */
	.card-highlight {
	background: rgba(255, 234, 167, 0.2);
	color: var(--neon-yellow);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	text-shadow: 0 0 5px rgba(255, 234, 167, 0.3);
	}
	.card-highlight-qwen {
	background: rgba(99, 102, 241, 0.2);
	color: #a5b4fc;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-korea {
	background: rgba(0, 71, 160, 0.2);
	color: #93c5fd;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-fortune {
	background: rgba(139, 92, 246, 0.2);
	color: var(--neon-lavender);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-nsfw {
	background: rgba(220, 38, 38, 0.2);
	color: #fca5a5;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-novel {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.3));
	color: #f0abfc;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-exam {
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(6, 182, 212, 0.3));
	color: #67e8f9;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-best {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
	color: var(--neon-yellow);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-youtube {
	background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(204, 0, 0, 0.3));
	color: #fca5a5;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-llm {
	background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(124, 58, 237, 0.3));
	color: #c4b5fd;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-minimax {
	background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(59, 130, 246, 0.3));
	color: #93c5fd;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-kimi {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.3));
	color: #d8b4fe;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-deepseek {
	background: linear-gradient(135deg, rgba(5, 150, 105, 0.3), rgba(16, 185, 129, 0.3));
	color: #6ee7b7;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-glm {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(249, 115, 22, 0.3));
	color: #fdba74;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-motion {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
	color: #f0abfc;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-helpdesk {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
	color: #6ee7b7;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-camera3d {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
	color: #c4b5fd;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-flipbook {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(139, 92, 246, 0.3));
	color: #fca5a5;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}
	.card-highlight-hwp {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
	color: #93c5fd;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	}

	.card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 182, 193, 0.15);
	}

	.card-tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	}

	.tag {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(255, 182, 193, 0.1);
	border: 1px solid rgba(255, 182, 193, 0.2);
	border-radius: 4px;
	color: var(--neon-pink);
	}
	.tag-qwen {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: 4px;
	color: #a5b4fc;
	}
	.tag-korea {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(0, 71, 160, 0.1);
	border: 1px solid rgba(0, 71, 160, 0.3);
	border-radius: 4px;
	color: #93c5fd;
	}
	.tag-fortune {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(139, 92, 246, 0.1);
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 4px;
	color: #d8b4fe;
	}
	.tag-nsfw {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: 4px;
	color: #fca5a5;
	}
	.tag-novel {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1));
	border: 1px solid rgba(124, 58, 237, 0.3);
	border-radius: 4px;
	color: #f0abfc;
	}
	.tag-exam {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(6, 182, 212, 0.1));
	border: 1px solid rgba(6, 182, 212, 0.3);
	border-radius: 4px;
	color: #67e8f9;
	}
	.tag-best {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: 4px;
	color: var(--neon-yellow);
	}
	.tag-youtube {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(255, 0, 0, 0.1);
	border: 1px solid rgba(255, 0, 0, 0.3);
	border-radius: 4px;
	color: #fca5a5;
	}
	.tag-llm {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(124, 58, 237, 0.1));
	border: 1px solid rgba(30, 64, 175, 0.3);
	border-radius: 4px;
	color: #c4b5fd;
	}
	.tag-minimax {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(30, 58, 138, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 4px;
	color: #93c5fd;
	}
	.tag-kimi {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(124, 58, 237, 0.1);
	border: 1px solid rgba(168, 85, 247, 0.3);
	border-radius: 4px;
	color: #d8b4fe;
	}
	.tag-deepseek {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(5, 150, 105, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 4px;
	color: #6ee7b7;
	}
	.tag-glm {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(249, 115, 22, 0.3);
	border-radius: 4px;
	color: #fdba74;
	}
	.tag-motion {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-radius: 4px;
	color: #f0abfc;
	}
	.tag-helpdesk {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: 4px;
	color: #6ee7b7;
	}
	.tag-camera3d {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 4px;
	color: #c4b5fd;
	}
	.tag-flipbook {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(139, 92, 246, 0.1));
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 4px;
	color: #fca5a5;
	}
	.tag-hwp {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 4px;
	color: #93c5fd;
	}

	.card-arrow {
	font-size: 1.5rem;
	color: var(--neon-pink);
	transition: all 0.3s ease;
	text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
	}

	.card:hover .card-arrow {
	transform: translateX(8px);
	text-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
	}

	/* ===== Footer ===== */
	.footer {
	text-align: center;
	padding: 3rem 1rem;
	margin-top: 2rem;
	border-top: 1px solid rgba(255, 182, 193, 0.2);
	}

	.footer-logo {
	font-family: 'Orbitron', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--neon-pink);
	text-shadow:
	0 0 10px rgba(255, 182, 193, 0.5),
	0 0 20px rgba(255, 182, 193, 0.3);
	margin-bottom: 1rem;
	}

	.footer-links {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	}

	.footer-link {
	font-weight: 600;
	color: var(--neon-lavender);
	text-decoration: none;
	transition: all 0.3s ease;
	text-shadow: 0 0 5px rgba(221, 160, 221, 0.3);
	}

	.footer-link:hover {
	color: var(--neon-pink);
	text-shadow: 0 0 15px rgba(255, 182, 193, 0.5);
	}

	.footer-copy {
	font-size: 0.9rem;
	color: var(--text-secondary);
	}

	/* ===== Floating Action Button ===== */
	.fab {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 60px;
	height: 60px;
	background: rgba(255, 182, 193, 0.15);
	border: 1px solid rgba(255, 182, 193, 0.4);
	border-radius: 50%;
	box-shadow:
	0 0 20px rgba(255, 182, 193, 0.3),
	inset 0 0 15px rgba(255, 182, 193, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	cursor: pointer;
	transition: all 0.4s ease;
	z-index: 1000;
	}

	.fab:hover {
	transform: scale(1.1);
	box-shadow:
	0 0 40px rgba(255, 182, 193, 0.5),
	0 0 60px rgba(255, 182, 193, 0.3),
	inset 0 0 20px rgba(255, 182, 193, 0.15);
	}

	/* ===== Responsive ===== */
	@media (max-width: 768px) {
	.logo {
	font-size: 2.2rem;
	}
	.tagline {
	font-size: 1.1rem;
	}
	.stats-bar {
	gap: 1rem;
	padding: 1rem;
	}
	.stat-number {
	font-size: 1.5rem;
	}
	.nav-tab {
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	}
	.category-title {
	font-size: 1.3rem;
	}
	.card-grid {
	grid-template-columns: 1fr;
	}
	.card-preview {
	height: 150px;
	font-size: 3rem;
	}
	.notice-box {
	margin: 1rem;
	padding: 0.75rem 1rem;
	}
	.notice-item {
	font-size: 0.85rem;
	}
	.banner-container {
	padding: 0 0.5rem;
	}
	.enterprise-banner {
	padding: 0.75rem 1rem;
	flex-direction: column;
	gap: 0.5rem;
	}
	.enterprise-banner-text {
	font-size: 1rem;
	}
	.enterprise-banner-link {
	font-size: 1.1rem;
	}
	}

	/* ===== Animation ===== */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.card {
	animation: fadeInUp 0.5s ease forwards;
	}

	.card:nth-child(1) { animation-delay: 0.1s; }
	.card:nth-child(2) { animation-delay: 0.2s; }
	.card:nth-child(3) { animation-delay: 0.3s; }
	.card:nth-child(4) { animation-delay: 0.4s; }
	.card:nth-child(5) { animation-delay: 0.5s; }
	.card:nth-child(6) { animation-delay: 0.6s; }
	.card:nth-child(7) { animation-delay: 0.7s; }
	.card:nth-child(8) { animation-delay: 0.8s; }
	.card:nth-child(9) { animation-delay: 0.9s; }

	/* ===== Search Bar ===== */
	.search-container {
	max-width: 600px;
	margin: 0 auto 2rem;
	position: relative;
	}

	.search-input {
	width: 100%;
	padding: 1rem 1.5rem 1rem 3rem;
	font-family: 'Rajdhani', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	border: 1px solid rgba(221, 160, 221, 0.3);
	border-radius: 50px;
	background: rgba(30, 30, 50, 0.8);
	color: var(--text-primary);
	outline: none;
	transition: all 0.4s ease;
	box-shadow: 0 0 15px rgba(221, 160, 221, 0.1);
	}

	.search-input:focus {
	border-color: var(--neon-lavender);
	box-shadow:
	0 0 25px rgba(221, 160, 221, 0.3),
	0 0 50px rgba(221, 160, 221, 0.15);
	}

	.search-input::placeholder {
	color: var(--text-secondary);
	font-weight: 400;
	}

	.search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	filter: drop-shadow(0 0 5px rgba(221, 160, 221, 0.3));
	}

	/* Enterprise Contact Banner */
	.contact-banner {
	background: rgba(255, 234, 167, 0.1);
	border: 1px solid rgba(255, 234, 167, 0.3);
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	text-align: center;
	box-shadow: 0 0 20px rgba(255, 234, 167, 0.1);
	margin: 20px auto;
	max-width: 1200px;
	}

	.contact-banner span {
	font-family: 'Orbitron', sans-serif;
	color: var(--neon-yellow);
	font-size: 1.1rem;
	text-shadow: 0 0 10px rgba(255, 234, 167, 0.3);
	}

	.contact-banner a {
	color: var(--neon-aqua);
	font-weight: 700;
	text-decoration: none;
	text-shadow: 0 0 10px rgba(176, 224, 230, 0.3);
	transition: all 0.3s ease;
	}

	.contact-banner a:hover {
	text-shadow: 0 0 15px rgba(176, 224, 230, 0.6);
	}
	</style>
	</head>
	<body>
	<!-- Header -->
	<header class="header">
	<h1 class="logo">✨ MAYAfree.ai ✨</h1>
	<div class="banner-container">
	<img src="https://huggingface.co/spaces/mayafree/ai/resolve/main/banner.png" alt="MAYAfree.ai Banner" class="banner-image">
	</div>
	<!-- Enterprise Banner -->
	<div class="enterprise-banner">
	<span class="enterprise-banner-text">🚀 Unlimited Commercial Use Available — Enterprise Service:</span>
	<a href="https://www.ginigen.ai" target="_blank" class="enterprise-banner-link">www.MAYAfree.ai</a>
	</div>
	<!-- Enterprise Contact Banner -->
	<div class="contact-banner">
	<span>💼 Enterprise & CUSTOM(White Label) · 문의</span>
	<span style="color:var(--text-secondary);font-weight:700"> → </span>
	<a href="mailto:mayafreeai@gmail.com">📧 mayafreeai@gmail.com</a>
	</div>
	</header>

	<!-- Stats Bar -->
	<div class="stats-bar">
	<div class="stat-item">
	<div class="stat-number">42</div>
	<div class="stat-label">AI Models</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">70K+</div>
	<div class="stat-label">Daily Active Users</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">2.1M+</div>
	<div class="stat-label">Monthly Active Users</div>
	</div>
	<div class="stat-item">
	<div class="stat-number">5M+</div>
	<div class="stat-label">Creations / Month</div>
	</div>
	</div>

	<!-- Search Bar -->
	<div class="search-container">
	<span class="search-icon">🔍</span>
	<input type="text" class="search-input" placeholder="Search AI tools... (e.g., image, video, youtube, trend, nsfw, novel, exam, best, llm, motion, camera, 3d, flipbook, hwp)" id="searchInput">
	</div>

	<!-- Navigation Tabs -->
	<nav class="nav-tabs">
	<button class="nav-tab active" data-category="all">🌟 All</button>
	<button class="nav-tab best-tab" data-category="best">🏆 BEST</button>
	<button class="nav-tab" data-category="text">📝 Text</button>
	<button class="nav-tab" data-category="image">🖼️ Image</button>
	<button class="nav-tab" data-category="video">🎬 Video</button>
	<button class="nav-tab" data-category="audio">🎵 Audio</button>
	<button class="nav-tab" data-category="3d">🎮 3D</button>
	<button class="nav-tab" data-category="tools">🛠️ Tools</button>
	<button class="nav-tab" data-category="nsfw">🔞 NSFW</button>
	<button class="nav-tab" data-category="korea">🇰🇷 Korea</button>
	</nav>

	<!-- Main Container -->
	<main class="container">
	<!-- BEST PICKS Section -->
	<section class="category-section" data-section="best">
	<div class="category-header best-header">
	<span class="category-icon">🏆</span>
	<h2 class="category-title">BEST PICKS - EDITOR'S CHOICE</h2>
	<span class="best-badge">⭐ TOP 4</span>
	</div>
	<div class="card-grid">
	<!-- BEST 1: YouTube Trend Analyzer -->
	<a href="https://ytb.humangen.ai" target="_blank" class="card best-card" data-tags="best,video,youtube,trend,analytics,ai,search,groq,llm,seo,keyword,channel,growth,viral,api">
	<div class="card-preview gradient-youtube">
	<span>📊</span>
	<span class="card-badge badge-best">🏆 BEST</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📊 YouTube Trend Analyzer</h3>
	<p class="card-description">
	<span class="card-highlight-youtube">AI-Powered YouTube Analytics</span> -
	Search 100-1000 videos with <strong>AI Pick ratings</strong>!
	🔥 Trending surge detection, 📈 48h growth tracking,
	5 LLM tools (Keyword, Trend, Ideas, Channel, Competitor).
	🌐 <strong>EN/한글</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-youtube">YouTube</span>
	<span class="tag-youtube">AI Pick</span>
	<span class="tag">Trend</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- BEST 2: HWP AI 어시스턴트 -->
	<a href="https://hwp.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,hwp,hwpx,pdf,document,ai,assistant,한국어,문서,변환,markdown,read,see,speak,think,memory,llm,groq">
	<div class="card-preview gradient-hwp">
	<span>📄</span>
	<span class="card-badge badge-best">🏆 BEST</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📄 HWP AI 어시스턴트</h3>
	<p class="card-description">
	<span class="card-highlight-hwp">READ·SEE·SPEAK·THINK·MEMORY!</span> -
	AI가 HWP 파일을 <strong>읽고, 보고, 말하며, 생각하고 기억</strong>합니다!
	📑 HWP/HWPX/PDF 분석, 🔄 마크다운 변환, 💬 AI 채팅.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-hwp">HWP/HWPX</span>
	<span class="tag-hwp">AI분석</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- BEST 3: PDF/HWP TO EXAM GENERATOR -->
	<a href="https://exam.humangen.ai" target="_blank" class="card best-card" data-tags="best,text,pdf,exam,quiz,test,education,학습,시험,문제,generator,english,korean,한글,multiple-choice,선다형,교육,study,interactive">
	<div class="card-preview gradient-exam">
	<span>🎓</span>
	<span class="card-badge badge-best">🏆 BEST</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎓 PDF/HWP TO EXAM GENERATOR</h3>
	<p class="card-description">
	<span class="card-highlight-exam">SOMA AI + Interactive Exam!</span> -
	Transform PDF → Up to <strong>50 questions</strong> (2~5 choice)!
	📝 Generate → 🎯 Take Exam → 📊 Get Score!
	Download PDF. 🌐 <strong>English / 한국어</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-exam">PDF→Exam</span>
	<span class="tag-exam">Interactive</span>
	<span class="tag">EN/한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- BEST 4: AI 플립북 -->
	<a href="https://aibook.humangen.ai" target="_blank" class="card best-card" data-tags="best,korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen">
	<div class="card-preview gradient-flipbook">
	<span>📚</span>
	<span class="card-badge badge-best">🏆 BEST</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
	<p class="card-description">
	<span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> -
	PDF를 인터랙티브 3D 플립북으로 변환! 🤖 AI가 문서 분석 후 질의응답.
	📖 WebGL 페이지 넘김, 🎨 Comic Style UI.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-flipbook">3D FlipBook</span>
	<span class="tag-flipbook">VLM AI</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Text & Language Section -->
	<section class="category-section" data-section="text">
	<div class="category-header">
	<span class="category-icon">📝</span>
	<h2 class="category-title">TEXT & LANGUAGE</h2>
	<span class="category-count">7 models</span>
	</div>
	<div class="card-grid">
	<!-- HELP DESK & CHATBOT -->
	<a href="https://chat.humangen.ai" target="_blank" class="card helpdesk-card" data-tags="text,helpdesk,chatbot,support,faq,ai,assistant,help,question,answer,service,guide,english,korean,한글">
	<div class="card-preview gradient-helpdesk">
	<span>🤖</span>
	<span class="card-badge badge-helpdesk">💬 HELP</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🤖 Help Desk & Chatbot</h3>
	<p class="card-description">
	<span class="card-highlight-helpdesk">AI-Powered Service Guide</span> -
	Ask anything about MAYAfree.ai's <strong>39 AI services</strong>!
	Get instant recommendations, usage guides, and support.
	🌐 <strong>English / 한국어</strong> bilingual support.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-helpdesk">Chatbot</span>
	<span class="tag-helpdesk">Guide</span>
	<span class="tag">EN/한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- MINIMAX-M2.1 Card -->
	<a href="https://minimax.humangen.ai" target="_blank" class="card" data-tags="text,llm,minimax,m2.1,agent,coding,moe,230b,multilingual,tool-calling,agentic">
	<div class="card-preview gradient-minimax">
	<span>🤖</span>
	<span class="card-badge badge-minimax">⚡ M2.1</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🤖 MINIMAX-M2.1</h3>
	<p class="card-description">
	<span class="card-highlight-minimax">230B MoE, 10B Active</span> -
	Best AI Agent LLM! Lightning Attention with 4M context.
	Multi-language coding, SWE-bench SOTA. Open-source #1!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-minimax">MoE</span>
	<span class="tag-minimax">Agent</span>
	<span class="tag">Coding</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Kimi-K2-Thinking Card -->
	<a href="https://kimi.humangen.ai" target="_blank" class="card" data-tags="text,llm,kimi,k2,thinking,moonshot,1t,agent,reasoning,tool-calling,browsing">
	<div class="card-preview gradient-kimi">
	<span>🌙</span>
	<span class="card-badge badge-kimi">🧠 THINKING</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🌙 Kimi-K2-Thinking</h3>
	<p class="card-description">
	<span class="card-highlight-kimi">Moonshot 1T Params, 256K Context</span> -
	Deep thinking agent! 200-300 tool calls in sequence.
	HLE & BrowseComp SOTA. INT4 native for 2x speed!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-kimi">1T</span>
	<span class="tag-kimi">Deep Think</span>
	<span class="tag">Agent</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- DeepSeek-V3.2 Card -->
	<a href="https://deepseek.humangen.ai" target="_blank" class="card" data-tags="text,llm,deepseek,v3.2,reasoning,coding,moe,685b,sparse-attention,agentic">
	<div class="card-preview gradient-deepseek">
	<span>🔍</span>
	<span class="card-badge badge-deepseek">🚀 V3.2</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔍 DeepSeek-V3.2</h3>
	<p class="card-description">
	<span class="card-highlight-deepseek">685B MoE + Sparse Attention</span> -
	Advanced reasoning & agentic AI! AIME 96%, HMMT 99.2%.
	GRPO training, Speciale for max reasoning depth!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-deepseek">685B</span>
	<span class="tag-deepseek">Reasoning</span>
	<span class="tag">Olympiad</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- GLM-4.7 Card -->
	<a href="https://glm.humangen.ai" target="_blank" class="card" data-tags="text,llm,glm,4.7,zhipu,zai,coding,vibe,agent,200k,128k-output">
	<div class="card-preview gradient-glm">
	<span>🔥</span>
	<span class="card-badge badge-glm">💻 CODING</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔥 GLM-4.7</h3>
	<p class="card-description">
	<span class="card-highlight-glm">Zhipu AI 400B, 200K In/128K Out</span> -
	Vibe Coding champion! SWE-bench 73.8% (#1 open-source).
	$3/month or FREE local. Think-before-act mode!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-glm">Vibe Code</span>
	<span class="tag-glm">200K</span>
	<span class="tag">$3/mo</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- PDF TO EXAM GENERATOR Card -->
	<a href="https://exam.humangen.ai" target="_blank" class="card" data-tags="text,pdf,exam,quiz,test,education,학습,시험,문제,generator,english,korean,한글,multiple-choice,선다형,교육,study,interactive">
	<div class="card-preview gradient-exam">
	<span>🎓</span>
	<span class="card-badge badge-exam">🎯 INTERACTIVE</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎓 PDF TO EXAM GENERATOR</h3>
	<p class="card-description">
	<span class="card-highlight-exam">SOMA AI + Interactive Exam Mode!</span> -
	Transform any PDF into exams! Up to <strong>50 questions</strong> (2~5 choice).
	📝 Generate → 🎯 Take Exam → 📊 See Score!
	🌐 <strong>English / 한국어</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-exam">PDF→Exam</span>
	<span class="tag-exam">Interactive</span>
	<span class="tag">EN/한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- AI Mermaid Diagram Generator Card -->
	<a href="https://diagram.humangen.ai" target="_blank" class="card" data-tags="text,diagram,mermaid,flowchart,chart,visualization,free">
	<div class="card-preview gradient-10">
	<span>📊</span>
	<span class="card-badge badge-free">💎 $240 FREE</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📊 AI Mermaid Diagram</h3>
	<p class="card-description">
	Generate professional diagrams from natural language.
	Flowcharts, sequence diagrams, ER diagrams, Gantt charts & more.
	<span class="card-highlight">Save $240/year - Mermaid Chart Pro for FREE!</span>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Flowchart</span>
	<span class="tag">Diagram</span>
	<span class="tag">FREE</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Image Generation Section -->
	<section class="category-section" data-section="image">
	<div class="category-header">
	<span class="category-icon">🖼️</span>
	<h2 class="category-title">IMAGE GENERATION</h2>
	<span class="category-count">10 models</span>
	</div>
	<div class="card-grid">
	<!-- 3D Camera Angle Editor Card -->
	<a href="https://3dangle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,qwen,lora,lightning,edit,azimuth,elevation,distance,multiangle,threejs,interactive">
	<div class="card-preview gradient-camera3d">
	<span>🎬</span>
	<span class="card-badge badge-camera3d">🎮 3D CTRL</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎬 3D Camera Angle Editor</h3>
	<p class="card-description">
	<span class="card-highlight-camera3d">Qwen + Lightning + Multi-Angles LoRA</span> -
	Transform camera angles with interactive <strong>3D viewport</strong>!
	🎮 8 Azimuths • 📐 4 Elevations • 🔍 3 Distances.
	⚡ Lightning-fast 4-step generation!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-camera3d">3D Control</span>
	<span class="tag-camera3d">Multi-Angle</span>
	<span class="tag">Qwen</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Z-Image LoRA Generator Card -->
	<a href="https://zlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,z-image,turbo,style,generator,custom,30+styles,jimin,portrait,ghibli,pixel,anime">
	<div class="card-preview gradient-qwen-lora">
	<span>🎨</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎨 Z-Image LoRA Generator</h3>
	<p class="card-description">
	<span class="card-highlight">Z-Image Turbo + 30+ LoRAs!</span> -
	Generate stunning images with various styles! Ghibli, Pixel Art, Anime, Portrait & more.
	⚡ Turbo speed, 🎭 Custom LoRA support, 📱 SNS aspect presets.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Z-Image</span>
	<span class="tag">30+ LoRA</span>
	<span class="tag">Turbo</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Qwen Image 2512 Card -->
	<a href="https://q2512.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lightning,turbo,fast,alibaba,32b">
	<div class="card-preview gradient-qwen">
	<span>🦜</span>
	<span class="card-badge badge-qwen">⚡ QWEN 2512</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🦜 Qwen Image 2512</h3>
	<p class="card-description">
	<span class="card-highlight-qwen">Alibaba Qwen-Image-2512</span> - Lightning fast 4-step generation!
	AI prompt enhancement with multi-language support (EN/中文/한글).
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-qwen">Qwen-2512</span>
	<span class="tag-qwen">4-Step</span>
	<span class="tag">Lightning</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Qwen Image 2512 LoRA Card -->
	<a href="https://qlora.humangen.ai" target="_blank" class="card" data-tags="image,qwen,2512,lora,style,custom,alibaba,32b">
	<div class="card-preview gradient-qwen-lora">
	<span>🎭</span>
	<span class="card-badge badge-qwen">🦜 QWEN LoRA</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎭 Qwen Image 2512 LoRA</h3>
	<p class="card-description">
	<span class="card-highlight-qwen">Qwen-Image-2512 + Style LoRA</span> - Apply custom styles!
	Gallery of curated LoRAs + custom LoRA support. Light 4/8 step modes.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-qwen">Qwen-2512</span>
	<span class="tag-qwen">LoRA</span>
	<span class="tag">Styles</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- FLUX.2 Turbo Image Generator Card -->
	<a href="https://flux2.humangen.ai" target="_blank" class="card" data-tags="image,flux,turbo,32b,edit,combine">
	<div class="card-preview gradient-5">
	<span>⚡</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">⚡ FLUX.2 Turbo Generator</h3>
	<p class="card-description">
	32B Rectified Flow Model! Generate, edit & combine images in just 8 steps.
	AI prompt upsampling with VLM support.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">FLUX.2</span>
	<span class="tag">32B</span>
	<span class="tag">Turbo</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Qwen Image Layered Decomposer Card -->
	<a href="https://layer.humangen.ai" target="_blank" class="card" data-tags="image,layer,decompose,pptx,qwen">
	<div class="card-preview gradient-7">
	<span>🎨</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎨 Qwen Image Layer Decomposer</h3>
	<p class="card-description">
	Decompose any image into magical layers!
	Export to PPTX & ZIP for editing. Perfect for designers.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Layer</span>
	<span class="tag">PPTX</span>
	<span class="tag">Qwen</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Qwen Image Edit Studio Card -->
	<a href="https://qedit.humangen.ai" target="_blank" class="card" data-tags="image,edit,qwen,transform,ai">
	<div class="card-preview gradient-3">
	<span>🖌️</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🖌️ Qwen Image Edit Studio</h3>
	<p class="card-description">
	Upload an image and describe your edit - AI transforms it instantly!
	Lightning-fast 4-step inference powered by Qwen.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Edit</span>
	<span class="tag">Transform</span>
	<span class="tag">Qwen</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Camera Angle Control Card -->
	<a href="https://angle.humangen.ai" target="_blank" class="card" data-tags="image,camera,angle,3d,video">
	<div class="card-preview gradient-9">
	<span>📷</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📷 Camera Angle Control</h3>
	<p class="card-description">
	Control camera angles with AI magic! Rotate, zoom, tilt & wide-angle.
	Generate transition videos between views.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Camera</span>
	<span class="tag">3D</span>
	<span class="tag">Video</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Qwen Image to LoRA Card -->
	<a href="https://qwenlora.humangen.ai" target="_blank" class="card" data-tags="image,lora,qwen,style,training">
	<div class="card-preview gradient-2">
	<span>🎭</span>
	<span class="card-badge badge-hot">🔥 HOT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎭 Qwen Image to LoRA</h3>
	<p class="card-description">
	Generate custom LoRA models from your images instantly.
	Train style LoRAs with Qwen-Image and create unique AI art.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">LoRA</span>
	<span class="tag">Style</span>
	<span class="tag">Qwen</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Z-Image Turbo Card -->
	<a href="https://z.humangen.ai" target="_blank" class="card" data-tags="image,turbo,fast">
	<div class="card-preview gradient-1">
	<span>⚡</span>
	<span class="card-badge badge-hot">🔥 HOT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">⚡ Z-Image Turbo Plus</h3>
	<p class="card-description">
	Ultra-fast image generation with SOMA prompt enhancement.
	Create stunning visuals in seconds with AI-powered prompt optimization.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Fast</span>
	<span class="tag">SOMA</span>
	<span class="tag">HD</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Video Generation Section -->
	<section class="category-section" data-section="video">
	<div class="category-header">
	<span class="category-icon">🎬</span>
	<h2 class="category-title">VIDEO GENERATION</h2>
	<span class="category-count">5 models</span>
	</div>
	<div class="card-grid">
	<!-- YouTube Trend Analyzer Card -->
	<a href="https://ytb.humangen.ai" target="_blank" class="card" data-tags="video,youtube,trend,analytics,ai,search,groq,llm,seo,keyword,channel,growth,viral,api">
	<div class="card-preview gradient-youtube">
	<span>📊</span>
	<span class="card-badge badge-youtube">📈 TREND</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📊 YouTube Trend Analyzer</h3>
	<p class="card-description">
	<span class="card-highlight-youtube">AI-Powered YouTube Analytics</span> -
	Search 100-1000 videos, AI Pick ratings, surge detection,
	growth tracking, and 5 LLM analysis tools. EN/한글
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-youtube">YouTube</span>
	<span class="tag-youtube">Analytics</span>
	<span class="tag">AI</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Uncensored Text to Video Card -->
	<a href="https://nsfwt2v.humangen.ai" target="_blank" class="card" data-tags="video,text2video,uncensored,wan,ai">
	<div class="card-preview gradient-1">
	<span>🎬</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎬 Uncensored Text to Video</h3>
	<p class="card-description">
	Transform your ideas into stunning AI-generated videos!
	Powered by Wan 1.3B with AI prompt enhancement.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">T2V</span>
	<span class="tag">Wan</span>
	<span class="tag">HD</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Uncensored Image to Video Card -->
	<a href="https://nsfwi2v.humangen.ai" target="_blank" class="card" data-tags="video,image2video,uncensored,wan,ai">
	<div class="card-preview gradient-6">
	<span>🖼️</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🖼️ Uncensored Image to Video</h3>
	<p class="card-description">
	Upload an image and create amazing videos!
	Powered by Wan 2.2 with up to 10 seconds duration.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">I2V</span>
	<span class="tag">Wan 2.2</span>
	<span class="tag">10s</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Video Editor Card -->
	<a href="https://studio.humangen.ai" target="_blank" class="card" data-tags="video,editor,timeline,cut,text">
	<div class="card-preview gradient-9">
	<span>✂️</span>
	<span class="card-badge badge-hot">🔥 HOT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">✂️ Video Editor</h3>
	<p class="card-description">
	Full-featured timeline video editor in your browser.
	Cut, trim, add text overlays, merge clips, and export to WebM/MP4.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Timeline</span>
	<span class="tag">Text</span>
	<span class="tag">Export</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Video Last Frame Extractor Card -->
	<a href="https://frame.humangen.ai" target="_blank" class="card" data-tags="video,frame,extract,last">
	<div class="card-preview gradient-5">
	<span>🎞️</span>
	<span class="card-badge badge-hot">🔥 HOT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎞️ Last Frame Extractor</h3>
	<p class="card-description">
	Extract the last frame from any video instantly.
	Upload a video, get the final frame as a downloadable image.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Extract</span>
	<span class="tag">Frame</span>
	<span class="tag">Fast</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Audio Generation Section -->
	<section class="category-section" data-section="audio">
	<div class="category-header">
	<span class="category-icon">🎵</span>
	<h2 class="category-title">AUDIO GENERATION</h2>
	<span class="category-count">2 models</span>
	</div>
	<div class="card-grid">
	<!-- MMAudio Studio Card -->
	<a href="https://mmaudio.humangen.ai" target="_blank" class="card" data-tags="audio,video2audio,text2audio,mmaudio,korean">
	<div class="card-preview gradient-9">
	<span>🎵</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎵 MMAudio Studio</h3>
	<p class="card-description">
	Generate audio from text or video! Video search, V2A, T2A modes.
	Korean language supported 한글지원!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">V2A</span>
	<span class="tag">T2A</span>
	<span class="tag">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Audio Segment Extractor Card -->
	<a href="https://cut.humangen.ai" target="_blank" class="card" data-tags="audio,cut,extract,segment">
	<div class="card-preview gradient-8">
	<span>✂️</span>
	<span class="card-badge badge-hot">🔥 HOT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">✂️ Audio Segment Extractor</h3>
	<p class="card-description">
	Cut any segment from your audio file with timeline visualization.
	Select start/end time and download the extracted segment instantly.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Cut</span>
	<span class="tag">Extract</span>
	<span class="tag">Timeline</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- 3D & Modeling Section -->
	<section class="category-section" data-section="3d">
	<div class="category-header">
	<span class="category-icon">🎮</span>
	<h2 class="category-title">3D & MODELING</h2>
	<span class="category-count">2 models</span>
	</div>
	<div class="card-grid">
	<!-- HY-Motion Generator Card -->
	<a href="https://motion.humangen.ai" target="_blank" class="card" data-tags="3d,motion,human,animation,text-to-motion,fbx,dance,walk,jump,pose,body,movement,ai,generator">
	<div class="card-preview gradient-motion">
	<span>🕺</span>
	<span class="card-badge badge-motion">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🕺 HY-Motion Generator</h3>
	<p class="card-description">
	<span class="card-highlight-motion">Text to 3D Human Motion!</span> -
	Transform text descriptions into realistic 3D human animations!
	AI prompt rewriting, <strong>FBX export</strong> for games & 3D software. Walk, dance, jump & more!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-motion">Text-to-Motion</span>
	<span class="tag-motion">FBX</span>
	<span class="tag">3D Anim</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- TRELLIS.2 Text/Image-to-3D Card -->
	<a href="https://trellis2.humangen.ai" target="_blank" class="card" data-tags="3d,text-to-3d,trellis,glb,model">
	<div class="card-preview gradient-5">
	<span>🎮</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎮 TRELLIS.2 Text/Image-to-3D</h3>
	<p class="card-description">
	Generate high-quality 3D models from text or images using Microsoft TRELLIS.2.
	Export to GLB format for games, AR/VR, and 3D printing.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Text/Image-to-3D</span>
	<span class="tag">GLB</span>
	<span class="tag">TRELLIS.2</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Tools Section -->
	<section class="category-section" data-section="tools">
	<div class="category-header">
	<span class="category-icon">🛠️</span>
	<h2 class="category-title">AI TOOLS</h2>
	<span class="category-count">5 models</span>
	</div>
	<div class="card-grid">
	<!-- Ultimate File Converter Card -->
	<a href="https://conv.humangen.ai" target="_blank" class="card" data-tags="tools,converter,file,data,csv,json,excel,parquet,xml,yaml,tsv,image,png,jpg,jpeg,webp,bmp,gif,tiff,ico,svg,audio,mp3,wav,ogg,flac,m4a,aac,video,mp4,avi,mkv,webm,mov,document,markdown,html,pdf,docx,txt,rtf,archive,zip,tar,7z,config,toml,ini,env,encoding,base64,url,hex,binary">
	<div class="card-preview gradient-best">
	<span>🔄</span>
	<span class="card-badge badge-best">⭐ ALL-IN-ONE</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔄 Ultimate File Converter</h3>
	<p class="card-description">
	<span class="card-highlight-best">Convert Anything to Anything!</span> -
	📊 Data (CSV/JSON/Excel/Parquet/XML/YAML) • 🖼️ Image (PNG/JPG/WebP/GIF) •
	🎵 Audio (MP3/WAV/FLAC) • 🎬 Video (MP4/AVI/MKV) • 📄 Document • 🗜️ Archive • ⚙️ Config • 🔤 Encoding
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-best">8 Categories</span>
	<span class="tag-best">50+ Formats</span>
	<span class="tag">FREE</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- Ansim Blur - Face Privacy Card -->
	<a href="https://blur.humangen.ai" target="_blank" class="card" data-tags="tools,blur,face,privacy,mosaic,video,image">
	<div class="card-preview gradient-1">
	<span>🔒</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔒 Ansim Blur - Face Privacy</h3>
	<p class="card-description">
	AI-powered face detection & privacy protection!
	Gaussian blur or mosaic for images & videos.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Face</span>
	<span class="tag">Blur</span>
	<span class="tag">Privacy</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- QR Canvas+ Generator Card -->
	<a href="https://qr.humangen.ai" target="_blank" class="card" data-tags="tools,qr,qrcode,generator,decoration">
	<div class="card-preview gradient-4">
	<span>🎯</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎯 QR Canvas+ Generator</h3>
	<p class="card-description">
	Create customized QR codes with professional styling!
	URL, Email, Phone, WiFi, vCard & decorative borders.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">QR Code</span>
	<span class="tag">Custom</span>
	<span class="tag">Style</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- BadgeCraft Generator Card -->
	<a href="https://badge.humangen.ai" target="_blank" class="card" data-tags="tools,badge,shields,html,github">
	<div class="card-preview gradient-2">
	<span>🏷️</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🏷️ BadgeCraft Generator</h3>
	<p class="card-description">
	Create beautiful shields.io badges with live preview!
	Perfect for GitHub READMEs, websites & documentation.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">Badge</span>
	<span class="tag">Shields</span>
	<span class="tag">HTML</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- DNA Diffusion Generator Card -->
	<a href="https://dna.humangen.ai" target="_blank" class="card" data-tags="tools,dna,protein,biology,diffusion,science">
	<div class="card-preview gradient-4">
	<span>🧬</span>
	<span class="card-badge badge-new">✨ NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🧬 DNA Diffusion Generator</h3>
	<p class="card-description">
	Generate DNA sequences with AI diffusion model!
	Translate to protein & analyze structure with LLM.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag">DNA</span>
	<span class="tag">Protein</span>
	<span class="tag">Bio</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- NSFW Section -->
	<section class="category-section" data-section="nsfw">
	<div class="category-header">
	<span class="category-icon">🔞</span>
	<h2 class="category-title">NSFW GENERATION</h2>
	<span class="category-count">7 models</span>
	</div>
	<div class="card-grid">
	<!-- AI Adult Novel Generator Card -->
	<a href="https://nsfwnovel.humangen.ai" target="_blank" class="card" data-tags="nsfw,novel,story,adult,erotic,fiction,writing,english,korean,한글,소설,성인소설,ai,generator,romance,passionate,literature">
	<div class="card-preview gradient-novel">
	<span>📖</span>
	<span class="card-badge badge-novel">✍️ NOVEL</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📖 AI Adult Novel Generator</h3>
	<p class="card-description">
	<span class="card-highlight-novel">Professional Erotic Fiction Writer</span> -
	Create passionate stories with 10 Golden Writing Rules!
	SOMA AI proofreading, multi-episode continuation, book-style output.
	🌐 <strong>English / 한국어</strong> bilingual support.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-novel">Novel</span>
	<span class="tag-novel">EN/한글</span>
	<span class="tag">Multi-EP</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW ADULT Card -->
	<a href="https://nsfwadult.humangen.ai" target="_blank" class="card" data-tags="nsfw,adult,uncensored,ai,image,text2image,2048px,z-image">
	<div class="card-preview gradient-nsfw">
	<span>🖼️</span>
	<span class="card-badge badge-nsfw">🔞 ADULT</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🖼️ NSFW ADULT</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Uncensored AI Image Generation</span> -
	Generate uncensored AI images from text prompts!
	Powered by Z-Image-Turbo with high-quality output up to 2048px.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">Uncensored</span>
	<span class="tag-nsfw">2048px</span>
	<span class="tag">Z-Image</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW IMAGE GENERATOR Card -->
	<a href="https://nsfwt2i.humangen.ai" target="_blank" class="card" data-tags="nsfw,image,generator,text2image,diffusion,customizable">
	<div class="card-preview gradient-nsfw-2">
	<span>🎨</span>
	<span class="card-badge badge-nsfw">🔞 T2I</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎨 NSFW IMAGE GENERATOR</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Advanced Diffusion Models</span> -
	Generate high-quality AI images from text prompts.
	Powered by advanced diffusion models with customizable parameters.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">Diffusion</span>
	<span class="tag-nsfw">Custom</span>
	<span class="tag">T2I</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW REAL Card -->
	<a href="https://nsfwreal.humangen.ai" target="_blank" class="card" data-tags="nsfw,real,realistic,sdxl,uncensored,long-prompt">
	<div class="card-preview gradient-nsfw-3">
	<span>📸</span>
	<span class="card-badge badge-nsfw">🔞 REAL</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📸 NSFW REAL</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Realistic SDXL Generation</span> -
	Generate high-quality uncensored images with AI!
	Powered by SDXL with long prompt support and advanced settings.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">Realistic</span>
	<span class="tag-nsfw">SDXL</span>
	<span class="tag">Long Prompt</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW HUB IMAGE Card -->
	<a href="https://pornhub.humangen.ai" target="_blank" class="card" data-tags="nsfw,hub,sdxl,stable-diffusion,long-prompt,auto">
	<div class="card-preview gradient-nsfw-4">
	<span>🎯</span>
	<span class="card-badge badge-nsfw">🔞 HUB</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎨 NSFW HUB IMAGE</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Stable Diffusion XL</span> -
	Generate stunning AI images with Stable Diffusion XL!
	Supports long prompts with automatic processing.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">SDXL</span>
	<span class="tag-nsfw">Auto</span>
	<span class="tag">Long Prompt</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW I2I Card -->
	<a href="https://nsfwi2i.humangen.ai" target="_blank" class="card" data-tags="nsfw,i2i,image2image,transform,multilang,translation">
	<div class="card-preview gradient-nsfw-5">
	<span>🔄</span>
	<span class="card-badge badge-nsfw">🔞 I2I</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔄 NSFW I2I</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Image-to-Image Transform</span> -
	Transform images with uncensored AI! Text-to-Image and Image-to-Image
	generation with multi-language prompt support and auto-translation.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">I2I</span>
	<span class="tag-nsfw">Multi-Lang</span>
	<span class="tag">Transform</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- NSFW HENTAI Card -->
	<a href="https://hentai.humangen.ai" target="_blank" class="card" data-tags="nsfw,hentai,anime,illustration,sdxl,artwork">
	<div class="card-preview gradient-nsfw-6">
	<span>🎭</span>
	<span class="card-badge badge-nsfw">🔞 HENTAI</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🎭 NSFW HENTAI</h3>
	<p class="card-description">
	<span class="card-highlight-nsfw">Anime-Style Artwork</span> -
	Generate stunning AI illustrations with SDXL!
	Create detailed anime-style artwork with advanced prompt controls and customizable settings.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-nsfw">Anime</span>
	<span class="tag-nsfw">SDXL</span>
	<span class="tag">Illustration</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>

	<!-- Korea Section -->
	<section class="category-section" data-section="korea">
	<div class="category-header">
	<span class="category-icon">🇰🇷</span>
	<h2 class="category-title">KOREA 한국 특화</h2>
	<span class="category-count">4 models</span>
	</div>
	<div class="card-grid">
	<!-- HWP AI 어시스턴트 -->
	<a href="https://hwp.humangen.ai" target="_blank" class="card" data-tags="korea,hwp,hwpx,pdf,document,ai,assistant,한국어,문서,변환,markdown,read,see,speak,think,memory,llm,groq,fireworks">
	<div class="card-preview gradient-hwp">
	<span>📄</span>
	<span class="card-badge badge-hwp">🆕 NEW</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📄 HWP AI 어시스턴트</h3>
	<p class="card-description">
	<span class="card-highlight-hwp">READ·SEE·SPEAK·THINK·MEMORY!</span> -
	AI가 HWP 파일을 <strong>읽고, 보고, 말하며, 생각하고 기억</strong>합니다!
	📑 HWP/HWPX/PDF/이미지 분석, 🔄 마크다운 변환, 💬 AI 채팅, 💾 대화 기록.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-hwp">HWP/HWPX</span>
	<span class="tag-hwp">AI분석</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- AI 플립북 -->
	<a href="https://aibook.humangen.ai" target="_blank" class="card" data-tags="korea,flipbook,pdf,ai,vlm,3d,chatbot,한국어,문서,분석,플립북,webgl,interactive,qwen,fireworks">
	<div class="card-preview gradient-flipbook">
	<span>📚</span>
	<span class="card-badge badge-flipbook">📖 FLIP</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">📚 AI 플립북 (AI FlipBook)</h3>
	<p class="card-description">
	<span class="card-highlight-flipbook">VLM + 3D FlipBook + AI 챗봇!</span> -
	PDF를 인터랙티브 3D 플립북으로 변환! 🤖 Qwen VLM이 문서 분석 후 질의응답.
	📖 WebGL 페이지 넘김 효과, 🎨 Comic Style UI, 💬 마크다운 채팅.
	🌐 <strong>한국어 특화</strong>
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-flipbook">3D FlipBook</span>
	<span class="tag-flipbook">VLM AI</span>
	<span class="tag-korea">한글</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- AI 상권 분석 시스템 Card -->
	<a href="https://markets.humangen.ai" target="_blank" class="card" data-tags="korea,상권,창업,분석,데이터,소상공인,market,business,ai,한국,korean,startup">
	<div class="card-preview gradient-korea">
	<span>🏪</span>
	<span class="card-badge badge-korea">🇰🇷 KOREA</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🏪 AI 상권 분석 시스템</h3>
	<p class="card-description">
	<span class="card-highlight-korea">전국 상가(상권) 데이터 실시간 분석</span> -
	17개 시도 상권 데이터 기반 AI 분석! 10가지 심층 인사이트,
	히트맵 시각화, AI 챗봇 상담까지. 창업·투자 의사결정 지원.
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-korea">상권분석</span>
	<span class="tag-korea">창업</span>
	<span class="tag">AI챗봇</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	<!-- AGI 명리학 완전판 Card -->
	<a href="https://unse.humangen.ai" target="_blank" class="card" data-tags="korea,사주,명리학,운세,팔자,fortune,saju,ai,한국,korean,음양,오행,십성,12운성,대운">
	<div class="card-preview gradient-fortune">
	<span>🔮</span>
	<span class="card-badge badge-fortune">🔥 스트리밍</span>
	</div>
	<div class="card-content">
	<h3 class="card-title">🔮 AGI 명리학 완전판</h3>
	<p class="card-description">
	<span class="card-highlight-fortune">사주팔자 AI 완전 분석</span> -
	💧물닭 vs 🌶️불닭 모드! 십성 + 12운성 + 오행 분석,
	음력/양력 지원, 대운/세운 사이클 차트까지. 실시간 스트리밍 AI 해석!
	</p>
	<div class="card-meta">
	<div class="card-tags">
	<span class="tag-fortune">사주팔자</span>
	<span class="tag-fortune">운세분석</span>
	<span class="tag">AI해석</span>
	</div>
	<span class="card-arrow">→</span>
	</div>
	</div>
	</a>
	</div>
	</section>
	</main>

	<!-- Footer -->
	<footer class="footer">
	<div class="footer-logo">✨ MAYAfree.ai ✨</div>
	<div class="footer-links">
	<a href="#" class="footer-link">About</a>
	<a href="#" class="footer-link">Blog</a>
	<a href="#" class="footer-link">API</a>
	<a href="#" class="footer-link">Discord</a>
	<a href="#" class="footer-link">Twitter</a>
	<a href="#" class="footer-link">GitHub</a>
	</div>
	<p class="footer-copy">© 2025 MAYAfree.ai - Powered by www.ginigen.ai/en 🤗</p>
	</footer>

	<!-- Floating Action Button -->
	<div class="fab" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
	⬆️
	</div>

	<!-- JavaScript -->
	<script>
	// Category Navigation
	const navTabs = document.querySelectorAll('.nav-tab');
	const sections = document.querySelectorAll('.category-section');
	const cards = document.querySelectorAll('.card');

	navTabs.forEach(tab => {
	tab.addEventListener('click', () => {
	const category = tab.dataset.category;

	// Update active tab
	navTabs.forEach(t => t.classList.remove('active'));
	tab.classList.add('active');

	// Filter sections
	if (category === 'all') {
	sections.forEach(s => s.style.display = 'block');
	} else {
	sections.forEach(s => {
	if (s.dataset.section === category) {
	s.style.display = 'block';
	} else {
	s.style.display = 'none';
	}
	});
	}
	});
	});

	// Search Functionality
	const searchInput = document.getElementById('searchInput');
	searchInput.addEventListener('input', (e) => {
	const query = e.target.value.toLowerCase();

	cards.forEach(card => {
	const title = card.querySelector('.card-title').textContent.toLowerCase();
	const description = card.querySelector('.card-description').textContent.toLowerCase();
	const tags = card.dataset.tags?.toLowerCase() \|\| '';

	if (title.includes(query) \|\| description.includes(query) \|\| tags.includes(query)) {
	card.style.display = 'block';
	} else {
	card.style.display = 'none';
	}
	});

	// Show all sections when searching
	if (query) {
	sections.forEach(s => s.style.display = 'block');
	navTabs.forEach(t => t.classList.remove('active'));
	navTabs[0].classList.add('active');
	}
	});
	</script>
	</body>
	</html>