/* =========================================================
   CONTENT MARKETING PAGE
   Softlysis Technologies
   Dark + Light Theme Compatible
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.content-marketing-page {

    --cm-bg: #050914;
    --cm-bg-soft: #09101f;
    --cm-card: rgba(14, 23, 42, 0.78);

    --cm-text: #f5f7ff;
    --cm-text-soft: #aab4c8;
    --cm-text-muted: #7f8ba3;

    --cm-border: rgba(255,255,255,0.09);

    --cm-primary: #5b7cff;
    --cm-primary-light: #7e98ff;

    --cm-shadow:
        0 25px 70px rgba(0,0,0,0.35);

    background:
        var(--cm-bg);

    color:
        var(--cm-text);

    min-height:
        100vh;

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"] .content-marketing-page {

    --cm-bg: #f7f9fc;
    --cm-bg-soft: #ffffff;
    --cm-card: rgba(255,255,255,0.92);

    --cm-text: #111827;
    --cm-text-soft: #536174;
    --cm-text-muted: #6b7280;

    --cm-border: rgba(15,23,42,0.10);

    --cm-primary: #4667e8;
    --cm-primary-light: #3656d4;

    --cm-shadow:
        0 25px 60px rgba(15,23,42,0.10);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.cm-container {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.cm-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        145px 0 100px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(91,124,255,0.14),
            transparent 35%
        );

}


html[data-theme="light"] .cm-hero {

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(70,103,232,0.10),
            transparent 35%
        );

}


.cm-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, 0.95fr);

    gap:
        70px;

    align-items:
        center;

}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.cm-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        8px 14px;

    border:
        1px solid var(--cm-border);

    border-radius:
        100px;

    background:
        var(--cm-card);

    color:
        var(--cm-primary-light);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.cm-eyebrow-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--cm-primary);

    box-shadow:
        0 0 12px var(--cm-primary);

}


.cm-hero-title {

    margin:
        24px 0 22px;

    max-width:
        720px;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height:
        1.04;

    letter-spacing:
        -0.045em;

    color:
        var(--cm-text);

}


.cm-hero-title span {

    display:
        block;

    background:
        linear-gradient(
            90deg,
            var(--cm-primary),
            var(--cm-primary-light)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


.cm-hero-description {

    max-width:
        650px;

    margin:
        0 0 30px;

    color:
        var(--cm-text-soft);

    font-size:
        17px;

    line-height:
        1.8;

}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.cm-hero-actions,
.cm-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        13px;

}


.cm-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 20px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        all 0.25s ease;

}


.cm-btn-primary {

    background:
        var(--cm-primary);

    color:
        #ffffff !important;

    box-shadow:
        0 12px 30px rgba(91,124,255,0.25);

}


.cm-btn-primary:hover {

    transform:
        translateY(-2px);

    background:
        var(--cm-primary-light);

    color:
        #ffffff !important;

}


.cm-btn-secondary {

    background:
        var(--cm-card);

    border-color:
        var(--cm-border);

    color:
        var(--cm-text) !important;

}


.cm-btn-secondary:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--cm-primary);

    color:
        var(--cm-primary-light) !important;

}


/* =========================================================
   HERO TRUST
   ========================================================= */

.cm-hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin-top:
        28px;

}


.cm-trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--cm-text-muted);

    font-size:
        13px;

}


.cm-trust-item i {

    color:
        var(--cm-primary);

}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.cm-hero-visual {

    position:
        relative;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.cm-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(40px);

    pointer-events:
        none;

}


.cm-glow-one {

    width:
        260px;

    height:
        260px;

    background:
        rgba(91,124,255,0.16);

    top:
        40px;

    right:
        20px;

}


.cm-glow-two {

    width:
        180px;

    height:
        180px;

    background:
        rgba(91,124,255,0.10);

    bottom:
        40px;

    left:
        30px;

}


/* =========================================================
   MAIN CARD
   ========================================================= */

.cm-content-card {

    position:
        relative;

    z-index:
        2;

    width:
        min(440px, 100%);

    padding:
        25px;

    border:
        1px solid var(--cm-border);

    border-radius:
        22px;

    background:
        var(--cm-card);

    backdrop-filter:
        blur(20px);

    box-shadow:
        var(--cm-shadow);

}


.cm-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        20px;

    border-bottom:
        1px solid var(--cm-border);

}


.cm-card-label {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--cm-text-muted);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.1em;

}


.cm-card-label i {

    color:
        var(--cm-primary);

    font-size:
        17px;

}


.cm-card-status {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #39d98a;

    font-size:
        10px;

    font-weight:
        800;

}


.cm-card-status i {

    font-size:
        6px;

}


/* =========================================================
   CARD MAIN
   ========================================================= */

.cm-card-main {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        25px 0;

}


.cm-content-icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        16px;

    background:
        rgba(91,124,255,0.12);

    color:
        var(--cm-primary-light);

    font-size:
        25px;

}


