.mobile-app-hero-section {
    margin-top      : 92px;
    min-height      : 780px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: #00c9ff;
    text-align      : center;
    padding         : 80px 0
}

.mobile-app-hero-section h1 {
    font-size  : 4.6rem;
    line-height: 1.1;
    font-weight: 800;
    color      : #fff;
    margin     : 0 auto 28px;
    max-width  : 900px
}

.mobile-app-hero-subtitle {
    font-size  : 1.15rem;
    font-weight: 600;
    line-height: 1.6;
    color      : #fff;
    max-width  : 640px;
    margin     : 0 auto 40px
}

.mobile-app-hero-actions {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 36px;
    flex-wrap      : wrap
}

.mobile-app-hero-btn,
.mobile-app-hero-link {
    display        : inline-flex;
    align-items    : center;
    gap            : 10px;
    font-size      : 13px;
    font-weight    : 800;
    text-transform : uppercase;
    letter-spacing : .02em;
    text-decoration: none
}

.mobile-app-hero-link {
    color: #fff
}

.mobile-app-hero-link i {
    color    : #fff;
    font-size: 12px
}

.mobile-app-hero-btn {
    background   : #fff;
    color        : #3550ee;
    padding      : 21px 34px;
    border-radius: 999px
}

.mobile-app-hero-btn i {
    color    : #3550ee;
    font-size: 12px
}

.mobile-app-hero-btn i,
.mobile-app-hero-link i {
    display   : inline-block;
    transition: margin-right .3s, margin-left .3s, opacity .3s, width .3s
}

.mobile-app-hero-btn i.left,
.mobile-app-hero-link i.left {
    width       : 0;
    margin-right: 0;
    opacity     : 0
}

.mobile-app-hero-btn i.right,
.mobile-app-hero-link i.right {
    width      : 12px;
    margin-left: 10px;
    opacity    : 1
}

.mobile-app-hero-btn:hover i.left,
.mobile-app-hero-link:hover i.left {
    width       : 12px;
    margin-right: 10px;
    opacity     : 1
}

.mobile-app-hero-btn:hover i.right,
.mobile-app-hero-link:hover i.right {
    width      : 0;
    margin-left: 0;
    opacity    : 0
}

@media (max-width:991px) {
    .mobile-app-hero-section {
        margin-top: 84px;
        min-height: 568px;
        padding   : 64px 0
    }

    .mobile-app-hero-section h1 {
        font-size: 3rem
    }
}

@media (max-width:575px) {
    .mobile-app-hero-section {
        margin-top: 78px;
        min-height: 480px;
        padding   : 54px 0
    }

    .mobile-app-hero-section h1 {
        font-size: 2.25rem
    }

    .mobile-app-hero-subtitle {
        font-size: 1rem
    }

    .mobile-app-hero-actions {
        gap: 20px
    }
}

.mobile-features-section {
    background: #fff
}

