:root {
--md-primary: #3f51b5;
--md-primary-dark: #303f9f;
--md-bg: #fafafa;
--md-surface: #ffffff;
--md-text: #212121;
--md-text-light: #666666;
--md-shadow: rgba(0,0,0,0.15);
--md-radius: 12px;
}

body {
font-family: 'Roboto', sans-serif;
margin: 0;
background: var(--md-bg);
color: var(--md-text);
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
text-align: center;
background: var(--md-primary);
color: white;
padding: 2rem 1rem;
box-shadow: 0 2px 6px var(--md-shadow);
}

header h1 {
margin: 0;
font-weight: 500;
}

.subtitle {
margin-top: 0.5rem;
font-weight: 300;
opacity: 0.9;
}

.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
padding: 2rem;
flex-grow: 1;
}

.card {
background: var(--md-surface);
border-radius: var(--md-radius);
box-shadow: 0 2px 8px var(--md-shadow);
text-decoration: none;
color: inherit;
padding: 1.5rem;
transition: transform 0.15s ease, box-shadow 0.15s ease;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 16px var(--md-shadow);
}

.card-icon {
font-size: 48px;
color: var(--md-primary);
margin-bottom: 0.5rem;
}

.card h2 {
font-size: 1.2rem;
margin: 0.2rem 0;
color: var(--md-primary-dark);
}

.card p {
font-size: 0.95rem;
color: var(--md-text-light);
line-height: 1.4;
}

footer {
text-align: center;
padding: 1rem;
background: var(--md-surface);
color: var(--md-text-light);
border-top: 1px solid #e0e0e0;
}

footer a {
color: var(--md-primary);
text-decoration: none;
}

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