:root {
            --primary-purple: #7E57E2;
            --dark-navy: #1F1D4B;
            --text-gray: #676767;
        }


        .cs-hero-section {
            padding: 80px 0 0;
            background: #fff;
        }

        .cs-hero-content {
            padding: 40px 0;
        
            margin-bottom: 50px;
        }

        .cs-hero-row {
            display: flex;
            align-items: flex-start;
            min-height: 120px;
        }

        .cs-title-col {
            flex: 0 0 40%;
            max-width: 40%;
            padding-right: 40px;
            display: flex;
            align-items: flex-start;
        }

        .cs-meta-col {
            flex: 0 0 60%;
            max-width: 60%;
            padding-left: 50px;
        }

        .cs-title {
            font-size: 40px;
            font-weight: 700;
            color: #1a1a2e ;
            margin-bottom: 0;
            line-height: 1.15;
        }

        .cs-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px 40px;
        }

        .meta-item h6 {
            font-family: "Cuprum", sans-serif;
            font-size: 16px;
            color: #999;
            margin-bottom: 5px;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0;
        }

        .meta-item p {
            font-family: "Cuprum", sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #1a1a2e;
            margin: 0;
            line-height: 1.3;
        }

        @media (max-width: 768px) {
            .cs-hero-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .cs-title-col, .cs-meta-col {
                flex: 0 0 100%;
                max-width: 100%;
                padding: 0;
                border-right: none;
            }
            .cs-title-col {
                margin-bottom: 24px;
            }
            .cs-meta-col {
                padding-left: 0;
            }
        }

        .cs-main-image {
            width: 100%;
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 80px;
        }

        .cs-section-padding {
            padding: 40px 0;
        }

        .cs-sub-title {
            font-family: "Cuprum", sans-serif;
            font-size: 18px;
            color: #888;
            font-weight: 500;
            text-transform: none;
            margin-bottom: 12px;
            display: block;
        }

        .cs-heading {
            font-size: 32px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 25px;
        }

        .cs-text {
            font-family: "Cuprum", sans-serif;
            font-size: 18px;
            line-height: 1.8;
            color: #888;
            margin-bottom: 30px;
        }

        .cs-dual-images img, .cs-dual-images .placeholder-box {
            border-radius: 24px;
            width: 100%;
        }

        /* ===== SVG CHALLENGES & SOLUTION SECTION ===== */
        .ps-section {
            padding: 40px 0;
        }

        .ps-svg-container {
            position: relative;
            width: 100%;
            margin: 0 auto;
        }

        .ps-svg-bg {
            width: 100%;
            display: block;
        }

        .ps-svg-bg svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Content overlay on top of SVG */
        .ps-cards-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            z-index: 2;
        }

        .ps-card-col {
            flex: 1;
            padding: 40px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #fff;
        }

        .ps-card-col:first-child {
            padding-right: 80px; /* Extra space so text doesn't hit the notch */
        }

        .ps-card-col:last-child {
            padding-left: 80px; /* Extra space so text doesn't hit the notch */
        }

        .ps-card-col h3, 
        .ps-card-col h4, 
        .ps-card-col p,
        .ps-card-col .cs-sub-title,
        .ps-card-col .cs-text,
        .ps-card-col .cs-heading {
            color: #fff !important;
            opacity: 1;
        }

        .ps-card-col h3, .ps-card-col .cs-heading {
            font-size: 36px;
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 25px;
        }

        .ps-card-col h4, .ps-card-col .cs-sub-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .ps-card-text p {
            font-family: "Cuprum", sans-serif;
            font-size: 18px;
            line-height: 1.7;
            margin-bottom: 18px;
            opacity: 0.9;
        }

        /* The X divider circle */
        .ps-svg-divider {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .ps-notch {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .ps-notch i {
            display: none;
        }

        .ps-notch::before, .ps-notch::after {
            content: '';
            position: absolute;
            width: 48px;
            height: 10px;
            background-color: #000000;
            border-radius: 0; /* Square ends */
        }

        .ps-notch::before {
            transform: rotate(45deg);
        }

        .ps-notch::after {
            transform: rotate(-45deg);
        }

        /* Feature List Styling */
        .feature-item {
            margin-bottom: 14px;
        }

        .feature-item h5 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 5px;
        }

        .feature-item p {
            font-family: "Cuprum", sans-serif;
            font-size: 16px;
            color: var(--text-gray);
            margin: 0;
        }

        .placeholder-box {
            background: #eee;
            border-radius: 20px;
            width: 100%;
            height: 400px;
        }

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

        .grid-item {
            background: #eee;
            border-radius: 20px;
            height: 300px;
        }

        .grid-item.wide {
            grid-column: span 2;
            height: 400px;
        }

        @media (max-width: 1199px) {
            .ps-svg-bg { display: none; }
            .ps-cards-content {
                position: relative;
                flex-direction: column;
                gap: 20px;
            }
            .ps-card-col {
                border-radius: 30px;
                padding: 40px !important;
            }
            .ps-card-col:first-child { background: var(--card-left-bg); }
            .ps-card-col:last-child { background: var(--card-right-bg); }
            .ps-svg-divider { display: none; }
            .ps-card-text h3 { font-size: 28px; }
        }