.cm-card-main strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--cm-text);

    font-size:
        18px;

}


.cm-card-main span {

    display:
        block;

    color:
        var(--cm-text-muted);

    font-size:
        12px;

}


/* =========================================================
   PROGRESS
   ========================================================= */

.cm-card-progress {

    padding:
        18px;

    border:
        1px solid var(--cm-border);

    border-radius:
        14px;

    background:
        rgba(127,139,163,0.05);

}


.cm-progress-header {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        10px;

    color:
        var(--cm-text-muted);

    font-size:
        12px;

}


.cm-progress-header strong {

    color:
        var(--cm-primary-light);

}


.cm-progress-bar {

    height:
        7px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        rgba(127,139,163,0.15);

}


.cm-progress-bar span {

    display:
        block;

    width:
        87%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--cm-primary),
            var(--cm-primary-light)
        );

}


/* =========================================================
   CARD STATS
   ========================================================= */

.cm-card-stats {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        10px;

    padding:
        22px 0;

}


.cm-card-stats div {

    padding:
        12px;

    border:
        1px solid var(--cm-border);

    border-radius:
        12px;

}


.cm-card-stats strong {

    display:
        block;

    color:
        var(--cm-text);

    font-size:
        18px;

}


.cm-card-stats span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--cm-text-muted);

    font-size:
        10px;

}


/* =========================================================
   CARD TAGS
   ========================================================= */

.cm-card-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.cm-card-tags span {

    padding:
        6px 10px;

    border:
        1px solid var(--cm-border);

    border-radius:
        50px;

    color:
        var(--cm-text-muted);

    font-size:
        10px;

}


/* =========================================================
   FLOATING NOTES
   ========================================================= */

.cm-floating-note {

    position:
        absolute;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        11px 15px;

    border:
        1px solid var(--cm-border);

    border-radius:
        12px;

    background:
        var(--cm-card);

    backdrop-filter:
        blur(15px);

    box-shadow:
        var(--cm-shadow);

    color:
        var(--cm-text);

    font-size:
        11px;

    font-weight:
        700;

}


.cm-floating-note i {

    color:
        var(--cm-primary-light);

}


.cm-note-one {

    top:
        80px;

    left:
        5px;

}


.cm-note-two {

    right:
        -5px;

    bottom:
        75px;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.cm-section-heading {

    max-width:
        700px;

    margin-bottom:
        50px;

}


.cm-section-heading.cm-heading-center {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}


.cm-section-heading > span {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--cm-primary-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;

}


.cm-section-heading h2 {

    margin:
        0 0 15px;

    color:
        var(--cm-text);

    font-size:
        clamp(32px, 4vw, 52px);

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

}


.cm-section-heading h2 strong {

    color:
        var(--cm-primary-light);

}


.cm-section-heading p {

    margin:
        0;

    color:
        var(--cm-text-soft);

    font-size:
        16px;

    line-height:
        1.8;

}


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

.cm-intro {

    padding:
        100px 0;

    background:
        var(--cm-bg-soft);

}


.cm-intro-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.cm-intro-card {

    padding:
        30px;

    border:
        1px solid var(--cm-border);

    border-radius:
        18px;

    background:
        var(--cm-card);

}


.cm-feature-icon {

    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        22px;

    border-radius:
        14px;

    background:
        rgba(91,124,255,0.10);

    color:
        var(--cm-primary-light);

    font-size:
        22px;

}


.cm-intro-card h3 {

    margin:
        0 0 10px;

    color:
        var(--cm-text);

    font-size:
        19px;

}


.cm-intro-card p {

    margin:
        0;

    color:
        var(--cm-text-soft);

    font-size:
        14px;

    line-height:
        1.7;

}


/* =========================================================
   SERVICES
   ========================================================= */

.cm-services {

    padding:
        110px 0;

}


.cm-services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.cm-service-card {

    position:
        relative;

    padding:
        30px;

    border:
        1px solid var(--cm-border);

    border-radius:
        18px;

    background:
        var(--cm-card);

    overflow:
        hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


.cm-service-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(91,124,255,0.35);

    box-shadow:
        var(--cm-shadow);

}


.cm-service-number {

    position:
        absolute;

    top:
        18px;

    right:
        20px;

    color:
        var(--cm-text-muted);

    opacity:
        0.45;

    font-size:
        11px;

    font-weight:
        800;

}


.cm-service-icon {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        22px;

    border-radius:
        15px;

    background:
        rgba(91,124,255,0.11);

    color:
        var(--cm-primary-light);

    font-size:
        23px;

}


.cm-service-card h3 {

    margin:
        0 0 10px;

    color:
        var(--cm-text);

    font-size:
        19px;

}


.cm-service-card p {

    min-height:
        72px;

    margin:
        0 0 20px;

    color:
        var(--cm-text-soft);

    font-size:
        14px;

    line-height:
        1.7;

}


.cm-service-card ul {

    display:
        grid;

    gap:
        9px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.cm-service-card li {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--cm-text-muted);

    font-size:
        12px;

}


.cm-service-card li i {

    color:
        var(--cm-primary-light);

}


/* =========================================================
   PROCESS
   ========================================================= */

.cm-process {

    padding:
        110px 0;

    background:
        var(--cm-bg-soft);

}


.cm-process-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        16px;

}


