/* =========================================================
   PPC ADVERTISING PAGE
   Softlysis Technologies
   Dark + Light Theme
   ========================================================= */

.ppc-page {
    --ppc-bg: #07101d;
    --ppc-bg-soft: #0b1626;
    --ppc-card: rgba(255, 255, 255, 0.045);
    --ppc-card-solid: #0d1929;
    --ppc-border: rgba(255, 255, 255, 0.10);
    --ppc-text: #f5f7fb;
    --ppc-muted: #9aa8ba;
    --ppc-primary: #5c82ff;
    --ppc-primary-2: #7c9bff;
    --ppc-green: #39d98a;
    --ppc-shadow: 0 25px 70px rgba(0, 0, 0, .28);

    background: var(--ppc-bg);
    color: var(--ppc-text);
    overflow: hidden;
}


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

[data-theme="light"] .ppc-page {
    --ppc-bg: #f7f9fc;
    --ppc-bg-soft: #eef3f9;
    --ppc-card: rgba(255, 255, 255, .86);
    --ppc-card-solid: #ffffff;
    --ppc-border: rgba(15, 30, 50, .10);
    --ppc-text: #111b2b;
    --ppc-muted: #667386;
    --ppc-primary: #315fe9;
    --ppc-primary-2: #5278ef;
    --ppc-green: #159b61;
    --ppc-shadow: 0 25px 70px rgba(30, 55, 90, .12);
}


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

.ppc-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.ppc-hero {
    position: relative;
    padding: 120px 0 100px;
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(92, 130, 255, .14),
            transparent 35%
        ),
        var(--ppc-bg);
}


.ppc-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


.ppc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;

    color: var(--ppc-primary-2);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.ppc-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}


.ppc-hero-content h1 {
    margin: 0;
    max-width: 650px;

    color: var(--ppc-text);

    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.03;
    letter-spacing: -2.5px;
    font-weight: 700;
}


.ppc-hero-content h1 span {
    display: block;
    color: var(--ppc-primary);
}


.ppc-hero-text {
    max-width: 610px;
    margin: 28px 0 34px;

    color: var(--ppc-muted);

    font-size: 17px;
    line-height: 1.8;
}


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

.ppc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


.ppc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 0 22px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.ppc-btn:hover {
    transform: translateY(-3px);
}


.ppc-btn-primary {
    color: #ffffff !important;
    background: var(--ppc-primary);
    border: 1px solid var(--ppc-primary);
    box-shadow: 0 12px 30px rgba(92, 130, 255, .20);
}


.ppc-btn-primary:hover {
    color: #ffffff !important;
    background: var(--ppc-primary-2);
}


.ppc-btn-secondary {
    color: var(--ppc-text) !important;
    background: transparent;
    border: 1px solid var(--ppc-border);
}


.ppc-btn-secondary:hover {
    color: var(--ppc-primary) !important;
    border-color: var(--ppc-primary);
}


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

.ppc-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;

    margin-top: 38px;
}


.ppc-trust-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.ppc-trust-item strong {
    color: var(--ppc-primary);
    font-size: 13px;
}


.ppc-trust-item span {
    color: var(--ppc-muted);
    font-size: 12px;
}


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

.ppc-hero-visual {
    position: relative;
    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.ppc-dashboard-card {
    width: min(100%, 500px);

    padding: 24px;

    border: 1px solid var(--ppc-border);
    border-radius: 22px;

    background: var(--ppc-card);

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

    backdrop-filter: blur(18px);
}


.ppc-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.ppc-dashboard-top > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.ppc-dashboard-top span {
    color: var(--ppc-muted);
    font-size: 11px;
}


.ppc-dashboard-top strong {
    color: var(--ppc-text);
    font-size: 17px;
}


.ppc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: var(--ppc-green) !important;
}


.ppc-status i {
    font-size: 6px;
}


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

.ppc-chart {
    position: relative;

    height: 220px;

    margin: 30px 0 20px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(92, 130, 255, .06),
            transparent
        );
}


.ppc-chart-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size: 50px 44px;
}


[data-theme="light"] .ppc-chart-grid {
    background-image:
        linear-gradient(
            rgba(20,40,70,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20,40,70,.06) 1px,
            transparent 1px
        );
}


