/* =========================================================
   Qlynic · Solutions (sx) — FINAL + integrations slider fix
   - Full-width integrations lane with edge fades (no hard cut)
   - Keeps user-provided sx-intItem sizing exactly
   ========================================================= */

:root {
    --sx-max: 1120px;
    --sx-pad: 24px;
    --sx-ink: #0b0b0f;
    --sx-muted: rgba(17, 24, 39, .64);
    --sx-muted2: rgba(17, 24, 39, .52);
    --sx-line: rgba(0, 0, 0, .08);
    --sx-soft: #fbfbfd;
    --sx-surface: rgba(255, 255, 255, .92);
    --sx-accent: #0a84ff;
    --sx-violet: #7c3aed;
    --sx-green: #22c55e;
    --sx-shadow: 0 36px 120px rgba(0, 0, 0, .12);
    --sx-shadow-soft: 0 18px 46px rgba(0, 0, 0, .08);
    --sx-radius-xl: 26px;
    --sx-radius-lg: 22px;
    --sx-radius-md: 16px;
}

.sx {
    background: #fff;
    color: var(--sx-ink);
}

.sx-wrap {
    max-width: var(--sx-max);
    margin: 0 auto;
    padding: 0 var(--sx-pad);
}

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

/* typography */
.sx-h1 {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.045em;
    font-size: clamp(34px, 4.9vw, 64px);
    line-height: 1.03;
}

.sx-h2 {
    margin: 0;
    font-weight: 880;
    letter-spacing: -0.02em;
    font-size: clamp(22px, 2.8vw, 36px);
    line-height: 1.15;
}

.sx-h3 {
    margin: 10px 0 0;
    font-weight: 880;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.sx-h4 {
    margin: 10px 0 0;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(17, 24, 39, .72);
}

.sx-lead {
    margin: 14px auto 0;
    color: var(--sx-muted);
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.65;
    max-width: 70ch;
}

.sx-sub {
    margin: 10px 0 0;
    color: var(--sx-muted);
    font-size: 14.75px;
    line-height: 1.6;
    max-width: 78ch;
}

.sx-p {
    margin: 8px 0 0;
    color: rgba(17, 24, 39, .72);
    font-size: 14px;
    line-height: 1.6;
}

/* chips */
.sx-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.sx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--sx-line);
    background: rgba(255, 255, 255, .92);
    font-size: 12px;
    font-weight: 900;
    color: rgba(17, 24, 39, .86);
}

.sx-chip--soft {
    background: rgba(10, 132, 255, .06);
    border-color: rgba(10, 132, 255, .14);
    color: rgba(10, 60, 140, .92);
}

/* buttons */
.sx-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
    font-size: 14px;
    border: 1px solid transparent;
    background: #fff;
    color: rgba(17, 24, 39, .92);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    will-change: transform;
}

    .sx-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(10, 132, 255, .22), 0 18px 44px rgba(0, 0, 0, .08);
    }

.sx-btn--primary {
    background: linear-gradient(180deg, rgba(10, 132, 255, 1), rgba(10, 120, 255, 1));
    color: #fff;
    box-shadow: 0 18px 54px rgba(10, 132, 255, .24);
}

    .sx-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 26px 78px rgba(10, 132, 255, .28);
    }

.sx-btn--ghost {
    border-color: rgba(0, 0, 0, .14);
    background: rgba(255, 255, 255, .86);
}

    .sx-btn--ghost:hover {
        transform: translateY(-1px);
        border-color: rgba(0, 0, 0, .18);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .08);
    }

/* sections */
.sx-sec {
    padding: clamp(34px, 5vw, 68px) 0;
}

