:root {
    --text-primary: #140F35;
    --text-secondary: #6A717E;
    --text-disabled: #9CA3AF;
    --primary-100: #E5E4EF;
    --primary-300: #8278B9;
    --primary-500: #382C79;
    --primary-700: #241F61;
    --primary-900: #1C163A;
    --neutral-50: #FAFAFC;
    --neutral-100: #F5F6F9;
    --neutral-150: #F6F6F6;
    --neutral-200: #ECEEF3;
    --neutral-300: #D3D6E1;
    --neutral-400: #C9CCD7;
    --neutral-500: #AEB2C1;
    --neutral-600: #8D91A3;
    --neutral-700: #6D7085;
    --neutral-800: #494B61;
    --neutral-900: #2C2D3E;
    --success-500: #3DBD78;
    --error-500: #E54B4B;
    --warning-500: #F4C045;
    --gradient-hero: linear-gradient(180deg, #382C79 0%, #537DA7 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif !important;
    color: var(--text-primary);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header,
section,
footer {
    overflow: hidden;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 !important;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.btn-primary {
    border: 1px solid var(--primary-500) !important;
    background-color: var(--primary-500) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

.btn-secondary {
    border: 1px solid var(--primary-500) !important;
    background-color: #ffffff !important;
    color: var(--primary-500) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
}

.btn-pill {
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
}

.section {
    padding: 96px 0;
}

.section-title {
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 800;
    color: var(--primary-500);
    text-align: center;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

@media (max-width: 767.98px) {
    .section {
        padding: 64px 0;
    }
}