:root {
    --pxBackground: #fff;
    --pxAccent: #6600ff;
    --pxHeadingColor: #111111;
    --pxTextColor: #7A7A7A;
    --pxFooterBg: #05051e;
    --pxBlockBorder: 1px solid #f1f1f1;
    --pxBlockShadow: 1px 1px 35px #f1f1f194;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    max-width: 1400px;
    width: 98%;
    margin: 20px auto;
    border-radius: 30px;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

body {
    font-family: 'DM Sans', sans-serif;
    color: var(--pxTextColor);
    background: url('../images/bg.jpg') center bottom no-repeat;
    background-size: cover;
    background-attachment: fixed;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--pxHeadingColor);
    font-weight: 700;
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.pxContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pxButton {
    display: inline-block;
    background-color: var(--pxAccent);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;

    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.pxHeader .pxButton {
    margin-left: 20px;
}

.pxButton:hover {
    background-color: #5500dd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 0, 255, 0.2);
}


.pxHeader {
    padding: 20px 0;
    position: sticky;
    top: 0;
    background-color: var(--pxBackground);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.pxHeaderInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pxLogo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--pxHeadingColor);
    text-transform: uppercase;
}

.pxLogo span {
    color: var(--pxAccent);
}

.pxNav {
    display: flex;
    align-items: center;
}

.pxNavList {
    display: flex;
    list-style: none;
    gap: 30px;
}

.pxNavItem a {
    font-weight: 500;
    position: relative;
    color: #333;
}

.pxNavItem a:hover {
    color: var(--pxAccent);
}

.pxNavItem a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--pxAccent);
    transition: width 0.3s ease;
}

.pxNavItem a:hover::after {
    width: 100%;
}

.pxMobileMenuToggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}


.pxBanner {
    padding: 100px 0;
    text-align: center;
    background: #fff url('../images/background.png') center top no-repeat;
}