.ppc-chart svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.ppc-chart-area {
    fill: url(#ppcChartGradient);
    fill-opacity: .15;
}


.ppc-chart-line {
    fill: none;

    stroke: var(--ppc-primary);

    stroke-width: 4;

    vector-effect: non-scaling-stroke;
}


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

.ppc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


.ppc-stat {
    padding: 15px;

    border: 1px solid var(--ppc-border);
    border-radius: 12px;

    background: var(--ppc-card);
}


.ppc-stat span {
    display: block;

    margin-bottom: 7px;

    color: var(--ppc-muted);

    font-size: 11px;
}


.ppc-stat strong {
    display: block;

    color: var(--ppc-text);

    font-size: 20px;
}


.ppc-stat small {
    color: var(--ppc-green);

    font-size: 10px;
}


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

.ppc-floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;

    border: 1px solid var(--ppc-border);
    border-radius: 13px;

    background: var(--ppc-card-solid);

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

    backdrop-filter: blur(15px);
}


.ppc-floating-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: var(--ppc-primary);

    background: rgba(92, 130, 255, .10);
}


.ppc-floating-card strong,
.ppc-floating-card small {
    display: block;
}


.ppc-floating-card strong {
    color: var(--ppc-text);
    font-size: 15px;
}


.ppc-floating-card small {
    margin-top: 3px;
    color: var(--ppc-muted);
    font-size: 10px;
}


.ppc-floating-one {
    top: 70px;
    right: -15px;
}


.ppc-floating-two {
    bottom: 65px;
    left: -25px;
}


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

.ppc-section-heading {
    max-width: 760px;
    margin-bottom: 55px;
}


.ppc-section-heading > span {
    display: block;

    margin-bottom: 15px;

    color: var(--ppc-primary);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.ppc-section-heading h2 {
    margin: 0;

    color: var(--ppc-text);

    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}


.ppc-section-heading h2 strong {
    color: var(--ppc-primary);
}


.ppc-section-heading p {
    max-width: 680px;
    margin: 20px 0 0;

    color: var(--ppc-muted);

    font-size: 16px;
    line-height: 1.8;
}


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

.ppc-intro {
    padding: 110px 0;

    background: var(--ppc-bg-soft);
}


.ppc-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


.ppc-service-card {
    position: relative;

    padding: 30px;

    border: 1px solid var(--ppc-border);
    border-radius: 18px;

    background: var(--ppc-card);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.ppc-service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(92, 130, 255, .35);

    box-shadow: var(--ppc-shadow);
}


.ppc-service-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    border-radius: 13px;

    color: var(--ppc-primary);

    background: rgba(92, 130, 255, .10);

    font-size: 22px;
}


.ppc-service-card > span {
    color: var(--ppc-primary);

    font-size: 11px;
    font-weight: 700;
}


.ppc-service-card h3 {
    margin: 12px 0;

    color: var(--ppc-text);

    font-size: 20px;
}


.ppc-service-card p {
    min-height: 100px;

    margin: 0 0 22px;

    color: var(--ppc-muted);

    font-size: 13px;
    line-height: 1.7;
}


.ppc-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--ppc-text);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


.ppc-service-card a:hover {
    color: var(--ppc-primary);
}


/* =========================================================
   PERFORMANCE
   ========================================================= */

.ppc-performance {
    padding: 110px 0;
}


.ppc-performance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}


.ppc-performance-content h2 {
    margin: 0;

    color: var(--ppc-text);

    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}


.ppc-performance-content h2 span {
    color: var(--ppc-primary);
}


.ppc-performance-content > p {
    max-width: 580px;
    margin: 22px 0 30px;

    color: var(--ppc-muted);

    font-size: 16px;
    line-height: 1.8;
}


.ppc-performance-list {
    display: grid;
    gap: 15px;
}


.ppc-performance-list > div {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--ppc-muted);

    font-size: 14px;
}


.ppc-performance-list i {
    color: var(--ppc-green);
}


/* =========================================================
   METRICS CARD
   ========================================================= */

.ppc-metrics-card {
    padding: 30px;

    border: 1px solid var(--ppc-border);
    border-radius: 20px;

    background: var(--ppc-card);

    box-shadow: var(--ppc-shadow);
}


.ppc-metrics-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 35px;

    color: var(--ppc-text);

    font-weight: 700;
}


.ppc-metrics-header i {
    color: var(--ppc-muted);
}


.ppc-metric-row {
    margin-bottom: 25px;
}


.ppc-metric-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 10px;
}


.ppc-metric-row span {
    color: var(--ppc-muted);
    font-size: 12px;
}


.ppc-metric-row strong {
    color: var(--ppc-text);
    font-size: 12px;
}


.ppc-progress {
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(128, 150, 180, .15);
}


.ppc-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--ppc-primary);
}


