/* =========================================================
   SOCIAL MEDIA MARKETING PAGE
   Page-specific CSS
   Dark + Light Theme Compatible
   Existing style.css compatible
   ========================================================= */


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

.smm-page {

    --smm-bg: #070b14;
    --smm-bg-soft: #0c1220;
    --smm-card: rgba(255,255,255,0.045);
    --smm-card-hover: rgba(255,255,255,0.075);

    --smm-text: #f4f7ff;
    --smm-text-soft: #aab4c8;
    --smm-text-muted: #7d889c;

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

    --smm-primary: #507cff;
    --smm-primary-light: #7598ff;

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

    background:
        var(--smm-bg);

    color:
        var(--smm-text);

    overflow:
        hidden;

}


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

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

    --smm-bg: #f7f9fc;
    --smm-bg-soft: #ffffff;

    --smm-card: rgba(255,255,255,0.9);
    --smm-card-hover: #ffffff;

    --smm-text: #111827;
    --smm-text-soft: #596579;
    --smm-text-muted: #788397;

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

    --smm-primary: #315bea;
    --smm-primary-light: #507cff;

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

}


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

.smm-container {

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

    margin:
        0 auto;

}


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

.smm-hero {

    position:
        relative;

    padding:
        150px 0 110px;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(80,124,255,0.14),
            transparent 35%
        ),
        var(--smm-bg);

}


.smm-hero-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.smm-eyebrow,
.smm-section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        18px;

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

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.smm-hero-content h1 {

    margin:
        0;

    max-width:
        720px;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:
        1.02;

    letter-spacing:
        -2.5px;

}


.smm-hero-content h1 span {

    display:
        block;

    color:
        var(--smm-primary);

}


.smm-hero-description {

    max-width:
        650px;

    margin:
        28px 0 32px;

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

    font-size:
        18px;

    line-height:
        1.75;

}


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

.smm-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.smm-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        52px;

    padding:
        0 22px;

    border:
        1px solid transparent;

    border-radius:
        12px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        0.25s ease;

}


.smm-btn-primary {

    background:
        var(--smm-primary);

    color:
        #ffffff;

    box-shadow:
        0 14px 35px rgba(80,124,255,0.25);

}


.smm-btn-primary:hover {

    transform:
        translateY(-2px);

    color:
        #ffffff;

}


.smm-btn-secondary {

    background:
        transparent;

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

    color:
        var(--smm-text);

}


.smm-btn-secondary:hover {

    background:
        var(--smm-card);

    color:
        var(--smm-text);

}


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

.smm-hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        35px;

    margin-top:
        40px;

}


.smm-hero-trust div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.smm-hero-trust strong {

    font-size:
        14px;

}


.smm-hero-trust span {

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

    font-size:
        12px;

}


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

.smm-hero-visual {

    position:
        relative;

    min-height:
        510px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.smm-social-card {

    width:
        min(430px, 100%);

    padding:
        25px;

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

    border-radius:
        25px;

    background:
        var(--smm-card);

    backdrop-filter:
        blur(20px);

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

}


.smm-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.smm-card-profile {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.smm-profile-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        rgba(80,124,255,0.14);

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

    font-size:
        19px;

}


.smm-card-profile strong {

    display:
        block;

    font-size:
        14px;

}


.smm-card-profile span {

    display:
        block;

    margin-top:
        4px;

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

    font-size:
        11px;

}


.smm-live-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #43d17a;

    font-size:
        10px;

    font-weight:
        700;

}


.smm-live-badge i {

    font-size:
        6px;

}


/* =========================================================
   CHART
   ========================================================= */

.smm-growth-chart {

    position:
        relative;

    height:
        180px;

    margin:
        35px 0 20px;

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

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 44px,
            var(--smm-border) 45px
        );

}


.smm-chart-line {

    position:
        absolute;

    left:
        5%;

    top:
        70%;

    width:
        90%;

    height:
        80px;

    border-top:
        3px solid var(--smm-primary);

    transform:
        rotate(-7deg);

    border-radius:
        50%;

    box-shadow:
        0 0 20px rgba(80,124,255,0.35);

}


.smm-chart-dot {

    position:
        absolute;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

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

    box-shadow:
        0 0 15px rgba(80,124,255,0.8);

}


.dot-1 {
    left: 5%;
    top: 72%;
}

.dot-2 {
    left: 25%;
    top: 64%;
}

.dot-3 {
    left: 48%;
    top: 52%;
}

.dot-4 {
    left: 70%;
    top: 38%;
}

.dot-5 {
    right: 4%;
    top: 20%;
}


/* =========================================================
   GROWTH VALUE
   ========================================================= */