.pxBannerSubtitle {
    font-size: 18px;
    color: var(--pxAccent);
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pxBannerTitle {
    font-size: 48px;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pxBannerText {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 30px;
}

.pxBannerTags {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.pxTag {
    background-color: rgba(102, 0, 255, 0.1);
    color: var(--pxAccent);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
}


.pxServices {
    padding: 100px 0;
}

.pxSectionTitle {
    text-align: center;
    font-size: 36px;
    margin-bottom: 60px;
}

.pxServicesGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.pxServiceCard {
    border: var(--pxBlockBorder);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--pxBlockShadow);
    transition: all 0.3s ease;
}

.pxServiceCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.pxServiceIcon {
    font-size: 40px;
    color: var(--pxAccent);
    margin-bottom: 20px;
}

.pxServiceTitle {
    font-size: 20px;
    margin-bottom: 15px;
}

.pxServiceText {
    margin-bottom: 20px;
}

.pxServiceLink {
    color: var(--pxAccent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pxServiceLink i {
    transition: transform 0.3s ease;
}

.pxServiceLink:hover i {
    transform: translateX(5px);
}


.pxMovingTags {
    padding: 40px 0;
    overflow: hidden;
    background-color: rgba(102, 0, 255, 0.03);
}

.pxTagsContainer {
    display: flex;
    animation: pxMoveTags 30s linear infinite;
}

.pxTagLarge {
    background-color: white;
    padding: 12px 24px;
    border-radius: 6px;
    margin: 0 15px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

@keyframes pxMoveTags {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.pxAbout {
    padding: 100px 0;
}

.pxAboutInner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pxAboutContent h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.pxAboutText {
    margin-bottom: 40px;
}

.pxStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pxStat {
    text-align: center;
}

.pxStatNumber {
    font-size: 36px;
    font-weight: 700;
    color: var(--pxAccent);
    margin-bottom: 10px;
}

.pxStatText {
    font-weight: 500;
}

.pxAboutImage {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pxBlockShadow);
}

.pxAboutImage img {
    width: 100%;
    height: auto;
    display: block;
}


.pxTestimonials {
    padding: 100px 0;
    background-color: rgba(102, 0, 255, 0.03);
}

.pxTestimonialsSlider {
    position: relative;
    overflow: hidden;
}

.pxTestimonialsTrack {
    display: flex;
    transition: transform 0.5s ease;
}

.pxTestimonial {
    flex: 0 0 calc(33.333% - 20px);
    margin: 0 10px;
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--pxBlockShadow);
}

.pxStars {
    color: #FFC107;
    margin-bottom: 15px;
}

.pxTestimonialName {
    font-weight: 600;
    margin-bottom: 10px;
}

.pxTestimonialText {
    font-style: italic;
}

.pxSliderControls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pxSliderDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pxSliderDot.active {
    background-color: var(--pxAccent);
}


.pxCta {
    padding: 100px 0;
    background: url('../images/background-4.png') center no-repeat;
    background-sise: cover;
    text-align: center;
}

.pxCtaTitle {
    font-size: 36px;
    margin-bottom: 20px;
}

.pxCtaText {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 18px;
}


.pxFooter {
    background-color: var(--pxFooterBg);
    color: white;
    padding: 60px 0 20px;
}

.pxFooterTop {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.pxFooterLogo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.pxFooterLogo span {
    color: var(--pxAccent);
}

.pxFooterAbout {
    margin-bottom: 20px;
}

.pxFooterLinks h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 18px;
}

.pxFooterLinks ul {
    list-style: none;
}

.pxFooterLinks li {
    margin-bottom: 10px;
}

.pxFooterLinks a:hover {
    color: var(--pxAccent);
}

.pxFooterContact h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 18px;
}

.pxFooterContact p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxFooterBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pxFooterLegal {
    display: flex;
    gap: 20px;
}

.pxFooterLegal a:hover {
    color: var(--pxAccent);
}


.pxCookiePopup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    max-width: 500px;
    width: 90%;
    display: none;
}

.pxCookieTitle {
    font-size: 20px;
    margin-bottom: 10px;
}

.pxCookieText {
    margin-bottom: 20px;
}

.pxCookieActions {
    display: flex;
    gap: 10px;
}

.pxCookieAccept {
    background-color: var(--pxAccent);
    color: white;
}

.pxCookieDecline {
    background-color: transparent;
    color: var(--pxTextColor);
    border: 1px solid #ddd;
}



.pxPageHeader {
    padding: 100px 0 60px;
    text-align: center;
    background: linear-gradient(135deg, rgba(102, 0, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}

.pxPageTitle {
    font-size: 48px;
    margin-bottom: 15px;
}

.pxPageSubtitle {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto;
}

.pxAboutSection {
    padding: 100px 0;
}

.pxAboutContent.flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pxAboutText h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.pxAboutText p {
    margin-bottom: 20px;
}

.pxAboutImage {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--pxBlockShadow);
    position: relative;
}

.pxAboutImage img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.pxAboutImage:hover img {
    transform: scale(1.05);
}

.pxAboutImage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(102, 0, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.pxAboutImage:hover::before {
    opacity: 1;
}

.pxMissionVision {
    padding: 100px 0;
    background-color: rgba(102, 0, 255, 0.03);
}

.pxMissionVisionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.pxMissionCard,
.pxVisionCard {
    background-color: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: var(--pxBlockShadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxMissionCard:hover,
.pxVisionCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.pxMissionCard::before,
.pxVisionCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--pxAccent);
}

.pxMissionIcon,
.pxVisionIcon {
    font-size: 48px;
    color: var(--pxAccent);
    margin-bottom: 20px;
}

.pxMissionTitle,
.pxVisionTitle {
    font-size: 24px;
    margin-bottom: 15px;
}

.pxStatsSection {
    padding: 100px 0;
}

.pxStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.pxStatCard {
    text-align: center;
    padding: 30px;
    border-radius: 12px;
    background-color: white;
    box-shadow: var(--pxBlockShadow);
    transition: all 0.3s ease;
}

.pxStatCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pxStatIcon {
    font-size: 40px;
    color: var(--pxAccent);
    margin-bottom: 15px;
}

.pxStatNumber {
    font-size: 36px;
    font-weight: 700;
    color: var(--pxAccent);
    margin-bottom: 10px;
}

.pxStatText {
    font-weight: 500;
}


.pxContactSection {
    padding: 100px 0;
}

.pxContactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.pxContactInfo h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.pxContactIntro {
    margin-bottom: 40px;
    font-size: 18px;
}

.pxContactCards {
    margin-bottom: 40px;
}

.pxContactCard {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--pxBlockShadow);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.pxContactCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pxContactIcon {
    width: 50px;
    height: 50px;
    background: rgba(102, 0, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pxContactIcon i {
    font-size: 24px;
    color: var(--pxAccent);
}

.pxContactDetails h3 {
    margin-bottom: 5px;
    font-size: 18px;
}

.pxSocialLinks h3 {
    margin-bottom: 15px;
}

.pxSocialIcons {
    display: flex;
    gap: 15px;
}

.pxSocialIcon {
    width: 40px;
    height: 40px;
    background: rgba(102, 0, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pxSocialIcon:hover {
    background: var(--pxAccent);
    color: white;
    transform: translateY(-3px);
}

.pxContactForm {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--pxBlockShadow);
}

.pxContactForm h2 {
    font-size: 28px;
    margin-bottom: 30px;
}

.pxFormGroup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.pxFormField {
    margin-bottom: 20px;
}

.pxFormField label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--pxHeadingColor);
}

.pxFormField input,
.pxFormField select,
.pxFormField textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.pxFormField input:focus,
.pxFormField select:focus,
.pxFormField textarea:focus {
    outline: none;
    border-color: var(--pxAccent);
    box-shadow: 0 0 0 3px rgba(102, 0, 255, 0.1);
}

.pxFormButton {
    width: 100%;
    padding: 15px;
    font-size: 16px;
}

.pxSuccessPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1002;
}

.pxSuccessContent {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pxSuccessIcon {
    font-size: 60px;
    color: #4CAF50;
    margin-bottom: 20px;
}

.pxSuccessContent h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.pxSuccessContent p {
    margin-bottom: 25px;
}


@media (max-width: 1024px) {

    .pxAboutContent.flex,
    .pxMissionVisionGrid,
    .pxContactGrid {
        grid-template-columns: 1fr;
    }

    .pxStatsGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pxFormGroup {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pxPageTitle {
        font-size: 36px;
    }

    .pxStatsGrid {
        grid-template-columns: 1fr;
    }

    .pxContactCard {
        flex-direction: column;
        text-align: center;
    }

    .pxContactIcon {
        align-self: center;
    }
}



.pxServicesHeader {
    padding: 100px 0 60px;
    text-align: center;
    background: linear-gradient(135deg, rgba(102, 0, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}


.pxServicesFeatures {
    padding: 100px 0;
    background: white;
}

.pxFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.pxFeatureCard {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: var(--pxBlockShadow);
    border: var(--pxBlockBorder);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxFeatureCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--pxAccent), #8a2be2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pxFeatureCard:hover::before {
    transform: scaleX(1);
}

.pxFeatureCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pxFeatureIcon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--pxAccent), #8a2be2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: white;
    font-size: 32px;
}

.pxFeatureCard h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--pxHeadingColor);
}

.pxFeatureCard p {
    margin-bottom: 20px;
    color: var(--pxTextColor);
    line-height: 1.6;
}

.pxFeatureList {
    list-style: none;
    padding: 0;
}

.pxFeatureList li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.pxFeatureList i {
    color: var(--pxAccent);
    margin-right: 10px;
    font-size: 18px;
}


.pxAdvancedCapabilities {
    padding: 100px 0;
    background: rgba(102, 0, 255, 0.02);
}

.pxCapabilitiesHeader {
    text-align: center;
    margin-bottom: 60px;
}

.pxCapabilitiesHeader h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.pxCapabilitiesHeader p {
    font-size: 18px;
    color: var(--pxTextColor);
    max-width: 600px;
    margin: 0 auto;
}

.pxCapabilitiesGrid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pxCapabilityItem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pxCapabilityItem.pxReversed {
    direction: rtl;
}

.pxCapabilityItem.pxReversed>* {
    direction: ltr;
}

.pxCapabilityContent h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--pxHeadingColor);
}

.pxCapabilityContent p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.7;
}