.mobile-features-visual {
    position               : relative;
    min-height             : 618px;
    background             : linear-gradient(185deg, #00c9ff 0, #00c9ff 15%, #3d5ef6 40%, #3d5ef6 100%);
    border-top-right-radius: 180px;
    overflow               : hidden;
    display                : flex;
    align-items            : center;
    justify-content        : center
}

.mobile-features-visual::before {
    content          : "";
    position         : absolute;
    inset            : 0;
    background-image : url(../images/Bg-image.webp);
    background-size  : cover;
    background-repeat: no-repeat
}

.mobile-features-visual::after {
    content            : "";
    position           : absolute;
    inset              : 0;
    background-image   : url(../images/Hcm-Mobile.webp);
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center
}

.mobile-features-phone {
    position: relative;
    z-index : 2;
    padding : 6px
}

.mobile-phone-screen {
    width          : 100%;
    height         : 100%;
    border-radius  : 30px;
    background     : #fff;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    position       : relative;
    overflow       : hidden
}

.mobile-phone-screen img {
    width        : 96px;
    height       : auto;
    display      : block;
    margin-bottom: 24px
}

.mobile-phone-progress {
    display    : flex;
    align-items: center;
    gap        : 6px
}

.mobile-phone-progress span {
    display      : block;
    width        : 54px;
    height       : 5px;
    border-radius: 999px;
    background   : #d5d7de
}

.mobile-phone-progress .mobile-phone-progress-active {
    width     : 32px;
    background: #14924a
}

.mobile-phone-notch {
    position     : absolute;
    top          : 14px;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 62px;
    height       : 20px;
    border-radius: 999px;
    background   : #232323;
    z-index      : 3
}

.mobile-feature-float {
    position       : absolute;
    right          : 210px;
    width          : 72px;
    height         : 72px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 3
}

.mobile-feature-float svg {
    width          : 36px;
    height         : 36px;
    stroke         : #ffffff;
    stroke-width   : 2.6;
    fill           : none;
    stroke-linecap : round;
    stroke-linejoin: round
}

.float-red {
    top       : 142px;
    background: #ff2727
}

.float-pink {
    top       : 226px;
    background: #e11491
}

.float-sky {
    top       : 310px;
    background: #77cfff
}

.float-green {
    top       : 394px;
    background: #0ea54a
}

.mobile-features-copy {
    max-width: 560px;
    padding  : 72px 70px 72px 74px
}

.mobile-features-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 8px 16px;
    border-radius  : 10px;
    background     : linear-gradient(to right, #dff6ff 30%, transparent 30%);
    color          : #3f465a;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .3em;
    margin-bottom  : 28px
}

.mobile-features-copy h2 {
    font-weight   : 700;
    color         : #39435c;
    margin-bottom : 30px;
    max-width     : 520px;
    font-size     : 2.5rem;
    line-height   : 44px;
    letter-spacing: -1px
}

.mobile-features-copy p {
    font-size    : 16px;
    line-height  : 1.65;
    color        : #5f687a;
    margin-bottom: 36px
}

.mobile-features-list {
    list-style: none;
    padding   : 0;
    margin    : 0 0 42px
}

.mobile-features-list li {
    position     : relative;
    padding-left : 56px;
    margin-bottom: 22px;
    color        : #35415c;
    font-size    : 16px;
    font-weight  : 600;
    line-height  : 24px
}

.mobile-features-list li:hover {
    color: var(--primary-blue)
}

.mobile-features-list li::before {
    content        : "✓";
    position       : absolute;
    left           : 0;
    top            : 50%;
    transform      : translateY(-50%);
    width          : 30px;
    height         : 30px;
    border-radius  : 50%;
    border         : 1px solid #d5dae8;
    color          : #315eff;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 16px;
    font-weight    : 700
}

.mobile-features-btn {
    min-width    : 262px;
    padding      : 18px 32px;
    border-radius: 999px;
    background   : linear-gradient(90deg, #3d64f6 0, #3453ed 100%);
    color        : #fff;
    border       : 0;
    font-size    : 14px;
    font-weight  : 800
}

.mobile-features-btn:hover {
    background: linear-gradient(90deg, #365ae7 0, #2d49e2 100%);
    color     : #fff
}

.stats-section {
    position           : relative;
    padding            : 110px 0 90px;
    background-color   : #f8fbff;
    background-image   : url("../images/Static background.webp");
    background-repeat  : no-repeat;
    background-position: center bottom;
    background-size    : cover;
    overflow           : hidden
}

.stats-row {
    row-gap: 34px
}

.stats-item {
    position: relative;
    z-index : 2
}

.stats-value {
    font-size     : 4.2rem;
    line-height   : 1;
    font-weight   : 800;
    letter-spacing: -.06em;
    color         : #325cff;
    margin-bottom : 6px
}

.stats-suffix {
    color         : #17b8ea;
    font-size     : .58em;
    vertical-align: top;
    margin-left   : 1px
}

.stats-label {
    margin     : 0;
    color      : #7a859c;
    font-size  : 14px;
    font-weight: 700
}

.stats-247 {
    color: #325cff
}

.stats-divider {
    color : #17b8ea;
    margin: 0 2px
}

.stats-decoration {
    position     : absolute;
    border-radius: 50%;
    z-index      : 1
}

.stats-yellow {
    width     : 25px;
    height    : 25px;
    background: #ffca2c;
    top       : 34px;
    left      : 136px
}

.stats-blue {
    width     : 17px;
    height    : 17px;
    background: #4261ff;
    top       : 170px;
    left      : 78px
}

.stats-red {
    width     : 32px;
    height    : 32px;
    background: #ff4818;
    left      : 462px;
    bottom    : 36px
}

.stats-cyan {
    width     : 16px;
    height    : 16px;
    background: #18b8ea;
    top       : 26px;
    right     : 164px
}

.stats-orange {
    width     : 32px;
    height    : 32px;
    background: #ffa108;
    right     : 48px;
    bottom    : 92px
}

.advantages-section {
    padding   : 92px 0 80px;
    background: #f7fbff
}

.advantages-top-row {
    margin-bottom: 64px
}

.advantages-copy {
    max-width: 420px
}

.advantages-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 8px 16px;
    border-radius  : 10px;
    background     : linear-gradient(to right, #ccf4ff 30%, transparent 30%);
    color          : #3f465a;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .24em;
    margin-bottom  : 26px
}

.advantages-title {
    font-size     : 3.15rem;
    line-height   : 1.08;
    letter-spacing: -.05em;
    font-weight   : 800;
    color         : #39435c;
    margin-bottom : 28px
}

.advantages-text {
    font-size  : 16px;
    line-height: 1.65;
    font-weight: 600;
    color      : #8a96ab;
    margin     : 0;
    max-width  : 405px
}

.advantages-image-wrap {
    border-radius: 34px;
    overflow     : hidden;
    box-shadow   : 0 18px 42px rgba(49, 68, 122, .08)
}

.advantages-image-wrap img {
    width     : 100%;
    height    : 100%;
    min-height: 320px;
    object-fit: cover;
    display   : block
}

.advantages-grid {
    row-gap: 48px
}

.advantages-item {
    text-align: left
}

.advantages-icon {
    width          : 64px;
    height         : 64px;
    border-radius  : 20px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 20px
}

.advantages-icon svg {
    width          : 34px;
    height         : 34px;
    stroke         : #ffffff;
    stroke-width   : 2.5;
    fill           : none;
    stroke-linecap : round;
    stroke-linejoin: round
}

.advantages-icon-orange {
    background: #ff4a12
}

.advantages-icon-cyan {
    background: #1dbbf0
}

.advantages-icon-yellow {
    background: #ffb011
}

.advantages-icon-purple {
    background: #a758ff
}

.advantages-icon-green {
    background: #99c800
}

.advantages-item h3 {
    font-size  : 19px;
    line-height: 1.35;
    font-weight: 800;
    color      : #38425c;
    margin     : 0;
    max-width  : 300px
}

.advantages-item:hover h3 {
    color: var(--primary-blue)
}

.advantages-item:hover .advantages-icon {
    background: #1dbbf0
}

.advantages-item:hover .advantages-icon.advantages-icon-cyan {
    background: var(--primary-blue)
}

@media (max-width:575px) {
    .advantages-item {
        text-align: center
    }

    .advantages-icon {
        margin-left : auto;
        margin-right: auto
    }

    .advantages-item h3 {
        max-width: 100%
    }
}

.mobile-convenience-section {
    position  : relative;
    padding   : 86px 0 90px;
    background: #fff;
    overflow  : hidden
}

.mobile-convenience-bg-shape {
    position     : absolute;
    left         : -85px;
    bottom       : -140px;
    width        : 705px;
    height       : 430px;
    background   : #1db9e9;
    border-radius: 10% 73%
}

.mobile-convenience-copy {
    position : relative;
    z-index  : 2;
    max-width: 470px
}

.mobile-convenience-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .28em;
    color          : #3f465a;
    margin-bottom  : 26px
}

.mobile-convenience-copy h2 {
    font-weight   : 800;
    color         : #39435c;
    margin-bottom : 30px;
    max-width     : 420px;
    font-size     : 2.5rem;
    line-height   : 44px;
    letter-spacing: -1px
}

.mobile-convenience-copy p {
    font-size    : 17px;
    line-height  : 1.6;
    color        : #40465b;
    max-width    : 470px;
    margin-bottom: 26px
}

.mobile-convenience-list {
    list-style: none;
    padding   : 0;
    margin    : 0 0 38px
}

.mobile-convenience-list li {
    position     : relative;
    padding-left : 50px;
    margin-bottom: 20px;
    color        : #39445d;
    font-size    : 16px;
    font-weight  : 600;
    line-height  : 24px
}

.mobile-convenience-list li::before {
    content        : "✓";
    position       : absolute;
    left           : 0;
    top            : 50%;
    transform      : translateY(-50%);
    width          : 28px;
    height         : 28px;
    border-radius  : 50%;
    border         : 1px solid #d3d9e8;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #315eff;
    font-size      : 15px;
    font-weight    : 700
}

.mobile-convenience-btn {
    min-width    : 158px;
    padding      : 16px 28px;
    border-radius: 999px;
    background   : linear-gradient(90deg, #3d64f6 0, #3453ed 100%);
    box-shadow   : 1px 2px 10px 4px #95a6e3;
    color        : #fff;
    border       : 0;
    font-size    : 14px;
    font-weight  : 800
}

.mobile-convenience-btn:hover {
    background: linear-gradient(90deg, #365ae7 0, #2d49e2 100%);
    color     : #fff
}

.mobile-convenience-visual {
    position  : relative;
    min-height: 640px
}

.mobile-convenience-image {
    position     : relative;
    z-index      : 2;
    margin-left  : auto;
    border-radius: 36px;
    overflow     : hidden
}

.mobile-convenience-image img {
    object-fit: cover;
    display   : block
}

.mobile-convenience-shape {
    position: absolute;
    z-index : 1
}

.mobile-shape-yellow {
    width        : 110px;
    height       : 110px;
    top          : 150px;
    background   : #ffd433;
    border-radius: 50%;
    transform    : rotate(40deg)
}

.mobile-shape-purple {
    width        : 66px;
    height       : 66px;
    top          : 28px;
    right        : 30px;
    background   : #9a4fff;
    border-radius: 50%;
    transform    : rotate(40deg)
}

.mobile-shape-pink {
    width        : 180px;
    height       : 180px;
    left         : 0;
    bottom       : 18px;
    background   : #f4a7bb;
    border-radius: 50%
}

.mobile-shape-soft {
    width        : 62px;
    height       : 62px;
    right        : 10px;
    bottom       : 0;
    background   : rgba(198, 203, 214, .75);
    border-radius: 50%;
    transform    : rotate(40deg)
}

.mobile-advantage-section {
    padding   : 86px 0 74px;
    background: linear-gradient(180deg, #3d63f6 0, #3553ed 100%)
}

.mobile-advantage-header {
    max-width: 760px;
    margin   : 0 auto 54px
}

.mobile-advantage-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 8px 16px;
    border-radius  : 10px;
    background     : linear-gradient(to right, rgba(255, 255, 255, .16) 30%, transparent 30%);
    color          : #fff;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .28em;
    margin-bottom  : 22px
}

.mobile-advantage-header h2 {
    color         : #fff;
    max-width     : 700px;
    margin        : 0 auto;
    font-size     : 40px;
    font-weight   : 700;
    line-height   : 44px;
    letter-spacing: -1px
}

.mobile-advantage-card {
    position     : relative;
    min-height   : 240px;
    background   : #fff;
    border-radius: 18px;
    padding      : 40px 46px 28px;
    overflow     : hidden
}

.mobilde-advantage-header {
    display    : flex;
    align-items: center;
    gap        : 15px
}

.mobile-advantage-badge {
    width          : 46px;
    height         : 46px;
    border-radius  : 50%;
    background     : #19b9eb;
    color          : #fff;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 16px;
    font-weight    : 800;
    margin-bottom  : 22px
}

.mobile-advantage-card h3 {
    font-size    : 18px;
    line-height  : 1.2;
    font-weight  : 800;
    color        : #444c5e;
    margin-bottom: 18px;
    max-width    : 220px
}

.mobile-advantage-card p {
    font-size  : 15px;
    line-height: 1.7;
    color      : #556072;
    margin     : 0;
    max-width  : 250px;
    position   : relative;
    z-index    : 2
}

.mobile-advantage-ghost {
    position      : absolute;
    right         : 22px;
    bottom        : -14px;
    font-size     : 7.2rem;
    line-height   : 1;
    font-weight   : 800;
    color         : rgba(57, 66, 92, .07);
    letter-spacing: -.08em
}

.mobile-advantage-cta-wrap {
    margin-top: 48px
}

.mobile-advantage-btn {
    min-width    : 154px;
    padding      : 14px 22px;
    border-radius: 6px;
    background   : #18b9ec;
    color        : #fff;
    border       : 0;
    font-size    : 12px;
    font-weight  : 800
}

.mobile-advantage-btn:hover {
    background: #12a9d8;
    color     : #fff
}

.mobile-process-section {
    padding   : 88px 0 82px;
    background: #fff
}

.mobile-process-header {
    max-width: 760px;
    margin   : 0 auto 66px
}

.mobile-process-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 8px 18px;
    border-radius  : 10px;
    background     : linear-gradient(to right, #dff6ff 30%, transparent 30%);
    color          : #3a465f;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .28em;
    margin-bottom  : 24px
}

.mobile-process-header h2 {
    font-weight   : 800;
    color         : #36425d;
    margin-bottom : 22px;
    font-size     : 2.5rem;
    line-height   : 44px;
    letter-spacing: -1px
}

.mobile-process-header p {
    font-size  : 16px;
    line-height: 1.7;
    font-weight: 600;
    color      : #8a97ad;
    margin     : 0
}

.mobile-process-card {
    max-width: 280px
}

.mobile-process-icon {
    width          : 92px;
    height         : 92px;
    border-radius  : 18px;
    background     : linear-gradient(180deg, #3d64f6 0, #3654ee 100%);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 30px
}

.mobile-process-icon:hover {
    transform: scale(.9)
}

.mobile-process-icon svg {
    width          : 48px;
    height         : 48px;
    stroke         : #ffffff;
    stroke-width   : 2.8;
    fill           : none;
    stroke-linecap : round;
    stroke-linejoin: round
}

.mobile-process-card h3 {
    font-size    : 18px;
    line-height  : 1.45;
    font-weight  : 800;
    color        : #38425c;
    margin-bottom: 12px
}

.mobile-process-card h3:hover {
    color: #315eff
}

.mobile-process-card p {
    font-size  : 15px;
    line-height: 2;
    color      : #3f4658;
    margin     : 0;
    max-width  : 240px
}

.mobile-process-cta-wrap {
    margin-top: 68px
}

.mobile-process-btn {
    min-width    : 226px;
    padding      : 18px 34px;
    border-radius: 999px;
    background   : linear-gradient(90deg, #3c63f6 0, #3553ee 100%);
    color        : #fff;
    border       : 0;
    font-size    : 14px;
    font-weight  : 700
}

.mobile-process-btn:hover {
    background: linear-gradient(90deg, #355ae6 0, #304ae0 100%);
    color     : #fff
}

.price-more-section {
    position   : relative;
    display    : flex;
    min-height : 710px;
    overflow   : hidden;
    background : #fff;
    font-family: Inter, sans-serif
}

.price-more-image {
    position  : relative;
    width     : 52%;
    min-height: 710px;
    overflow  : hidden
}

.price-more-image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.price-more-blue-shape {
    position     : absolute;
    left         : -195px;
    bottom       : -290px;
    width        : 885px;
    height       : 620px;
    background   : #11bfe8;
    border-radius: 50% 100% 0 0
}

.price-more-content {
    position: relative;
    width   : 48%;
    padding : 80px 70px;
    color   : #253044
}

.price-more-logo {
    display       : block;
    margin-bottom : 35px;
    font-size     : 13px;
    font-weight   : 800;
    letter-spacing: 7px
}

.price-more-content h2 {
    max-width    : 560px;
    margin-bottom: 35px;
    font-size    : 42px;
    line-height  : 1.08;
    font-weight  : 800;
    color        : #283044
}

.price-more-content p {
    max-width    : 580px;
    margin-bottom: 35px;
    font-size    : 18px;
    line-height  : 1.55;
    color        : #2f3748
}

.price-more-list {
    position  : relative;
    max-width : 560px;
    padding   : 25px 0 30px;
    margin    : 0 0 25px;
    list-style: none
}

.price-more-list::before {
    content      : "";
    position     : absolute;
    left         : -35px;
    top          : 0;
    width        : 205px;
    height       : 205px;
    background   : rgba(244, 118, 148, .55);
    border-radius: 50%;
    z-index      : 0
}

.price-more-list li {
    position     : relative;
    z-index      : 1;
    margin-bottom: 24px;
    padding-left : 55px;
    font-size    : 16px;
    font-weight  : 700;
    color        : #283044
}

.price-more-list li::before {
    content        : "✓";
    position       : absolute;
    left           : 0;
    top            : -6px;
    width          : 30px;
    height         : 30px;
    border         : 2px solid #e1e5ee;
    border-radius  : 50%;
    background     : #fff;
    color          : #315cff;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-weight    : 700
}

.price-more-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-width      : 195px;
    height         : 50px;
    border-radius  : 28px;
    background     : #315cff;
    color          : #fff;
    text-decoration: none;
    text-transform : uppercase;
    font-size      : 13px;
    font-weight    : 800;
    box-shadow     : 0 8px 18px rgba(49, 92, 255, .45)
}

.price-more-btn:hover {
    background: #1f48e6;
    color     : #fff
}

.shape-yellow {
    position     : absolute;
    top          : 65px;
    left         : -65px;
    width        : 120px;
    height       : 120px;
    background   : #ffd523;
    border-radius: 50%;
    transform    : rotate(45deg)
}

.shape-purple {
    position     : absolute;
    top          : 42px;
    right        : 70px;
    width        : 88px;
    height       : 88px;
    background   : #9848f2;
    border-radius: 50%;
    transform    : rotate(45deg)
}

.testimonials-section {
    background: linear-gradient(180deg, #3e60f6 0, #3656ef 100%)
}

.testimonials-image-panel {
    min-height: 645px;
    height    : 100%
}

.testimonials-image-panel img {
    width                  : 100%;
    height                 : 100%;
    object-fit             : cover;
    display                : block;
    border-top-right-radius: 120px
}

.testimonials-content-panel {
    position   : relative;
    min-height : 645px;
    height     : 100%;
    background : linear-gradient(180deg, #3e60f6 0, #3656ef 100%);
    overflow   : hidden;
    display    : flex;
    align-items: center
}

.testimonials-copy {
    position    : relative;
    z-index     : 2;
    max-width   : 430px;
    margin-left : 112px;
    margin-right: 48px;
    color       : #fff
}

.testimonials-title {
    font-size     : 3.05rem;
    line-height   : 1.05;
    letter-spacing: -.05em;
    font-weight   : 800;
    margin-bottom : 42px;
    color         : #fff
}

.testimonials-text {
    font-size     : 18px;
    line-height   : 1.15;
    letter-spacing: -.03em;
    font-weight   : 500;
    margin-bottom : 42px;
    color         : #fff;
    max-width     : 310px
}

.testimonials-author-block h3 {
    font-size    : 17px;
    font-weight  : 800;
    margin-bottom: 8px;
    color        : #fff
}

.testimonials-author-block span {
    font-size  : 12px;
    font-weight: 700;
    color      : #fff
}

.testimonials-quote-icon {
    position       : absolute;
    top            : 30%;
    left           : 50%;
    transform      : translate(-50%, -50%);
    width          : 82px;
    height         : 82px;
    border-radius  : 50%;
    background     : #1ab9eb;
    color          : #fff;
    font-size      : 60px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 5
}

.testimonials-yellow-shape {
    position     : absolute;
    right        : -150px;
    bottom       : -200px;
    width        : 520px;
    height       : 520px;
    border-radius: 50%;
    background   : #ffd533;
    z-index      : 1
}

.testimonials-dots {
    display   : flex;
    gap       : 12px;
    margin-top: 64px
}

.testimonial-dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    border       : 0;
    padding      : 0;
    background   : rgba(255, 255, 255, .28)
}

.testimonial-dot.active {
    width     : 14px;
    height    : 14px;
    background: #fff
}

.latest-articles-section {
    position  : relative;
    padding   : 92px 0 72px;
    background: #fff;
    overflow  : hidden
}

.latest-articles-header {
    max-width: 760px;
    margin   : 0 auto 58px
}

.latest-articles-kicker {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 8px 16px;
    border-radius  : 10px;
    background     : linear-gradient(to right, #ccf4ff 30%, transparent 30%);
    color          : #3e4659;
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : .26em;
    margin-bottom  : 24px
}

.latest-articles-title {
    font-weight   : 700;
    color         : #36425d;
    max-width     : 520px;
    margin        : 0 auto 22px;
    font-size     : 2.5rem;
    line-height   : 44px;
    letter-spacing: -1px
}

.latest-articles-subtitle {
    font-size  : 16px;
    line-height: 1.7;
    font-weight: 600;
    color      : #8a96ab;
    margin     : 0
}

.article-card {
    position     : relative;
    height       : 100%;
    background   : #fff;
    border-radius: 20px;
    overflow     : hidden;
    box-shadow   : 0 18px 48px rgba(48, 65, 119, .1)
}

.article-card-media {
    height  : 216px;
    overflow: hidden
}

.article-card-media img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block
}

.article-card-body {
    padding: 26px 24px 28px
}

.article-meta {
    font-size     : 10px;
    line-height   : 1.5;
    font-weight   : 700;
    letter-spacing: .08em;
    color         : #94a0b5;
    margin-bottom : 14px
}

.article-meta span {
    margin: 0 6px
}

.article-card h3 {
    font-size     : 18px;
    line-height   : 1.25;
    letter-spacing: -.03em;
    font-weight   : 800;
    color         : #36425d;
    margin-bottom : 14px
}

.article-card p {
    font-size    : 15px;
    line-height  : 1.7;
    color        : #5f6980;
    margin-bottom: 26px
}

.article-read-more {
    font-size      : 12px;
    font-weight    : 800;
    color          : #355cff;
    text-decoration: none;
    letter-spacing : .04em
}

.article-read-more:hover {
    color: #244ae8
}

.latest-articles-cta {
    margin-top: 50px;
    position  : relative;
    z-index   : 1
}

.latest-articles-btn {
    display       : inline-block;
    background    : linear-gradient(90deg, #3a64f0 0, #3c5af4 100%);
    border        : 0;
    color         : #fff;
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding       : 16px 44px;
    border-radius : 999px
}

.latest-articles-btn:hover {
    background: linear-gradient(90deg, #345be0 0, #3551e4 100%);
    color     : #fff
}

.articles-shape {
    position     : absolute;
    border-radius: 50%;
    z-index      : 0
}

.articles-shape-left {
    width     : 110px;
    height    : 110px;
    background: #dce7ff;
    left      : 88px;
    bottom    : -42px
}

.articles-shape-right {
    width     : 170px;
    height    : 170px;
    background: #ffd131;
    right     : 62px;
    bottom    : 54px
}

.clients-logo-section {
    position  : relative;
    padding   : 78px 0 64px;
    background: #fff;
    overflow  : hidden
}

.clients-logo-bg-circle {
    position     : absolute;
    top          : -40px;
    left         : 200px;
    width        : 150px;
    height       : 150px;
    border-radius: 50%;
    background   : #dfe8ff;
    z-index      : 0
}

.clients-logo-block {
    position: relative;
    z-index : 1
}

.clients-logo-block-local {
    margin-top: 62px
}

.clients-logo-heading {
    text-align    : center;
    font-size     : 3rem;
    line-height   : 1.08;
    letter-spacing: -.05em;
    font-weight   : 800;
    color         : #35415c;
    margin-bottom : 34px
}

.clients-logo-marquee {
    overflow: hidden;
    width   : 100%
}

.clients-logo-track {
    display    : flex;
    align-items: center;
    gap        : 40px;
    width      : max-content;
    animation  : 24s linear infinite clientsMarquee
}

.clients-logo-marquee.reverse .clients-logo-track {
    animation-direction: reverse
}

.client-logo-card {
    flex           : 0 0 auto;
    width          : 150px;
    height         : 120px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 10px;
    background     : #fff;
    color          : #596276
}

.logo-teal {
    background    : #1698bb;
    color         : #fff;
    font-size     : 56px;
    font-weight   : 300;
    letter-spacing: -.08em
}

.logo-wordmark {
    font-size     : 22px;
    font-weight   : 700;
    letter-spacing: -.03em
}

.accent-cyan {
    color: #29aeb6
}

.accent-purple {
    color: #8f84a6
}

.accent-dark {
    color: #2d2d2d
}

.accent-orange {
    color: #ff6d0f
}

.accent-bluepink {
    color      : #295bff;
    text-shadow: 18px 0 0 #ff2b7d
}

.accent-gold {
    color      : #b88a2a;
    font-weight: 500;
    font-size  : 34px
}

.logo-green {
    background : #97cc39;
    color      : #fff;
    font-size  : 44px;
    font-weight: 700
}

.logo-monogram {
    background : #f2f2f2;
    color      : #ec3d27;
    font-size  : 54px;
    font-weight: 800
}

.company-logo-section {
    width     : 100%;
    padding   : 30px 0;
    background: #fff;
    overflow  : hidden
}

.company-logo-slider {
    width   : 100%;
    overflow: hidden;
    position: relative
}

.company-logo-track {
    display    : flex;
    align-items: center;
    width      : max-content;
    animation  : 28s linear infinite logoScroll
}

.company-logo-slider:hover .company-logo-track {
    animation-play-state: paused
}

.company-logo-item {
    width          : 220px;
    height         : 120px;
    margin         : 0 25px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0
}

.company-logo-item img {
    max-width : 100%;
    max-height: 100px;
    object-fit: contain;
    filter    : grayscale(0%);
    transition: transform .3s, filter .3s
}

.company-logo-item:hover img {
    transform: scale(1.08);
    filter   : grayscale(0%)
}

@keyframes logoScroll {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@media (max-width:768px) {
    .company-logo-item {
        width : 160px;
        height: 90px;
        margin: 0 18px
    }

    .company-logo-item img {
        max-height: 75px
    }
}

@media (max-width:991px) {
    .price-more-section {
        flex-direction: column
    }

    .price-more-content,
    .price-more-image {
        width: 100%
    }

    .price-more-image {
        min-height: 420px
    }

    .price-more-content {
        padding: 60px 25px
    }

    .price-more-content h2 {
        font-size: 34px
    }

    .shape-purple,
    .shape-yellow {
        opacity: .55
    }

    .testimonials-content-panel,
    .testimonials-image-panel {
        min-height: auto
    }

    .testimonials-image-panel {
        height: 420px
    }

    .testimonials-content-panel {
        border-top-left-radius: 60px;
        padding               : 70px 24px
    }

    .testimonials-copy {
        margin   : 0 auto;
        max-width: 100%
    }

    .testimonials-title {
        font-size    : 2.45rem;
        margin-bottom: 28px
    }

    .testimonials-text {
        max-width: 100%
    }

    .testimonials-quote-icon {
        top      : 40px;
        left     : 24px;
        width    : 70px;
        height   : 70px;
        font-size: 58px
    }

    .testimonials-yellow-shape {
        width : 360px;
        height: 360px;
        right : -120px;
        bottom: -140px
    }

    .latest-articles-section {
        padding: 76px 0 62px
    }

    .latest-articles-title {
        font-size: 2.5rem
    }

    .articles-shape-left {
        left: 12px
    }

    .articles-shape-right {
        right : -36px;
        bottom: 20px
    }

    .clients-logo-section {
        padding: 68px 0 54px
    }

    .clients-logo-heading {
        font-size: 2.35rem
    }

    .clients-logo-bg-circle {
        top   : -20px;
        left  : auto;
        right : -20px;
        width : 70px;
        height: 70px
    }

    .client-logo-card {
        width : 130px;
        height: 100px
    }

    .logo-wordmark {
        font-size: 18px
    }
}

@media (max-width:575px) {
    .price-more-content h2 {
        font-size: 30px
    }

    .price-more-content p {
        font-size: 16px
    }

    .price-more-blue-shape {
        width : 650px;
        height: 420px;
        left  : -220px;
        bottom: -210px
    }

    .testimonials-image-panel {
        height: 320px
    }

    .testimonials-content-panel {
        border-top-left-radius: 34px;
        padding               : 56px 18px 48px
    }

    .testimonials-title {
        font-size: 2rem
    }

    .testimonials-text {
        font-size    : 16px;
        margin-bottom: 30px
    }

    .testimonials-dots {
        margin-top: 40px
    }

    .latest-articles-title {
        font-size: 2rem
    }

    .latest-articles-subtitle {
        font-size: 15px
    }

    .article-card-body {
        padding: 22px 18px 24px
    }

    .clients-logo-heading {
        font-size: 2rem
    }

    .clients-logo-track {
        gap: 24px
    }

    .client-logo-card {
        width : 112px;
        height: 86px
    }
}

.whatsapp-float {
    position       : fixed;
    bottom         : 30px;
    right          : 30px;
    border-radius  : 50%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    z-index        : 1000;
    transition     : transform .3s
}

.whatsapp-float img {
    width        : 50%;
    border-radius: 120px
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color    : #fff
}

@media (max-width:991px) {
    .mobile-features-visual {
        min-height             : 520px;
        border-top-right-radius: 90px
    }

    .mobile-feature-float {
        right: 126px
    }

    .mobile-features-copy {
        padding  : 54px 24px 60px;
        max-width: 100%
    }

    .mobile-features-copy h2 {
        font-size: 2.45rem
    }

    .mobile-convenience-section {
        padding: 68px 0 74px
    }

    .mobile-convenience-copy h2 {
        font-size: 2.7rem
    }

    .mobile-convenience-visual {
        min-height: auto
    }

    .mobile-convenience-image {
        margin   : 0 auto;
        transform: rotate(4deg)
    }

    .mobile-convenience-image img {
        height   : 500px;
        max-width: 100%
    }

    .mobile-shape-yellow {
        left: 22px
    }

    .mobile-shape-pink {
        left: 26px
    }

    .mobile-advantage-section {
        padding: 68px 0 60px
    }

    .mobile-advantage-header h2 {
        font-size: 2.55rem
    }

    .mobile-process-section {
        padding: 72px 0 64px
    }

    .mobile-process-header {
        margin-bottom: 50px
    }

    .mobile-process-header h2 {
        font-size: 2.55rem
    }

    .mobile-process-cta-wrap {
        margin-top: 52px
    }
}

@media (max-width:575px) {
    .mobile-features-visual {
        min-height             : 420px;
        border-top-right-radius: 46px
    }

    .mobile-features-phone {
        width        : 170px;
        height       : 340px;
        border-radius: 28px
    }

    .mobile-phone-screen {
        border-radius: 22px
    }

    .mobile-phone-screen img {
        width: 74px
    }

    .mobile-phone-notch {
        width : 52px;
        height: 16px
    }

    .mobile-feature-float {
        width : 56px;
        height: 56px;
        right : 72px
    }

    .mobile-feature-float svg {
        width : 26px;
        height: 26px
    }

    .float-red {
        top: 108px
    }

    .float-pink {
        top: 172px
    }

    .float-sky {
        top: 236px
    }

    .float-green {
        top: 300px
    }

    .mobile-features-copy h2 {
        font-size: 2rem
    }

    .mobile-features-list li {
        font-size   : 16px;
        padding-left: 46px
    }

    .mobile-features-btn {
        width    : 100%;
        min-width: 0
    }

    .mobile-convenience-copy h2 {
        font-size: 2rem
    }

    .mobile-convenience-copy p {
        font-size: 16px
    }

    .mobile-convenience-list li {
        font-size   : 16px;
        padding-left: 42px
    }

    .mobile-convenience-btn {
        width: 100%
    }

    .mobile-convenience-image img {
        height   : 380px;
        max-width: 100%
    }

    .mobile-shape-yellow {
        width : 80px;
        height: 80px;
        top   : 108px;
        left  : 10px
    }

    .mobile-shape-purple {
        width : 52px;
        height: 52px;
        right : 14px
    }

    .mobile-shape-pink {
        width : 120px;
        height: 120px;
        left  : 10px
    }

    .mobile-shape-soft {
        width : 48px;
        height: 48px
    }

    .mobile-advantage-header h2 {
        font-size: 2rem
    }

    .mobile-advantage-card {
        min-height: auto;
        padding   : 26px 24px 22px
    }

    .mobile-advantage-ghost {
        font-size: 5.4rem
    }

    .mobile-process-header h2 {
        font-size: 2rem
    }

    .mobile-process-header p {
        font-size: 15px
    }

    .mobile-process-card {
        max-width : 100%;
        text-align: center
    }

    .mobile-process-card p {
        max-width: 100%
    }

    .mobile-process-btn {
        width    : 100%;
        min-width: 0
    }
}