.smm-growth-value strong {

    display:
        block;

    font-size:
        34px;

}


.smm-growth-value span {

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

    font-size:
        12px;

}


.smm-card-stats {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        25px;

}


.smm-card-stats div {

    padding:
        14px;

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

    border-radius:
        12px;

}


.smm-card-stats span {

    display:
        block;

    margin-bottom:
        5px;

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

    font-size:
        10px;

}


.smm-card-stats strong {

    font-size:
        15px;

}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.smm-floating-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 16px;

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

    border-radius:
        14px;

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

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

}


.smm-floating-card i {

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

}


.smm-floating-card strong,
.smm-floating-card span {

    display:
        block;

}


.smm-floating-card strong {

    font-size:
        11px;

}


.smm-floating-card span {

    margin-top:
        3px;

    color:
        #42cf79;

    font-size:
        12px;

    font-weight:
        700;

}


.smm-floating-one {

    top:
        60px;

    right:
        -15px;

}


.smm-floating-two {

    bottom:
        60px;

    left:
        -25px;

}


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

.smm-intro {

    padding:
        110px 0;

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

}


.smm-section-heading {

    max-width:
        780px;

}


.smm-section-heading.center {

    margin:
        0 auto;

    text-align:
        center;

}


.smm-section-heading span {

    color:
        var(--smm-primary);

}


.smm-section-heading h2 {

    margin:
        0 0 20px;

    font-size:
        clamp(34px, 4vw, 55px);

    line-height:
        1.1;

    letter-spacing:
        -1.5px;

}


.smm-section-heading p {

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

    font-size:
        17px;

    line-height:
        1.8;

}


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

.smm-services {

    padding:
        120px 0;

}


.smm-section-top {

    display:
        grid;

    grid-template-columns:
        1fr 0.65fr;

    gap:
        70px;

    align-items:
        end;

    margin-bottom:
        55px;

}


.smm-section-top h2 {

    margin:
        0;

    max-width:
        650px;

    font-size:
        clamp(34px, 4vw, 55px);

    line-height:
        1.08;

}


.smm-section-top h2 span {

    display:
        block;

    color:
        var(--smm-primary);

}


.smm-section-top p {

    margin:
        0;

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

    line-height:
        1.8;

}


.smm-services-grid {

    display:
        grid;

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

    gap:
        18px;

}


.smm-service-card {

    position:
        relative;

    padding:
        30px;

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

    border-radius:
        20px;

    background:
        var(--smm-card);

    transition:
        0.3s ease;

}


.smm-service-card:hover {

    transform:
        translateY(-6px);

    background:
        var(--smm-card-hover);

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

}


.smm-service-icon {

    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        25px;

    border-radius:
        14px;

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

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

    font-size:
        21px;

}


.smm-service-card > span {

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

    font-size:
        11px;

    font-weight:
        700;

}


.smm-service-card h3 {

    margin:
        8px 0 12px;

    font-size:
        20px;

}


.smm-service-card p {

    min-height:
        90px;

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

    font-size:
        14px;

    line-height:
        1.7;

}


.smm-service-card a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        15px;

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

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;

}


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

.smm-process {

    padding:
        120px 0;

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

}


.smm-process-grid {

    display:
        grid;

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

    gap:
        15px;

    margin-top:
        65px;

}


.smm-process-step {

    position:
        relative;

    padding:
        28px 22px;

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

    border-radius:
        18px;

    background:
        var(--smm-card);

}


.smm-process-number {

    margin-bottom:
        25px;

    color:
        var(--smm-primary);

    font-size:
        12px;

    font-weight:
        800;

}


.smm-process-step > i {

    display:
        block;

    margin-bottom:
        20px;

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

    font-size:
        25px;

}


.smm-process-step h3 {

    margin:
        0 0 10px;

    font-size:
        18px;

}


.smm-process-step p {

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.65;

}


/* =========================================================
   PLATFORMS
   ========================================================= */

.smm-platforms {

    padding:
        120px 0;

}


.smm-platforms-layout {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    align-items:
        center;

}


.smm-platform-content h2 {

    margin:
        0 0 20px;

    font-size:
        clamp(36px, 4vw, 58px);

    line-height:
        1.05;

}


.smm-platform-content h2 span {

    display:
        block;

    color:
        var(--smm-primary);

}


.smm-platform-content > p {

    max-width:
        550px;

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

    line-height:
        1.8;

}


.smm-platform-list {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        30px;

}


.smm-platform-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px;

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

    border-radius:
        12px;

    background:
        var(--smm-card);

    font-size:
        13px;

}


