:root {
    --primary-color: #2563EB;
    --secondary-color: #7C3AED;
    --accent-color: #059669;
    --dark-gray: #1F2937;
    --light-gray: #F9FAFB;
    --white: #FFFFFF;
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(31,41,55,0.08);
    --shadow-md: 0 4px 16px rgba(31,41,55,0.12);
    --shadow-lg: 0 8px 32px rgba(31,41,55,0.16);
    --transition: 0.3s ease;
    --spacing-1: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 48px;
    --spacing-6: 64px;
    --spacing-7: 96px;
}

html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    font-family: var(--font-primary);
    background: var(--light-gray);
    color: var(--dark-gray);
    min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    margin: 0 0 var(--spacing-2) 0;
    color: var(--primary-color);
}
p {
    margin: 0 0 var(--spacing-2) 0;
    line-height: 1.7;
}
img {
    max-width: 100%;
    display: block;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-2);
}
.grid {
    display: grid;
    gap: var(--spacing-4);
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
} 