html {
    scroll-behavior: smooth;
}

/* =========================================================
   FEATURES INTRO
========================================================= */

.ws-features-intro {
    position: relative;
    overflow: hidden;
    padding: 128px 0 76px;
    background:
        radial-gradient(circle at 86% 20%,
            rgba(46, 171, 225, 0.12),
            transparent 27%),
        linear-gradient(135deg,
            #fbfeff 0%,
            #f3fafd 56%,
            #edf8fc 100%);
}

.ws-features-intro::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: -245px;
    right: 9%;
    border: 1px solid rgba(46, 171, 225, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px rgba(46, 171, 225, 0.025),
        0 0 0 96px rgba(46, 171, 225, 0.018);
    pointer-events: none;
}

.ws-features-intro__content {
    position: relative;
    z-index: 1;
    max-width: 850px;
}

.ws-features-intro h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: var(--ws-navy);
    font-size: clamp(38px, 4.1vw, 56px);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -0.038em;
}

.ws-features-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--ws-text);
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================================
   FEATURE TABS
========================================================= */

.ws-feature-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 980px;
    margin-top: 42px;
    padding: 10px;
    border: 1px solid rgba(46, 171, 225, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 35px rgba(31, 46, 67, 0.07);
    backdrop-filter: blur(12px);
}

