#benefits.auticly-benefits {
    --benefit-ink: #20143c;
    --benefit-muted: #736c85;
    --benefit-surface: #fff;
    --benefit-pearl: #faf9fd;
    --benefit-line: #e9e5f1;
    position: relative;
    isolation: isolate;
    scroll-margin-top: 5rem;
    background: radial-gradient(ellipse at 50% 53%, #f3effb 0, transparent 66%);
}
#benefits .section-title { margin-bottom: 3.25rem; }
#benefits .section-title h2 { color: var(--benefit-ink); text-wrap: balance; letter-spacing: -.035em; }
#benefits .section-title p { color: var(--benefit-muted); text-wrap: pretty; line-height: 1.85; }
#benefits .benefits-title-accent {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: #106cdb;
    background: linear-gradient(135deg, #2087ec, #0756c7);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#benefits .benefits-title-accent::after {
    content: "";
    position: absolute;
    bottom: -.06em;
    inset-inline: 3%;
    height: .12em;
    border-radius: 50%;
    border-top: .045em solid #2087ec70;
    transform: rotate(-2deg);
}
#benefits .benefits-pillars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin: 1.9rem 0 1.15rem;
    padding: 0;
    list-style: none;
}
#benefits .benefits-pillar {
    --pillar-color: #567aaa;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border: 1px solid var(--benefit-line);
    border-radius: .9rem;
    background: var(--benefit-surface);
    color: var(--benefit-ink);
    font-size: calc(var(--bs-body-font-size) * .875);
    font-weight: 600;
    box-shadow: 0 3px 6px #39265703;
}
#benefits .benefits-pillar--agent { --pillar-color: #9365c0; }
#benefits .benefits-pillar--sales { --pillar-color: #4a9488; }
#benefits .benefits-pillar-icon { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--pillar-color); }
#benefits .benefits-summary { max-width: 39rem; margin-inline: auto; padding-inline: 1rem; }
#benefits .benefits-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.35rem;
    padding: .45rem .95rem;
    border: 1px solid var(--benefit-line);
    border-radius: 2rem;
    background: var(--benefit-surface);
    color: #7957af;
    font-size: calc(var(--bs-body-font-size) * .8125);
    font-weight: 600;
    box-shadow: 0 3px 8px #39265704;
}
#benefits .benefits-spark {
    width: .7rem;
    height: .7rem;
    background: linear-gradient(135deg, #a18add, #6b45af);
    clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}
#benefits .benefits-grid { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
#benefits .benefits-grid > .col { display: flex; perspective: 1100px; }
#benefits .benefits-grid > .wow { animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
#benefits .benefit-card {
    --benefit-accent: 85, 135, 212;
    --benefit-x: 50%;
    --benefit-y: 35%;
    --benefit-rx: 0deg;
    --benefit-ry: 0deg;
    --benefit-dx: 0px;
    --benefit-dy: 0px;
    --benefit-lift: 0px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 1.55rem 1.6rem 1.4rem;
    border: 1px solid var(--benefit-line);
    border-radius: 1.65rem;
    background: linear-gradient(160deg, var(--benefit-surface) 35%, var(--benefit-pearl));
    box-shadow: 0 2px 3px #25153c03, 0 12px 32px -18px #39265724, inset 0 1px 0 #ffffffa6;
    transform: translateY(var(--benefit-lift)) rotateX(var(--benefit-rx)) rotateY(var(--benefit-ry));
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease, border-color .4s ease;
}
#benefits .benefit-card--agent { --benefit-accent: 139, 102, 202; }
#benefits .benefit-card--sales { --benefit-accent: 67, 160, 146; }
#benefits .benefit-card::before,
#benefits .benefit-card::after { content: ""; position: absolute; pointer-events: none; }
#benefits .benefit-card::before {
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(27rem circle at var(--benefit-x) var(--benefit-y), rgba(var(--benefit-accent), .13), transparent 65%);
    opacity: 0;
    transition: opacity .5s ease;
}
#benefits .benefit-card::after {
    top: -1px;
    inset-inline: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--benefit-accent), .8), transparent);
    opacity: .5;
    transition: opacity .4s ease;
}
#benefits .benefit-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#benefits .benefit-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--benefit-muted);
    font-size: calc(var(--bs-body-font-size) * .75);
    font-weight: 600;
    text-align: start;
}
#benefits .benefit-label > span {
    flex: 0 0 .4rem;
    height: .4rem;
    border-radius: 50%;
    background: rgb(var(--benefit-accent));
    box-shadow: 0 0 0 4px rgba(var(--benefit-accent), .08);
}
#benefits .benefit-number {
    color: rgba(var(--benefit-accent), .7);
    font-size: calc(var(--bs-body-font-size) * .8125);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}