.smm-platform-list i {

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

    font-size:
        18px;

}


/* =========================================================
   ORBIT
   ========================================================= */

.smm-platform-visual {

    min-height:
        430px;

    display:
        grid;

    place-items:
        center;

}


.smm-platform-orbit {

    position:
        relative;

    width:
        330px;

    height:
        330px;

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

    border-radius:
        50%;

}


.smm-platform-orbit::before {

    content:
        "";

    position:
        absolute;

    inset:
        45px;

    border:
        1px dashed var(--smm-border);

    border-radius:
        50%;

}


.smm-orbit-center {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        80px;

    height:
        80px;

    display:
        grid;

    place-items:
        center;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        var(--smm-primary);

    color:
        #ffffff;

    box-shadow:
        0 0 50px rgba(80,124,255,0.35);

    font-size:
        26px;

}


.smm-orbit-icon {

    position:
        absolute;

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        var(--smm-card);

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

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

}


.orbit-instagram {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-facebook {
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

.orbit-linkedin {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-youtube {
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

.orbit-x {
    top: 25%;
    right: 18%;
}


/* =========================================================
   WHY
   ========================================================= */

.smm-why {

    padding:
        110px 0;

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

}


.smm-why-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        55px;

}


.smm-why-grid > div {

    padding:
        30px;

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

    border-radius:
        18px;

    background:
        var(--smm-card);

}


.smm-why-grid i {

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

    font-size:
        25px;

}


.smm-why-grid h3 {

    margin:
        20px 0 10px;

    font-size:
        18px;

}


.smm-why-grid p {

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.7;

}


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

.smm-cta {

    padding:
        100px 0;

}


.smm-cta-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        55px;

    border:
        1px solid rgba(80,124,255,0.25);

    border-radius:
        25px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(80,124,255,0.15),
            transparent 40%
        ),
        var(--smm-card);

}


.smm-cta-box > div {

    max-width:
        720px;

}


.smm-cta-box > div > span {

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.smm-cta-box h2 {

    margin:
        14px 0;

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

    line-height:
        1.1;

}


.smm-cta-box h2 span {

    color:
        var(--smm-primary);

}


.smm-cta-box p {

    margin:
        0;

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

    line-height:
        1.8;

}


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

@media (max-width: 1100px) {

    .smm-hero-grid {

        grid-template-columns:
            1fr;

    }


    .smm-hero-content {

        text-align:
            center;

    }


    .smm-hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .smm-hero-actions,
    .smm-hero-trust {

        justify-content:
            center;

    }


    .smm-services-grid {

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

    }


    .smm-process-grid {

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

    }


    .smm-why-grid {

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

    }

}


@media (max-width: 768px) {

    .smm-container {

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

    }


    .smm-hero {

        padding:
            110px 0 80px;

    }


    .smm-hero-content h1 {

        font-size:
            43px;

        letter-spacing:
            -1.5px;

    }


    .smm-hero-description {

        font-size:
            16px;

    }


    .smm-hero-visual {

        min-height:
            430px;

    }


    .smm-floating-one {

        right:
            -5px;

    }


    .smm-floating-two {

        left:
            -5px;

    }


    .smm-section-top {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .smm-services-grid {

        grid-template-columns:
            1fr;

    }


    .smm-process-grid {

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

    }


    .smm-platforms-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .smm-platform-content {

        text-align:
            center;

    }


    .smm-platform-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .smm-platform-list {

        text-align:
            left;

    }


    .smm-cta-box {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;

    }

}


@media (max-width: 520px) {

    .smm-hero {

        padding-top:
            95px;

    }


    .smm-hero-content h1 {

        font-size:
            36px;

    }


    .smm-hero-actions {

        flex-direction:
            column;

    }


    .smm-btn {

        width:
            100%;

    }


    .smm-hero-trust {

        gap:
            20px;

    }


    .smm-social-card {

        padding:
            18px;

    }


    .smm-card-stats {

        grid-template-columns:
            1fr;

    }


    .smm-floating-card {

        transform:
            scale(0.85);

    }


    .smm-floating-one {

        right:
            -25px;

    }


    .smm-floating-two {

        left:
            -25px;

    }


    .smm-process-grid {

        grid-template-columns:
            1fr;

    }


    .smm-platform-list {

        grid-template-columns:
            1fr;

    }


    .smm-platform-orbit {

        width:
            270px;

        height:
            270px;

    }


    .smm-orbit-center {

        width:
            65px;

        height:
            65px;

    }


    .smm-orbit-icon {

        width:
            48px;

        height:
            48px;

    }


    .smm-why-grid {

        grid-template-columns:
            1fr;

    }

}