.ws-feature-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 10px;
    color: var(--ws-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.ws-feature-tabs a:hover,
.ws-feature-tabs a.is-active {
    background: var(--ws-primary-soft);
    color: var(--ws-primary-dark);
}

/* =========================================================
   FEATURE DETAIL BASE
========================================================= */

.ws-feature-detail {
    --feature-color: var(--ws-primary-dark);
    --feature-soft: var(--ws-primary-soft);
    --feature-glow: rgba(46, 171, 225, 0.10);

    position: relative;
    overflow: hidden;
    padding: 106px 0 112px;
    scroll-margin-top: 76px;
}

.ws-feature-detail--crm {
    --feature-color: #168fc2;
    --feature-soft: #e8f7fd;
    --feature-glow: rgba(46, 171, 225, 0.10);

    background:
        radial-gradient(circle at 96% 12%,
            rgba(46, 171, 225, 0.07),
            transparent 24%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f9fcfd 100%);
}

.ws-feature-detail--workflow {
    --feature-color: #168f83;
    --feature-soft: #e7f7f4;
    --feature-glow: rgba(22, 143, 131, 0.11);

    background:
        linear-gradient(135deg,
            #f8fbfd 0%,
            #eef8f6 45%,
            #ffffff 100%);
}

.ws-feature-detail--revenue {
    --feature-color: #7656b5;
    --feature-soft: #f1edfa;
    --feature-glow: rgba(118, 86, 181, 0.11);

    background:
        radial-gradient(circle at 94% 14%,
            rgba(118, 86, 181, 0.07),
            transparent 25%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfaff 100%);
}

.ws-feature-detail--compliance {
    --feature-color: #2857a6;
    --feature-soft: #edf3fc;
    --feature-glow: rgba(40, 87, 166, 0.11);

    background:
        linear-gradient(135deg,
            #f7faff 0%,
            #edf3fb 48%,
            #ffffff 100%);
}

.ws-feature-detail--document {
    --feature-color: #c97724;
    --feature-soft: #fff3e6;
    --feature-glow: rgba(201, 119, 36, 0.12);

    background:
        radial-gradient(circle at 95% 14%,
            rgba(201, 119, 36, 0.07),
            transparent 24%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fffaf5 100%);
}

.ws-feature-detail--practice {
    --feature-color: #147d78;
    --feature-soft: #e8f7f5;
    --feature-glow: rgba(20, 125, 120, 0.12);

    background:
        linear-gradient(135deg,
            #f7fbfb 0%,
            #edf8f7 48%,
            #ffffff 100%);
}
.ws-feature-detail--integrations {
    --feature-color: #2873b8;
    --feature-soft: #eaf3fc;
    --feature-glow: rgba(40, 115, 184, 0.12);

    background:
        radial-gradient(circle at 92% 18%,
            rgba(46, 171, 225, 0.10),
            transparent 26%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f1f8fc 52%,
            #f8fbfd 100%);
}
.ws-feature-detail__content {
    max-width: 520px;
}

.ws-feature-detail__content--right {
    margin-left: auto;
}

.ws-feature-detail .ws-section-heading__eyebrow {
    color: var(--feature-color);
}

.ws-feature-detail__content h2 {
    margin: 0 0 18px;
    color: var(--ws-navy);
    font-size: clamp(35px, 3.7vw, 50px);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -0.035em;
}

.ws-feature-detail__lead {
    margin-bottom: 29px;
    color: var(--ws-text);
    font-size: 17px;
    line-height: 1.75;
}

/* =========================================================
   FEATURE LIST
========================================================= */

.ws-feature-detail__list {
    display: grid;
    gap: 20px;
    margin: 0 0 31px;
    padding: 0;
    list-style: none;
}

.ws-feature-detail__list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.ws-feature-detail__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: var(--feature-soft);
    color: var(--feature-color);
}

.ws-feature-detail__check i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    font-size: 11px;
}

.ws-feature-detail__list strong,
.ws-feature-detail__list span {
    display: block;
}

.ws-feature-detail__list strong {
    margin-bottom: 4px;
    color: var(--ws-navy);
    font-size: 15px;
    font-weight: 750;
}

.ws-feature-detail__list div>span {
    color: var(--ws-muted);
    font-size: 13px;
    line-height: 1.65;
}

.ws-feature-detail .ws-text-link {
    color: var(--feature-color);
}

.ws-feature-detail .ws-text-link:hover {
    color: var(--feature-color);
    opacity: 0.78;
}

/* =========================================================
   FEATURE SCREENSHOT
========================================================= */

.ws-feature-detail__visual {
    position: relative;
    padding: 20px 0 20px 48px;
}

.ws-feature-detail__visual--left {
    padding-right: 48px;
    padding-left: 0;
}

.ws-feature-detail__visual::before {
    content: "";
    position: absolute;
    inset: 58px -12px -12px 90px;
    border-radius: 30px;
    background: var(--feature-glow);
}

.ws-feature-detail__visual--left::before {
    inset: 58px 90px -12px -12px;
}

.ws-feature-detail__window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 68px rgba(31, 46, 67, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}
.ws-feature-detail__visual:hover .ws-feature-detail__window {
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 34px 78px rgba(31, 46, 67, 0.20);
}
.ws-feature-detail__window img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
    background: #e8f0f4;
    object-fit: contain;

    transition: transform 0.5s ease;
}

.ws-feature-detail__visual:hover .ws-feature-detail__window img {
    transform: scale(1.006);
}
.ws-feature-detail__window-bar {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    color: var(--ws-muted);
    font-size: 11px;
}

.ws-feature-detail__window-bar span {
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #cad7de;
}

.ws-feature-detail__window-bar strong {
    margin-left: 8px;
    color: var(--ws-navy);
    font-size: 11px;
    font-weight: 700;
}

.ws-feature-detail__window img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 15px;
    background: #e8f0f4;
    object-fit: contain;
}

.ws-feature-anchor {
    scroll-margin-top: 76px;
}

/* =========================================================
   INTEGRATIONS
========================================================= */

.ws-integrations-visual {
    position: relative;
    min-height: 520px;
    padding: 42px;
    border: 1px solid rgba(40, 115, 184, 0.11);
    border-radius: 32px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.96),
            rgba(241, 248, 252, 0.92));
    box-shadow: 0 30px 75px rgba(31, 46, 67, 0.13);
    isolation: isolate;
}

.ws-integrations-visual__glow {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(46, 171, 225, 0.13);
    filter: blur(55px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ws-integrations-hub {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 190px;
    min-height: 128px;
    margin: 0 auto 31px;
    padding: 23px;
    border: 1px solid rgba(46, 171, 225, 0.18);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(31, 46, 67, 0.12);
    text-align: center;
}

.ws-integrations-hub__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    min-height: 42px;
    margin-bottom: 12px;
}

.ws-integrations-hub__logo img {
    display: block;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.ws-integrations-hub>span {
    color: var(--ws-muted);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 650;
}

.ws-integrations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ws-integration-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 13px;

    min-height: 82px;
    padding: 15px 22px;
    border: 1px solid rgba(31, 46, 67, 0.08);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(31, 46, 67, 0.07);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}
.ws-integration-card>div:last-child {
    min-width: 0;
    text-align: left;
}
.ws-integration-card:hover {
    transform: translateY(-4px);
    border-color: rgba(46, 171, 225, 0.25);
    box-shadow: 0 18px 34px rgba(31, 46, 67, 0.11);
}

.ws-integration-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    background: #eaf5fb;
    color: #2873b8;
    font-size: 18px;
}

.ws-integration-card strong,
.ws-integration-card span {
    display: block;
}

