:root {
    --color-primary: #3d348c;
    --color-primary-hover: #30286f;
    --color-action: #4b3aae;
    --color-purple-50: #f3f0fa;
    --color-purple-100: #e8e3f6;
    --color-purple-300: #b8aedc;
    --color-text-heading: #242424;
    --color-text-body: #555555;
    --color-border: #e5e2ec;
    --color-bg-soft: #fbfbfd;
}

body {
    color: var(--color-text-body);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hero-section {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background:
        linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.98) 56%, rgba(243,240,250,.68) 56%, rgba(243,240,250,.88) 100%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: -18px -18px -18px auto;
    width: 47%;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.36) 100%),
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1400&q=80") center top / cover no-repeat;
    filter: blur(7px);
    opacity: .58;
    transform: scale(1.04);
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(61,52,140,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,52,140,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 52%, #000 100%);
    pointer-events: none;
}

.hero-section .btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

.reason-section {
    background:
        linear-gradient(180deg, #fff 0%, var(--color-bg-soft) 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.reason-card {
    position: relative;
    box-shadow: 0 1px 4px rgba(36,36,36,.06);
}

.reason-card::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: var(--color-primary);
}

.reason-number {
    color: var(--color-purple-100);
}

.lift-card,
.paper-shadow,
.shadow-soft {
    box-shadow: 0 1px 4px rgba(36,36,36,.06) !important;
}

.lift-card:hover {
    box-shadow: 0 6px 16px rgba(36,36,36,.12) !important;
}

.rounded-lg {
    border-radius: 8px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

.rounded-full {
    border-radius: 999px !important;
}

.section-label {
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .hero-section {
        background: linear-gradient(180deg, #fff 0%, #fff 68%, var(--color-purple-50) 100%);
    }

    .hero-section::before {
        display: none;
    }

    .hero-section::after {
        opacity: .45;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 60%, #000 100%);
    }
}