.sx-sec--soft {
    background: linear-gradient(180deg, var(--sx-soft), #fff);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.sx-head {
    max-width: 900px;
}

.sx-kicker {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 900;
    color: rgba(17, 24, 39, .86);
}

/* intro */
.sx-intro {
    position: relative;
    padding: clamp(54px, 7vw, 92px) 0 18px;
    overflow: hidden;
}

.sx-introGlow {
    position: absolute;
    inset: -160px -180px -180px -180px;
    background: radial-gradient(closest-side at 22% 22%, rgba(10, 132, 255, .12), transparent 62%), radial-gradient(closest-side at 78% 18%, rgba(124, 58, 237, .10), transparent 62%), radial-gradient(closest-side at 50% 95%, rgba(0, 0, 0, .08), transparent 72%);
    filter: blur(26px);
    opacity: .92;
    pointer-events: none;
}

.sx-introInner {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.sx-introCtas {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sx-quick {
    margin: 16px auto 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 980px;
}

.sx-quickItem {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--sx-line);
    background: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 850;
    color: rgba(17, 24, 39, .72);
}

/* matrix */
.sx-matrix {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 16px;
    align-items: start;
}

.sx-choices {
    display: grid;
    gap: 12px;
}

.sx-choice {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .90);
    border-radius: var(--sx-radius-xl);
    padding: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--sx-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

    .sx-choice:hover {
        transform: translateY(-1px);
        border-color: rgba(10, 132, 255, .18);
        box-shadow: 0 26px 70px rgba(0, 0, 0, .10);
    }

    .sx-choice.is-on {
        border-color: rgba(10, 132, 255, .24);
        background: rgba(10, 132, 255, .06);
    }

.sx-choiceTop {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sx-ico {
    width: 44px;
    height: 44px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(10, 132, 255, .10);
    border: 1px solid rgba(10, 132, 255, .14);
    color: rgba(10, 60, 140, .92);
    flex: 0 0 auto;
}

.sx-choiceTitle {
    display: block;
    font-weight: 950;
    color: rgba(17, 24, 39, .92);
}

.sx-choiceDesc {
    display: block;
    margin-top: 3px;
    font-weight: 750;
    font-size: 12.75px;
    color: rgba(17, 24, 39, .58);
}

.sx-choiceFoot {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sx-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 900;
    color: rgba(17, 24, 39, .74);
}

    .sx-pill.soft {
        border-color: rgba(10, 132, 255, .16);
        background: rgba(10, 132, 255, .06);
        color: rgba(10, 60, 140, .92);
    }

/* stack */
.sx-stack {
    border-radius: calc(var(--sx-radius-xl) + 2px);
    border: 1px solid rgba(0, 0, 0, .08);
    background: radial-gradient(closest-side at 18% 28%, rgba(10, 132, 255, .10), transparent 55%), radial-gradient(closest-side at 82% 18%, rgba(124, 58, 237, .08), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 251, 253, .92));
    box-shadow: var(--sx-shadow);
    padding: 16px;
}

.sx-stackKicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 950;
    color: rgba(17, 24, 39, .92);
}

.sx-stackGrid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sx-cap {
    border-radius: var(--sx-radius-xl);
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--sx-shadow-soft);
    padding: 12px;
}

.sx-cap--wide {
    grid-column: 1 / -1;
}

.sx-capHead {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sx-capIco {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(10, 132, 255, .10);
    border: 1px solid rgba(10, 132, 255, .14);
    color: rgba(10, 60, 140, .92);
    flex: 0 0 auto;
}

    .sx-capIco.alt {
        background: rgba(34, 197, 94, .10);
        border-color: rgba(34, 197, 94, .14);
        color: rgba(15, 120, 60, .98);
    }

    .sx-capIco.violet {
        background: rgba(124, 58, 237, .10);
        border-color: rgba(124, 58, 237, .14);
        color: rgba(92, 40, 190, .96);
    }

.sx-capTitle {
    font-weight: 950;
    color: rgba(17, 24, 39, .92);
}

.sx-capSub {
    margin-top: 2px;
    font-weight: 750;
    font-size: 12.5px;
    color: rgba(17, 24, 39, .58);
}

.sx-capList {
    margin: 10px 0 0;
    padding-left: 16px;
    color: rgba(17, 24, 39, .74);
    font-weight: 750;
    line-height: 1.55;
    font-size: 13.5px;
}

.sx-capInline {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sx-chip2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .92);
    font-size: 12.5px;
    font-weight: 900;
    color: rgba(17, 24, 39, .72);
}

    .sx-chip2 i {
        color: rgba(34, 197, 94, .95);
    }