.ppc-metrics-footer {
    display: flex;
    justify-content: space-between;

    padding-top: 22px;

    border-top: 1px solid var(--ppc-border);
}


.ppc-metrics-footer span {
    color: var(--ppc-muted);
    font-size: 12px;
}


.ppc-metrics-footer strong {
    color: var(--ppc-green);
    font-size: 12px;
}


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

.ppc-process {
    padding: 110px 0;

    background: var(--ppc-bg-soft);
}


.ppc-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}


.ppc-process-item {
    position: relative;

    min-height: 290px;

    padding: 28px;

    border: 1px solid var(--ppc-border);
    border-radius: 17px;

    background: var(--ppc-card);

    transition: transform .3s ease;
}


.ppc-process-item:hover {
    transform: translateY(-6px);
}


.ppc-process-number {
    margin-bottom: 35px;

    color: var(--ppc-primary);

    font-size: 12px;
    font-weight: 700;
}


.ppc-process-item > i {
    color: var(--ppc-primary);

    font-size: 24px;
}


.ppc-process-item h3 {
    margin: 20px 0 10px;

    color: var(--ppc-text);

    font-size: 19px;
}


.ppc-process-item p {
    margin: 0;

    color: var(--ppc-muted);

    font-size: 12px;
    line-height: 1.7;
}


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

.ppc-platforms {
    padding: 110px 0;
}


.ppc-platform-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}


.ppc-platform-card {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 20px;

    text-align: center;

    border: 1px solid var(--ppc-border);
    border-radius: 15px;

    background: var(--ppc-card);

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.ppc-platform-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 130, 255, .4);
}


.ppc-platform-card i {
    margin-bottom: 5px;

    color: var(--ppc-primary);

    font-size: 28px;
}


.ppc-platform-card strong {
    color: var(--ppc-text);
    font-size: 13px;
}


.ppc-platform-card span {
    color: var(--ppc-muted);
    font-size: 10px;
}


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

.ppc-cta {
    padding: 0 0 110px;
}


.ppc-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 55px;

    border: 1px solid var(--ppc-border);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(92, 130, 255, .18),
            transparent 35%
        ),
        var(--ppc-card);

    box-shadow: var(--ppc-shadow);
}


.ppc-cta-box > div {
    max-width: 680px;
}


.ppc-cta-box > div > span {
    color: var(--ppc-primary);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


.ppc-cta-box h2 {
    margin: 12px 0;

    color: var(--ppc-text);

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
}


.ppc-cta-box h2 strong {
    color: var(--ppc-primary);
}


.ppc-cta-box p {
    margin: 0;

    color: var(--ppc-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

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


    .ppc-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .ppc-platform-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .ppc-container {
        width: min(100% - 28px, 600px);
    }


    .ppc-hero {
        padding: 80px 0 70px;
    }


    .ppc-hero-grid,
    .ppc-performance-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .ppc-hero-content h1 {
        font-size: clamp(40px, 12vw, 58px);
        letter-spacing: -2px;
    }


    .ppc-hero-text {
        font-size: 15px;
    }


    .ppc-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .ppc-btn {
        width: 100%;
    }


    .ppc-trust {
        gap: 18px;
    }


    .ppc-hero-visual {
        min-height: 420px;
    }


    .ppc-dashboard-card {
        padding: 18px;

        border-radius: 17px;
    }


    .ppc-floating-one {
        top: 20px;
        right: -5px;
    }


    .ppc-floating-two {
        bottom: 25px;
        left: -5px;
    }


    .ppc-stats {
        grid-template-columns: 1fr;
    }


    .ppc-intro,
    .ppc-performance,
    .ppc-process,
    .ppc-platforms {
        padding: 80px 0;
    }


    .ppc-service-grid {
        grid-template-columns: 1fr;
    }


    .ppc-process-grid {
        grid-template-columns: 1fr;
    }


    .ppc-process-item {
        min-height: auto;
    }


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


    .ppc-cta {
        padding-bottom: 80px;
    }


    .ppc-cta-box {
        flex-direction: column;
        align-items: flex-start;

        padding: 32px 24px;
    }


    .ppc-cta-box .ppc-btn {
        width: auto;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ppc-platform-grid {
        grid-template-columns: 1fr;
    }


    .ppc-floating-card {
        transform: scale(.88);
    }


    .ppc-floating-one {
        right: -25px;
    }


    .ppc-floating-two {
        left: -25px;
    }


    .ppc-section-heading h2,
    .ppc-performance-content h2 {
        font-size: 34px;
    }

}