/* Modern, minimal foundation for Apps By Joju */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
	--bg-1: #0f1724;
	--bg-2: #0b1220;
	--card-bg: rgba(255,255,255,0.06);
	--glass: rgba(255,255,255,0.06);
	--accent: #7c5cff;
	--accent-bright: #9d87ff;
	--muted: #9aa4b2;
	--radius: 12px;
	--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
	color:#e6eef8;
	background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	position: relative;
	overflow-x: hidden;
}
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 20% 50%, rgba(124, 92, 255, 0.08) 0%, transparent 50%),
	            radial-gradient(circle at 80% 80%, rgba(30, 64, 175, 0.08) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.container{max-width:1100px;margin:0 auto;padding:24px;position:relative;z-index:1}
.site-header{backdrop-filter: blur(8px);background:rgba(15, 23, 36, 0.4);border-bottom:1px solid rgba(255,255,255,0.05);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-size:20px;margin:0;font-weight:700;letter-spacing:0.4px;background:linear-gradient(135deg,var(--accent-bright),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.controls{display:flex;gap:12px;align-items:center}
.search{
	background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));
	border:1px solid rgba(255,255,255,0.06);
	padding:10px 14px;border-radius:10px;color:var(--muted);min-width:180px;transition:var(--transition);font-size:14px
}
.search:focus{outline:none;border-color:var(--accent);background:linear-gradient(180deg,rgba(124,92,255,0.1),rgba(124,92,255,0.05));color:#e6eef8;box-shadow:0 0 0 3px rgba(124,92,255,0.1)}
.theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px 10px;border-radius:10px;cursor:pointer;transition:var(--transition);font-size:16px}
.theme-toggle:hover{border-color:var(--accent);background:rgba(124,92,255,0.1)}
.hero{padding:48px 0 24px;text-align:center}
.hero h2{margin:0 0 12px;font-size:36px;font-weight:700;background:linear-gradient(135deg,#e6eef8,var(--accent-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tagline{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:32px 0}
.app-card{
	background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border:1px solid rgba(255,255,255,0.08);
	border-radius:16px;
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:12px;
	transition:var(--transition);
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.app-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
	transition: left 0.5s ease;
}
.app-card:hover::before {
	left: 100%;
}
.app-card:hover{
	transform:translateY(-8px);
	border-color:rgba(124,92,255,0.3);
	background:linear-gradient(135deg, rgba(124,92,255,0.12), rgba(255,255,255,0.04));
	box-shadow:0 12px 40px rgba(124,92,255,0.2)
}
.app-title{font-weight:600;margin:0;font-size:18px;color:#e6eef8;position:relative;z-index:1}
.app-desc{color:var(--muted);font-size:14px;margin:0;line-height:1.5;position:relative;z-index:1}
.app-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;position:relative;z-index:1}
.tag{background:linear-gradient(135deg,rgba(124,92,255,0.2),rgba(124,92,255,0.1));color:var(--accent-bright);padding:6px 12px;border-radius:999px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;border:1px solid rgba(124,92,255,0.2)}
.site-footer{padding:32px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(255,255,255,0.04);margin-top:40px}
.site-footer p{margin:0;font-size:14px}

/* Dark mode toggle: alternative theme */
body.light{
	--bg-1: #ffffff;
	--bg-2: #f9fafb;
	--card-bg: rgba(109,40,217,0.04);
	color: #1a202c;
	--muted: #718096;
	--accent: #6d28d9;
	--accent-bright: #7c3aed;
}
body.light::before {
	background: radial-gradient(circle at 20% 50%, rgba(109, 40, 217, 0.05) 0%, transparent 50%),
	            radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
}
.light .site-header {
	background: rgba(255, 255, 255, 0.8);
	border-bottom: 1px solid rgba(109, 40, 217, 0.1);
}
.light .logo {
	background: linear-gradient(135deg, #6d28d9, #7c3aed);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.light .search {
	background: linear-gradient(180deg, rgba(109,40,217,0.04), rgba(109,40,217,0.02));
	border: 1px solid rgba(109, 40, 217, 0.15);
	color: #4a5568;
}
.light .search:focus {
	border-color: #6d28d9;
	background: linear-gradient(180deg, rgba(109,40,217,0.1), rgba(109,40,217,0.05));
	color: #1a202c;
	box-shadow: 0 0 0 3px rgba(109,40,217,0.1);
}
.light .theme-toggle {
	border: 1px solid rgba(109, 40, 217, 0.15);
	color: #1a202c;
}
.light .theme-toggle:hover {
	border-color: #6d28d9;
	background: rgba(109, 40, 217, 0.08);
}
.light .hero h2 {
	background: linear-gradient(135deg, #1a202c, #6d28d9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.light .app-card {
	background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(245,247,250,1));
	border: 1px solid rgba(109, 40, 217, 0.12);
}
.light .app-card::before {
	background: linear-gradient(90deg, transparent, rgba(109,40,217,0.08), transparent);
}
.light .app-card:hover {
	background: linear-gradient(135deg, rgba(109,40,217,0.08), rgba(255,255,255,0.95));
	border-color: rgba(109, 40, 217, 0.25);
	box-shadow: 0 12px 40px rgba(109, 40, 217, 0.15);
}
.light .app-title {
	color: #1a202c;
}
.light .tag {
	background: linear-gradient(135deg, rgba(109,40,217,0.12), rgba(124,58,237,0.08));
	color: #6d28d9;
	border: 1px solid rgba(109, 40, 217, 0.2);
}
.light .site-footer {
	border-top: 1px solid rgba(109, 40, 217, 0.1);
}

@media (max-width:600px){
	.header-inner{flex-direction:column;align-items:flex-start;gap:10px}
	.search{width:100%}
	.hero h2{font-size:28px}
	.hero{padding:36px 0 18px}
	.apps-grid{grid-template-columns:1fr}
	.app-card{padding:16px}
}

/* Utility */
.hidden{display:none !important}