.sx-stackCtas {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* proof */
.sx-proof {
    border-radius: calc(var(--sx-radius-xl) + 2px);
    border: 1px solid rgba(0, 0, 0, .08);
    background: radial-gradient(closest-side at 18% 30%, rgba(10, 132, 255, .10), transparent 55%), radial-gradient(closest-side at 82% 18%, rgba(124, 58, 237, .08), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 251, 253, .92));
    box-shadow: var(--sx-shadow);
    padding: 16px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 14px;
    align-items: center;
}

.sx-proofFacts {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sx-proofFact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .88);
    font-weight: 900;
    font-size: 12.5px;
    color: rgba(17, 24, 39, .72);
}

    .sx-proofFact i {
        color: rgba(34, 197, 94, .95);
    }

.sx-proofMedia {
    border-radius: var(--sx-radius-xl);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 26px 74px rgba(0, 0, 0, .12);
}

.sx-proofImg {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.sx-proofCap {
    padding: 10px 12px;
    font-size: 12.5px;
    color: rgba(17, 24, 39, .60);
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .92);
}

/* pillars */
.sx-pillars {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sx-pillar {
    position: relative;
    border-radius: var(--sx-radius-xl);
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--sx-shadow-soft);
    padding: 14px;
    overflow: hidden;
}

.sx-pGlow {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    background: radial-gradient(closest-side at 25% 20%, rgba(10, 132, 255, .16), transparent 60%), radial-gradient(closest-side at 85% 25%, rgba(124, 58, 237, .10), transparent 62%);
    filter: blur(18px);
    opacity: .50;
}

.sx-pillar > * {
    position: relative;
    z-index: 1;
}

.sx-pIco {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(10, 132, 255, .10);
    border: 1px solid rgba(10, 132, 255, .14);
    color: rgba(10, 60, 140, .92);
}

.sx-list {
    margin: 10px 0 0;
    padding-left: 16px;
    color: rgba(17, 24, 39, .70);
    font-weight: 750;
    line-height: 1.55;
    font-size: 13px;
}

/* ===== Integrations (full width + fades) ===== */
.sx-intHead {
    padding-bottom: 10px;
}

.sx-intFull {
    position: relative;
    margin-top: 14px;
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
}

    .sx-intFull::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(closest-side at 18% 30%, rgba(10,132,255,.10), transparent 60%), radial-gradient(closest-side at 82% 18%, rgba(124,58,237,.08), transparent 62%);
        filter: blur(18px);
        opacity: .55;
    }

.sx-intViewport {
    position: relative;
    margin: 0 auto;
    max-width: none;
    overflow: hidden;
    padding: 20px 0;
}

.sx-intRow {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    padding: 6px 28px;
}

.sx-intFade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(12vw, 220px);
    pointer-events: none;
    z-index: 3;
}

.sx-intFade--l {
    left: 0;
    background: linear-gradient(90deg, var(--sx-soft) 0%, rgba(251,251,253,0) 100%);
}

.sx-intFade--r {
    right: 0;
    background: linear-gradient(270deg, var(--sx-soft) 0%, rgba(251,251,253,0) 100%);
}

/* keep the user's exact sizing/settings */
.sx-intItem {
    height: 100px;
    min-width: 170px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    display: grid;
    place-items: center;
    opacity: .96;
    filter: grayscale(100%);
    transition: opacity .25s ease, transform .25s ease, filter .25s ease, border-color .25s ease;
}

    .sx-intItem:hover {
        opacity: 1;
        transform: translateY(-1px);
        filter: grayscale(0%);
        border-color: rgba(10, 132, 255, .18);
    }

    .sx-intItem img {
        height: 80px;
        width: auto;
        max-width: 110px;
        display: block;
        opacity: .92;
    }