.pxCapabilityStats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.pxStat {
    text-align: center;
}

.pxStatNumber {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--pxAccent);
    margin-bottom: 5px;
}

.pxStatLabel {
    font-size: 14px;
    color: var(--pxTextColor);
    font-weight: 500;
}

.pxIndustryTags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.pxIndustryTag {
    background: rgba(102, 0, 255, 0.1);
    color: var(--pxAccent);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}


.pxLanguageIcons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.pxLanguageIcon {
    width: 60px;
    height: 60px;
    background: white;
    border: 2px solid var(--pxAccent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--pxAccent);
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(102, 0, 255, 0.1);
}

.pxIndustryVisual {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.pxDocType {
    background: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    color: var(--pxHeadingColor);
    width: 100%;
    text-align: center;
}

.pxCollaborationVisual {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.pxUserAvatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--pxAccent), #8a2be2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 0, 255, 0.2);
}


.pxIntegrationSection {
    padding: 100px 0;
    background: white;
}

.pxIntegrationContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pxIntegrationText h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.pxIntegrationText>p {
    font-size: 18px;
    margin-bottom: 40px;
    color: var(--pxTextColor);
}

.pxIntegrationFeatures {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pxIntegrationFeature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pxIntegrationFeature i {
    font-size: 32px;
    color: var(--pxAccent);
    margin-top: 5px;
}

.pxIntegrationFeature h4 {
    margin-bottom: 8px;
    font-size: 18px;
}

.pxPlatformIcons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pxPlatformIcon {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--pxBlockShadow);
    border: var(--pxBlockBorder);
    transition: all 0.3s ease;
}

