:root {
    /* ===== Colors ===== */
    --color-primary: #685ADB;
    --color-primary-hover: #5648C8;
    --color-primary-lighter: #F3F0F5;
    --color-secondary: #685ADB;
    --color-heading: #231F20;
    --color-text: #595F79;
    --color-text-alt: #5F6C72;
    --color-white: #FFFFFF;
    --color-card-border: #EBE8F4;
    --color-card-border-alt: #E7EEF9;
    --color-muted: #92ABC9;
    --color-dark: #231F20;
    --color-bg-primary: #F3F0F5;
    --color-bg-section: #685ADB;
    --color-bg-card: #FFFFFF;
    --color-span-highlight: #FAEDD6;
    --color-heading-dark: #231F20;
    --color-heading-light: #1F2A2E;
    --color-text-muted: #595F79;
    --color-name: #35414B;
    --color-black: #231F20;
    --color-bg-light: #F3F0F5;
    --color-bg-lighter: #F7F5FC;
    --color-border-light: #E4DFFE;
    --color-border-dark: #685ADB;
    --color-border-section: #E4DFFE;
    --color-border-section-bg: #E7EEF9;
    --color-badge-text: #92400E;
    --color-primary-alt: #685ADB;
    --banner-gradient:  linear-gradient(62.26deg, #F4F0FF 17.21%, #FFFFFF 45.17%, #F9F8FC 63.65%, #E1DEEE 100%);
    --theme-gradient:  linear-gradient(62.26deg, #F6F3FF 17.21%, #FFFFFF 49.69%, #E1DEEE 100%);
    --icon-background: linear-gradient(112.29deg, #F5F2FA 14.54%, #EFEDF7 97.38%);



    /* ===== Shadows ===== */
    --shadow-card: 0px 4px 12.8px 0px #EBE8F4;
    --shadow-card-alt: 0px 0px 16px 0px rgba(69, 57, 141, 0.2);
    --shadow-lg: 0px 8px 24px rgba(0, 0, 0, 0.1);

    /* ===== Font Families ===== */
    --font-primary: 'Lato', sans-serif;
    --font-heading: 'Lato', sans-serif;

    /* ===== Font Sizes ===== */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-base-15: 15px;
    --fs-md: 17px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fs-5xl: 39px;
    --fs-6xl: 43px;
    --fs-7xl: 48px;

    /* ===== Font Weights ===== */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* ===== Line Heights ===== */
    --lh-tight: 120%;
    --lh-heading: 140%;
    --lh-normal: 150%;
    --lh-relaxed: 170%;

    /* ===== Section Spacing ===== */
    --section-py: 120px;
    --section-bg-pt: 106px;
    --section-bg-pb: 106px;
    --section-bg-py: 85px;
    --section-wraper-py: 80px;

    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 30px;
    --radius-full: 9999px;
}

/* ===== Base Reset ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
html {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-normal);
    margin: 0;
    padding: 0;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    letter-spacing: 0;
    margin-top: 0;
}

h1 {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--color-black);
}

h1 span {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-primary); 
}

h2 {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var( --color-heading-light);
}

 
h2 ~ .sec-desc {
    font-size: var(--fs-md);
    color: var(--color-text);
    padding-top: 25px;
    text-align: center;
}

 

 
p{
    font-family: var(--font-primary);
}
/* ===== Banner Paragraph ===== */
.banner-text p,
p.banner-text {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

/* ===== CTA Buttons ===== */
.btn-primary,
.cta-filled {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: var(--fs-base);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    letter-spacing: 0;
    position: relative;
    overflow: visible;
}

.btn-primary::after,
.cta-filled::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    animation: btn-pulse 2s ease infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes btn-pulse {
    0%   { box-shadow: 0 0 0 0px rgba(69, 57, 141, 0.4); }
    100% { box-shadow: 0 0 0 14px rgba(69, 57, 141, 0); }
}

@keyframes btn-pulse-light {
    0%   { box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

.btn-primary:hover,
.cta-filled:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-outline,
.cta-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-size: var(--fs-base);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    letter-spacing: 0;
}

.btn-outline:hover,
.cta-outline:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* ===== Section Spacing ===== */
.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    border: 1px solid var(--color-border-section);
}

.section-bg {
    padding-top: var(--section-bg-pt);
    padding-bottom: var(--section-bg-pb);
    background-color: var(--color-bg-section);
    border: 1px solid var(--color-border-section-bg);
}

.sec-wrapper {
    padding-top: var(--section-wraper-py);
    padding-bottom: var(--section-wraper-py);
}

/* ===== Banner Gradient ===== */
.banner-gradient {
    background: var(--banner-gradient);
}

/* ===== Card Border ===== */
.card-bordered {
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
}

/* ===== Section Head ===== */

/* ===== Links ===== */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--color-primary-hover);
}