.ws-integration-card strong {
    margin-bottom: 3px;
    color: var(--ws-navy);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 750;
}

.ws-integration-card span {
    color: var(--ws-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* =========================================================
   FEATURE TRUST STRIP
========================================================= */

.ws-feature-trust {
    padding: 34px 0;
    border-top: 1px solid rgba(31, 46, 67, 0.07);
    border-bottom: 1px solid rgba(31, 46, 67, 0.07);
    background: #ffffff;
}

.ws-feature-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ws-feature-trust__item {
    position: relative;
    padding: 12px 28px;
    text-align: center;
}

.ws-feature-trust__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15%;
    right: 0;
    width: 1px;
    height: 70%;
    background: rgba(31, 46, 67, 0.10);
}

.ws-feature-trust__item strong,
.ws-feature-trust__item span {
    display: block;
}

.ws-feature-trust__item strong {
    margin-bottom: 7px;
    color: var(--ws-navy);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.ws-feature-trust__item span {
    max-width: 230px;
    margin: 0 auto;
    color: var(--ws-muted);
    font-size: 12px;
    line-height: 1.55;
}
/* =========================================================
   TABLET
========================================================= */
@media (hover: none) {

    .ws-feature-detail__visual:hover .ws-feature-detail__window,
    .ws-feature-detail__visual:hover .ws-feature-detail__window img {
        transform: none;
    }
}
@media (max-width: 991px) {
    .ws-features-intro {
        padding: 112px 0 54px;
    }

    .ws-feature-detail {
        padding: 82px 0 88px;
    }

    .ws-feature-detail__content--right {
        margin-left: 0;
    }

    .ws-feature-detail__visual {
        padding-left: 0;
    }

    .ws-feature-detail__visual::before {
        inset: 54px 12px -12px 55px;
    }

    .ws-feature-detail__visual--left {
        padding-right: 0;
    }

    .ws-feature-detail__visual--left::before {
        inset: 54px 55px -12px 12px;
    }

    .ws-feature-trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ws-feature-trust__item {
        padding: 24px;
    }

    .ws-feature-trust__item:nth-child(2)::after {
        display: none;
    }

    .ws-feature-trust__item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(31, 46, 67, 0.08);
    }

    .ws-integrations-visual {
        min-height: auto;
        margin-top: 8px;
    }
}

/* =========================================================
   MOBILE TABS
========================================================= */

@media (max-width: 767px) {
    .ws-feature-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        padding: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ws-feature-tabs::-webkit-scrollbar {
        display: none;
    }

    .ws-feature-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {
    .ws-features-intro {
        padding: 100px 0 56px;
    }

    .ws-features-intro h1 {
        font-size: 37px;
    }

    .ws-features-intro p {
        font-size: 16px;
    }

    .ws-feature-detail {
        padding: 67px 0 72px;
    }

    .ws-feature-detail__content h2 {
        font-size: 35px;
    }

    .ws-feature-detail__visual {
        padding-top: 8px;
    }

    .ws-feature-detail__visual::before {
        inset: 42px 5px -9px 30px;
    }

    .ws-feature-detail__visual--left::before {
        inset: 42px 30px -9px 5px;
    }

    .ws-feature-detail__window {
        padding: 8px;
        border-radius: 18px;
    }

    .ws-feature-detail__window img {
        min-height: 0;
    }

    .ws-feature-trust {
        padding: 18px 0;
    }

    .ws-feature-trust__grid {
        grid-template-columns: 1fr;
    }

    .ws-feature-trust__item {
        padding: 23px 15px;
    }

    .ws-feature-trust__item:not(:last-child)::after {
        display: none;
    }

    .ws-feature-trust__item:not(:last-child) {
        border-bottom: 1px solid rgba(31, 46, 67, 0.08);
    }

    .ws-feature-trust__item strong {
        font-size: 20px;
    }
    .ws-integrations-visual {
        padding: 25px 18px;
        border-radius: 23px;
    }

    .ws-integrations-hub {
        width: 170px;
        min-height: 115px;
        margin-bottom: 22px;
    }

    .ws-integrations-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .ws-integration-card {
        min-height: 74px;
    }

    .ws-integration-card:hover {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ws-feature-detail__window,
    .ws-feature-detail__window img,
    .ws-feature-tabs a {
        transition: none;
    }

    .ws-feature-detail__visual:hover .ws-feature-detail__window,
    .ws-feature-detail__visual:hover .ws-feature-detail__window img {
        transform: none;
    }
}