.pxPlatformIcon:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pxPlatformIcon i {
    font-size: 40px;
    color: var(--pxAccent);
    margin-bottom: 10px;
    display: block;
}

.pxPlatformIcon span {
    font-weight: 600;
    color: var(--pxHeadingColor);
}


.pxPricingCta {
    padding: 100px 0;
    background: rgba(102, 0, 255, 0.03);
}

.pxPricingContent {
    text-align: center;
}

.pxPricingContent h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.pxPricingContent>p {
    font-size: 18px;
    margin-bottom: 60px;
    color: var(--pxTextColor);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pxPricingCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.pxPricingCard {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: var(--pxBlockShadow);
    border: var(--pxBlockBorder);
    position: relative;
    transition: all 0.3s ease;
}

.pxPricingCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pxPricingCard.pxPopular {
    border: 2px solid var(--pxAccent);
    transform: scale(1.05);
}

.pxPricingCard.pxPopular:hover {
    transform: scale(1.05) translateY(-10px);
}

.pxPopularBadge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pxAccent);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.pxPricingHeader {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f1f1;
}

.pxPricingHeader h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--pxHeadingColor);
}

.pxPrice {
    font-size: 48px;
    font-weight: 700;
    color: var(--pxHeadingColor);
}

.pxPrice span {
    font-size: 16px;
    color: var(--pxTextColor);
    font-weight: 400;
}

