:root {
    --primary-color: #155dfc;
    --primary-gradient: linear-gradient(135deg, #4f39f6 0%, #9810fa 141.42%);
    --secondary-gradient: linear-gradient(135deg, #eff6ff 0%, #eef2ff 70.71%, #faf5ff 141.42%);
    --text-dark: #101828;
    --text-medium: #4a5565;
    --text-light: #ffffff;
    --background-light: #fdfdfd;
    --accent-yellow: #fdc700;
    --border-light: #e5e7eb;
}

body {
    margin: 0;
    font-family: 'Inter', 'Arial', sans-serif;
    background-color: var(--background-light);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-size: 16px;
}
.page-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.grid {
    display: grid;
    gap: 24px;
}

@media (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}