:root {
    --color-blue-05: #E3E6FF;
    --color-blue-10: #E3E6FB;
    --color-blue-20: #C2C8F7;
    --color-blue-30: #9FA8F2;
    --color-blue-40: #6F7DEE;
    --color-blue-50: #3140D5;
    --color-blue-60: #2B3ABF;
    --color-blue-70: #2533A9;
    --color-blue-80: #1F2D93;
    --color-blue-90: #19267D;
    --color-blue-100: #131F67;

    --color-blue-50-dark-1: #252FA8;
    --color-blue-50-dark-2: #1B237F;
    --color-blue-50-dark-3: #111654;

    --color-blue-100-dark-1: #0F1952;
    --color-blue-100-dark-2: #0B133D;
    --color-blue-100-dark-3: #070C29;

    --color-cyan-teal: #0CC6C0;
    --color-cyan-teal-dark-1: #0A9E9A;
    --color-cyan-teal-dark-2: #095B78;
    --color-cyan-teal-dark-3: #062E3F;

    --color-dark-charcoal: #1A1A1A; /* Dark Charcoal */
    --color-dark-background: #474747;

    --color-purple-10: #EDE6FB; /* Very light tint, soft lavender */
    --color-purple-20: #D9C9F7; /* Light pastel purple */
    --color-purple-30: #C5A9F3; /* Gentle lilac */
    --color-purple-40: #B18AEF; /* Light violet */
    --color-purple-50: #7C3BED; /* Base color */
    --color-purple-60: #6E34D4; /* Slightly deeper, more saturated */
    --color-purple-70: #5F2DBA; /* Rich purple */
    --color-purple-80: #4F259F; /* Deep violet */
    --color-purple-90: #3F1E85; /* Very dark purple */
    --color-purple-100: #2F166B; /* Near-black with purple undertone */

    --color-white-10: #FFFFFF; /* Pure white */
    --color-white-20: #F9F9F9; /* Whisper white */
    --color-white-30: #F2F2F2; /* Soft mist */
    --color-white-40: #ECECEC; /* Light cloud */
    --color-white-50: #E5E5E5; /* Gentle ash */
    --color-white-60: #DCDCDC; /* Pale stone */
    --color-white-70: #D3D3D3; /* Light silver */
    --color-white-80: #C8C8C8; /* Muted gray */
    --color-white-90: #B4B4B4; /* Subtle graphite */
    --color-white-100: #999999; /* Medium gray — balanced and versatile */

    --color-accent-10: #fde6ee;
    --color-accent-30: #f7b3cd;
    --color-accent-50: #ED4589;
    --color-accent-70: #c52c6a;
    --color-accent-100: #8a1c47;

    --color-accent-50-dark-1: #C2376F;
    --color-accent-50-dark-2: #9B2B58;
    --color-accent-50-dark-3: #661B3A;

    --color-grey-10: rgba(220, 220, 220, 0.1);
    --color-grey-20: rgba(200, 200, 200, 0.3);
    --color-grey-30: rgba(190, 190, 190, 0.4);
    --color-grey-40: rgba(180, 180, 180, 0.5);
    --color-grey-50: rgba(170, 170, 170, 0.6);
    --color-grey-60: rgba(160, 160, 160, 0.7);
    --color-grey-70: rgba(150, 150, 150, 0.75);
    --color-grey-90: rgba(130, 130, 130, 0.9);
    --color-grey-100: rgba(120, 120, 120, 1);

    --button-primary-color: linear-gradient(135deg, var(--color-purple-70), var(--color-purple-50));
    --button-primary-hover-color: linear-gradient(135deg, var(--color-purple-50), var(--color-purple-40));

    --button-secondary-color: linear-gradient(135deg, var(--color-white-50), var(--color-white-30));
    --button-secondary-hover-color: linear-gradient(135deg, var(--color-white-100), var(--color-white-30));

    --button-tertiary-color: linear-gradient(135deg, var(--color-accent-10), var(--color-accent-30));
    --button-tertiary-hover-color: linear-gradient(135deg, var(--color-accent-30), var(--color-accent-50));

    --button-quaternary-color: linear-gradient(135deg, var(--color-grey-20), var(--color-grey-40));
    --button-quaternary-hover-color: linear-gradient(135deg, var(--color-grey-40), var(--color-grey-60));

}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background-color: white;
    font-family: 'HostGrotesk', 'HostGrotesk-Bold',
    'HostGrotesk-BoldItalic', 'HostGrotesk-ExtraBold',
    'HostGrotesk-ExtraBoldItalic', 'HostGrotesk-Italic',
    'HostGrotesk-Italic-VariableFont_wght', 'HostGrotesk-Light',
    'HostGrotesk-LightItalic', 'HostGrotesk-Medium',
    'HostGrotesk-MediumItalic', 'HostGrotesk-Regular', 'HostGrotesk-SemiBold',
    'HostGrotesk-SemiBoldItalic', 'HostGrotesk-VariableFont_wght', sans-serif;
}

a {
    text-decoration: none;
}

a.button-primary,
button.button-primary {
    appearance: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: var(--color-accent-50);
    color: white;
    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
    text-align: center;
    line-height: 1;
}

a.button-primary:hover,
button.button-primary:hover {
    background: var(--color-blue-50);
    color: var(--color-cyan-teal);
    box-shadow: 0 0 10px var(--color-cyan-teal);
    transform: translateY(-2px);
}

a.button-primary.active,
button.button-primary.active {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-50);
    color: white;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

.button-secondary {
    display: flex;
    align-items: center;
    background: transparent;
    color: var(--color-blue-100);
    border: 1px solid var(--color-blue-100);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

.button-secondary i {
    font-size: 3.5rem;
    flex-shrink: 0;
    color: var(--color-blue-100);
}

.button-text {
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    line-height: 1.25;
}

.button-text strong {
    font-size: 1.2rem;
    font-weight: 700;
}

.button-secondary:hover {
    color: var(--color-accent-50);
    border: 1px solid var(--color-accent-50);
    box-shadow: 0 0 10px var(--color-accent-100);
}

.button-secondary:hover i {
    color: var(--color-accent-50);
}

.button-tertiary {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: transparent;
    color: var(--color-accent-50);
    border: 1px solid var(--color-accent-50);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

.button-tertiary i {
    font-size: 3.5rem;
    flex-shrink: 0;
    color: var(--color-accent-50);
}

.button-tertiary:hover {
    color: var(--color-cyan-teal);
    border: 1px solid var(--color-cyan-teal);
    box-shadow: 0 0 10px var(--color-cyan-teal);
}

.button-tertiary:hover i {
    color: var(--color-cyan-teal);
}

.button-quaternary {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: transparent;
    color: var(--color-blue-100);
    border: 1px solid var(--color-blue-100);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
}

.button-quaternary i {
    font-size: 3.5rem;
    flex-shrink: 0;
    color: var(--color-white-70);
}

.button-quaternary:hover {
    background-color: var(--color-accent-100);
    color: var(--color-accent-10);
    border: 1px solid var(--color-accent-10);
    box-shadow: 0 0 10px var(--color-accent-30);
}

.button-quaternary:hover i {
    color: var(--color-accent-10);
}

.button-row {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    justify-content: center;

}

.mimoTextAccent {
    color: var(--color-cyan-teal);
}

.button-tertiary,
.button-quaternary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}