.pxPricingFeatures {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.pxPricingFeatures li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.pxPricingFeatures i {
    color: var(--pxAccent);
    margin-right: 10px;
    font-size: 18px;
}

.pxOutlineButton {
    background: transparent;
    color: var(--pxAccent);
    border: 2px solid var(--pxAccent);
}

.pxOutlineButton:hover {
    background: var(--pxAccent);
    color: white;
}


@media (max-width: 1024px) {
    .pxFeaturesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pxCapabilityItem {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pxIntegrationContent {
        grid-template-columns: 1fr;
    }

    .pxPricingCards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .pxPricingCard.pxPopular {
        transform: none;
    }

    .pxPricingCard.pxPopular:hover {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .pxFeaturesGrid {
        grid-template-columns: 1fr;
    }

    .pxPlatformIcons {
        grid-template-columns: 1fr;
    }

    .pxCapabilityStats {
        flex-direction: column;
        gap: 20px;
    }
}


.pxPageHeader {
    padding: 100px 0 60px;
    text-align: center;
    background: linear-gradient(135deg, rgba(102, 0, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}

.pxPageTitle {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--pxHeadingColor);
}

.pxPageSubtitle {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto;
    color: var(--pxTextColor);
}

.pxLegalContent {
    padding: 80px 0;
    max-width: 900px;
    margin: 0 auto;
}

.pxLegalSection {
    margin-bottom: 50px;
}

.pxLegalSection h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--pxHeadingColor);
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(102, 0, 255, 0.1);
}

.pxLegalSection h3 {
    font-size: 20px;
    margin: 30px 0 15px;
    color: var(--pxHeadingColor);
}

.pxLegalSection p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: var(--pxTextColor);
}

.pxLegalSection ul,
.pxLegalSection ol {
    margin: 20px 0;
    padding-left: 30px;
}

.pxLegalSection li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: var(--pxTextColor);
}

.pxLegalSection strong {
    color: var(--pxHeadingColor);
    font-weight: 600;
}

.pxLegalNote {
    background: rgba(102, 0, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--pxAccent);
    margin: 25px 0;
}

.pxLegalNote p {
    margin-bottom: 0;
    color: var(--pxHeadingColor);
}

.pxLegalTable {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--pxBlockShadow);
}

.pxLegalTable th {
    background: rgba(102, 0, 255, 0.1);
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: var(--pxHeadingColor);
    border-bottom: 1px solid #f1f1f1;
}

.pxLegalTable td {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
    color: var(--pxTextColor);
}

.pxLegalTable tr:last-child td {
    border-bottom: none;
}


@media (max-width: 768px) {
    .pxPageTitle {
        font-size: 36px;
    }

    .pxLegalSection h2 {
        font-size: 24px;
    }

    .pxLegalSection h3 {
        font-size: 18px;
    }

    .pxLegalTable {
        font-size: 14px;
    }

    .pxLegalTable th,
    .pxLegalTable td {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .pxLegalTable {
        display: block;
        overflow-x: auto;
    }
}

































@media (max-width: 1024px) {
    .pxServicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pxAboutInner {
        grid-template-columns: 1fr;
    }

    .pxAboutImage {
        order: -1;
    }

    .pxTestimonial {
        flex: 0 0 calc(50% - 20px);
    }

    .pxFooterTop {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .pxNav {
        display: none;
    }

    .pxMobileMenuToggle {
        display: block;
    }

    .pxNav.active {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .pxNavList {
        flex-direction: column;
        width: 100%;
    }

    .pxBannerTitle {
        font-size: 36px;
    }

    .pxServicesGrid {
        grid-template-columns: 1fr;
    }

    .pxTestimonial {
        flex: 0 0 calc(100% - 20px);
    }

    .pxFooterTop {
        grid-template-columns: 1fr;
    }

    .pxFooterBottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .pxContactCard {
        align-items: center;
    }
}

@media(max-width: 560px) {
    .pxStatNumber {
        font-size: 30px;
    }

    .pxStatText {
        line-height: 1.2;
        font-size: 14px;
    }

    .pxLanguageIcon {
        width: 50px;
        height: 50px;
    }
}