.sx-intToggle {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
    color: rgba(17, 24, 39, .92);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 4;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .sx-intToggle:hover {
        transform: translateY(calc(-50% - 1px));
        border-color: rgba(10, 132, 255, .22);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    }

/* stats */
.sx-stats {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sx-stat {
    position: relative;
    border-radius: var(--sx-radius-xl);
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--sx-shadow-soft);
    padding: 16px;
    text-align: center;
    overflow: hidden;
}

.sx-statGlow {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    background: radial-gradient(closest-side at 25% 25%, rgba(10, 132, 255, .14), transparent 60%), radial-gradient(closest-side at 75% 30%, rgba(124, 58, 237, .10), transparent 62%);
    filter: blur(18px);
    opacity: .55;
}

.sx-stat > * {
    position: relative;
    z-index: 1;
}

.sx-statValue {
    margin: 0;
    font-weight: 950;
    letter-spacing: -0.03em;
    font-size: 40px;
    color: rgba(17, 24, 39, .94);
}

.sx-statLabel {
    margin: 8px 0 0;
    color: rgba(17, 24, 39, .58);
    font-weight: 900;
}

/* faq */
.sx-faq {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.sx-faqItem {
    border-radius: var(--sx-radius-xl);
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--sx-shadow-soft);
    overflow: hidden;
}

.sx-faqQ {
    width: 100%;
    text-align: left;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 14px 14px;
    font-weight: 900;
    color: rgba(17, 24, 39, .92);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .sx-faqQ::after {
        content: "▾";
        color: rgba(17, 24, 39, .55);
        transform: translateY(-1px);
    }

    .sx-faqQ[aria-expanded="true"]::after {
        content: "▴";
    }

.sx-faqA {
    padding: 0 14px 14px;
    color: rgba(17, 24, 39, .70);
    line-height: 1.6;
    font-weight: 700;
}

/* CTA */
.sx-cta {
    border-radius: calc(var(--sx-radius-xl) + 2px);
    border: 1px solid rgba(0, 0, 0, .08);
    background: radial-gradient(closest-side at 18% 30%, rgba(10, 132, 255, .10), transparent 55%), radial-gradient(closest-side at 82% 18%, rgba(124, 58, 237, .08), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 251, 253, .92));
    box-shadow: var(--sx-shadow);
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sx-ctaActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* reveal */
.sx-reveal {
    opacity: .01;
    transform: translateY(14px);
    filter: blur(2px);
    transition: opacity .8s ease, transform .8s ease, filter .8s ease;
    will-change: opacity, transform, filter;
}

    .sx-reveal.is-in {
        opacity: 1;
        transform: translateY(0);
        filter: none;
    }

/* responsive */
@media (max-width: 980px) {
    :root {
        --sx-pad: 16px;
    }

    .sx-matrix {
        grid-template-columns: 1fr;
    }

    .sx-stackGrid {
        grid-template-columns: 1fr;
    }

    .sx-pillars {
        grid-template-columns: 1fr;
    }

    .sx-proof {
        grid-template-columns: 1fr;
    }

    .sx-stats {
        grid-template-columns: 1fr;
    }

    .sx-intToggle {
        display: none;
    }

    .sx-intRow {
        padding: 6px 16px;
    }

    .sx-intFade {
        width: min(18vw, 180px);
    }
}

@media (max-width: 520px) {
    .sx-btn {
        width: 100%;
        justify-content: center;
    }

    .sx-quickItem {
        width: 100%;
        justify-content: center;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sx-reveal {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .sx-btn, .sx-choice, .sx-intItem {
        transition: none !important;
    }
}