.cm-process-item {

    display:
        flex;

    gap:
        20px;

    padding:
        25px;

    border:
        1px solid var(--cm-border);

    border-radius:
        16px;

    background:
        var(--cm-card);

}


.cm-process-step {

    flex:
        0 0 48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        rgba(91,124,255,0.11);

    color:
        var(--cm-primary-light);

    font-size:
        12px;

    font-weight:
        800;

}


.cm-process-item h3 {

    margin:
        0 0 7px;

    color:
        var(--cm-text);

    font-size:
        17px;

}


.cm-process-item p {

    margin:
        0;

    color:
        var(--cm-text-soft);

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   CONTENT TYPES
   ========================================================= */

.cm-content-types {

    padding:
        110px 0;

}


.cm-types-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;

}


.cm-type {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        18px;

    border:
        1px solid var(--cm-border);

    border-radius:
        14px;

    background:
        var(--cm-card);

    color:
        var(--cm-text);

    transition:
        all 0.25s ease;

}


.cm-type:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(91,124,255,0.35);

}


.cm-type i {

    color:
        var(--cm-primary-light);

    font-size:
        19px;

}


.cm-type span {

    font-size:
        13px;

    font-weight:
        700;

}


/* =========================================================
   CTA
   ========================================================= */

.cm-cta {

    padding:
        0 0 110px;

}


.cm-cta-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr 250px;

    gap:
        40px;

    align-items:
        center;

    padding:
        60px;

    overflow:
        hidden;

    border:
        1px solid var(--cm-border);

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            rgba(91,124,255,0.12),
            var(--cm-card)
        );

}


.cm-cta-content {

    position:
        relative;

    z-index:
        2;

}


.cm-cta-content > span {

    color:
        var(--cm-primary-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;

}


.cm-cta-content h2 {

    max-width:
        650px;

    margin:
        12px 0 15px;

    color:
        var(--cm-text);

    font-size:
        clamp(32px, 4vw, 50px);

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

}


.cm-cta-content h2 strong {

    color:
        var(--cm-primary-light);

}


.cm-cta-content p {

    max-width:
        650px;

    margin:
        0 0 25px;

    color:
        var(--cm-text-soft);

    font-size:
        15px;

    line-height:
        1.8;

}


.cm-cta-visual {

    display:
        grid;

    place-items:
        center;

}


.cm-cta-circle {

    width:
        150px;

    height:
        150px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(91,124,255,0.30);

    border-radius:
        50%;

    background:
        rgba(91,124,255,0.08);

    color:
        var(--cm-primary-light);

    font-size:
        50px;

    box-shadow:
        0 0 70px rgba(91,124,255,0.15);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .cm-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .cm-hero-content {

        max-width:
            800px;

    }


    .cm-hero-visual {

        min-height:
            450px;

    }


    .cm-services-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .cm-types-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

}


@media (max-width: 768px) {

    .cm-container {

        width:
            min(100% - 28px, 680px);

    }


    .cm-hero {

        padding:
            110px 0 70px;

    }


    .cm-hero-title {

        font-size:
            clamp(38px, 10vw, 54px);

    }


    .cm-hero-description {

        font-size:
            15px;

    }


    .cm-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .cm-btn {

        width:
            100%;

    }


    .cm-hero-trust {

        gap:
            12px;

    }


    .cm-hero-visual {

        min-height:
            390px;

    }


    .cm-content-card {

        padding:
            18px;

    }


    .cm-note-one {

        top:
            30px;

        left:
            -5px;

    }


    .cm-note-two {

        right:
            -5px;

        bottom:
            30px;

    }


    .cm-intro,
    .cm-services,
    .cm-process,
    .cm-content-types {

        padding:
            75px 0;

    }


    .cm-section-heading {

        margin-bottom:
            35px;

    }


    .cm-intro-grid,
    .cm-services-grid {

        grid-template-columns:
            1fr;

    }


    .cm-service-card p {

        min-height:
            auto;

    }


    .cm-process-grid {

        grid-template-columns:
            1fr;

    }


    .cm-types-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .cm-cta {

        padding-bottom:
            75px;

    }


    .cm-cta-box {

        grid-template-columns:
            1fr;

        padding:
            35px 25px;

    }


    .cm-cta-visual {

        display:
            none;

    }

}


@media (max-width: 480px) {

    .cm-card-stats {

        grid-template-columns:
            1fr;

    }


    .cm-types-grid {

        grid-template-columns:
            1fr;

    }


    .cm-hero-trust {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}