#benefits .benefit-art {
    position: relative;
    display: grid;
    align-items: center;
    min-width: 0;
    aspect-ratio: 1.34;
    margin: .5rem -.6rem 0;
    background: radial-gradient(ellipse, rgba(var(--benefit-accent), .09), transparent 68%);
}
#benefits .benefit-art::before {
    content: "";
    position: absolute;
    inset: 15% 6%;
    border: 1px solid rgba(var(--benefit-accent), .08);
    border-radius: 50%;
    transform: rotate(-18deg);
    pointer-events: none;
}
#benefits .benefit-art img {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 9px rgba(var(--benefit-accent), .06));
    transform: translate(var(--benefit-dx), var(--benefit-dy));
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}
#benefits .fbox-6-txt { flex: 1; text-align: start; }
#benefits .fbox-6-txt h3 { color: var(--benefit-ink); line-height: 1.6; text-wrap: balance; margin: .4rem 0 .75rem; font-weight: 700; }
#benefits .fbox-6-txt p { color: var(--benefit-muted); font-size: var(--bs-body-font-size); line-height: 1.9; text-wrap: pretty; margin: 0; padding: 0; }
#benefits .benefit-finish { display: flex; gap: .25rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--benefit-line); }
#benefits .benefit-finish span { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(var(--benefit-accent), .18); }
#benefits .benefit-finish span:first-child { width: 1.35rem; border-radius: 1rem; background: rgba(var(--benefit-accent), .65); }
.theme--dark #benefits.auticly-benefits {
    --benefit-ink: #f2ecfc;
    --benefit-muted: #b7b0c7;
    --benefit-surface: #20232e;
    --benefit-pearl: #242632;
    --benefit-line: #373542;
    background: radial-gradient(ellipse at 50% 53%, #30223f60, transparent 66%);
}
.theme--dark #benefits .benefits-eyebrow { color: #c6adee; }
.theme--dark #benefits .benefits-title-accent { background-image: linear-gradient(135deg, #b5d8ff, #8fbcff); }
.theme--dark #benefits .benefit-card { box-shadow: 0 12px 35px -18px #0008, inset 0 1px 0 #ffffff08; }
.theme--dark #benefits .benefit-card--inbox { --benefit-accent: 119, 166, 239; }
.theme--dark #benefits .benefit-card--agent { --benefit-accent: 175, 141, 228; }
.theme--dark #benefits .benefit-card--sales { --benefit-accent: 101, 193, 178; }
@media (hover: hover) and (pointer: fine) {
    #benefits .benefit-card:hover {
        --benefit-lift: -7px;
        border-color: rgba(var(--benefit-accent), .36);
        box-shadow: 0 5px 10px -8px rgba(var(--benefit-accent), .3), 0 28px 55px -26px rgba(var(--benefit-accent), .34), inset 0 1px 0 #ffffff80;
    }
    #benefits .benefit-card:hover::before, #benefits .benefit-card:hover::after { opacity: 1; }
    #benefits .benefit-card:hover .benefit-art img { transform: translate(var(--benefit-dx), calc(var(--benefit-dy) - 4px)) scale(1.035); }
}
@media (min-width: 768px) and (max-width: 991px) {
    #benefits .benefits-grid > .col:last-child { margin-inline: auto; }
}
@media (max-width: 767px) {
    #benefits.auticly-benefits { padding-block: 4.25rem; }
    #benefits .section-title { margin-bottom: 2.25rem; }
    #benefits .section-title p { padding-inline: 0; }
    #benefits .benefit-card { max-width: 28rem; margin-inline: auto; padding: 1.35rem 1.5rem; }
    #benefits .benefit-art { aspect-ratio: 1.5; }
    #benefits .benefit-finish { margin-top: 1.25rem; }
}
@media (max-width: 479px) {
    #benefits .benefits-pillars { gap: .4rem; flex-wrap: nowrap; }
    #benefits .benefits-pillar { flex: 1; flex-direction: column; gap: .45rem; padding: .75rem .3rem; border-radius: .75rem; font-size: calc(var(--bs-body-font-size) * .6875); }
    #benefits .benefits-pillar-icon { width: 1.15rem; height: 1.15rem; }
    #benefits .benefits-summary { padding-inline: 0; }
}
@media (forced-colors: active) {
    #benefits .benefits-title-accent { background: none; -webkit-text-fill-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
    #benefits .wow { animation: none !important; visibility: visible !important; transform: none !important; }
    #benefits .benefit-card, #benefits .benefit-art img { transform: none !important; transition: none; }
    #benefits .benefit-card::before, #benefits .benefit-card::after { transition: none; }
}