:root{
	--bg-0: #0f1723; /* deep navy */
	--bg-1: #0b1220; /* darker */
	--card: #0f1726;
	--muted: #94a3b8;
	--accent: #4f46e5; /* indigo */
	--accent-2: #06b6d4; /* cyan */
	--glass: rgba(255,255,255,0.03);
	--radius: 12px;
	--shadow: 0 6px 20px rgba(2,6,23,0.6);
	--text: #e6eef8;
}

html,body{
	height:100%;
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg,var(--bg-0), var(--bg-1));
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Container and layout */
.container{
	max-width:1200px;
	margin:28px auto;
	padding:18px;
}

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

.site-title{
	font-size:1.25rem;
	font-weight:600;
	letter-spacing:0.2px;
}

/* Grid for service cards */
.widget-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:16px;
}

.card{
	background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--glass));
	border-radius:var(--radius);
	padding:14px;
	box-shadow:var(--shadow);
	border: 1px solid rgba(255,255,255,0.03);
	backdrop-filter: blur(6px) saturate(120%);
}

.card .title{
	font-weight:600;
	margin-bottom:6px;
}

.card .desc{
	color:var(--muted);
	font-size:0.9rem;
	margin-bottom:10px;
}

.service-link{
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	color:var(--text);
}

.service-link img{
	width:36px;
	height:36px;
	border-radius:10px;
	background:linear-gradient(135deg,var(--accent),var(--accent-2));
	padding:6px;
}

.meta{
	display:flex;
	gap:8px;
	align-items:center;
	margin-top:8px;
}

.badge{
	font-size:0.8rem;
	padding:6px 8px;
	border-radius:999px;
	background:rgba(255,255,255,0.03);
	color:var(--muted);
}

/* Buttons and controls */
.btn{
	display:inline-block;
	background:var(--accent);
	color:white;
	padding:8px 12px;
	border-radius:10px;
	text-decoration:none;
	font-weight:600;
	box-shadow:0 6px 18px rgba(79,70,229,0.18);
}

.btn.secondary{
	background:transparent;
	border:1px solid rgba(255,255,255,0.04);
	color:var(--text);
}

/* Responsive tweaks */
@media (max-width:640px){
	.container{padding:12px;margin:14px}
	.site-title{font-size:1rem}
}

/* Small UX niceties */
a:hover{opacity:0.95}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:10px}

/* Helpful utility */
.muted{color:var(--muted)}

/* Widget-specific look */
.widget-card{display:flex;flex-direction:column}
.widget-card .top{display:flex;justify-content:space-between;align-items:center}

/* End of custom styles */