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

.pub-hero{

    padding:40px 0 70px;
    overflow:hidden;
}

.pub-hero .container{

    display:flex;

    align-items:center;

    gap:50px;
}

/* LEFT */

.pub-hero-left{

    flex:0 0 42%;
}

/* RIGHT */

.pub-hero-right{

    flex:0 0 58%;

    position:relative;

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:flex-end;
}

.pub-hero-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position: center;

    display:block;
}

.pub-hero .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}
@media(max-width:991px){

    .pub-hero .container{

        flex-direction:column;

        gap:20px;
    }

    .pub-hero-left{

        width:100%;
    }

    .pub-hero-right{

        width:100%;

        display:flex;

        justify-content:flex-end;

        overflow:hidden;
    }

    .pub-hero-right img{

        width:100%;

        max-width:520px;

        height:auto;

        object-fit:contain;

        object-position:right center;

        display:block;
    }

}
/* LEFT */

.pub-hero-content{

    width:520px;

    flex-shrink:0;
}

.pub-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:#f3efff;

    color:#6d4aff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;
}

.pub-badge::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#6d4aff;
}

.pub-title{

    margin-top:24px;

    font-size:64px;

    line-height:1.08;

    font-weight:800;

    color:#111827;
}

.pub-title span{

    display:block;

    color:#6d4aff;
}

.pub-desc{

    margin-top:24px;

    font-size:18px;

    line-height:1.8;

    color:#6b7280;
}

/* BUTTONS */

.pub-buttons{

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

    margin-top:35px;
}

.pub-btn-primary{

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

    height:58px;

    padding:0 28px;

    border-radius:12px;

    background:#6d4aff;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.3s;
}

.pub-btn-primary:hover{

    transform:translateY(-2px);
}

.pub-btn-primary svg{

    width:18px;
    height:18px;
}

.pub-btn-play{

    display:flex;
    align-items:center;
}

.pub-btn-play img{

    height:58px;

    display:block;
}

/* TRUST SECTION */

.pub-trust{

    display:flex;

    align-items:flex-start;

    gap:38px;

    margin-top:42px;
}

.pub-trust-item{

    display:flex;

    align-items:flex-start;

    gap:12px;
}

.pub-trust-icon{

    width:38px;
    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.pub-trust-icon svg{

    width:18px;
    height:18px;
}

.pub-green{

    background:#ecfdf3;
    color:#16a34a;
}

.pub-blue{

    background:#eff6ff;
    color:#2563eb;
}

.pub-purple{

    background:#f3e8ff;
    color:#7c3aed;
}

.pub-trust-item span{

    display:block;

    color:#6b7280;

    font-size:13px;

    line-height:1.3;
}

.pub-trust-item strong{

    display:block;

    color:#111827;

    font-size:15px;

    font-weight:700;

    line-height:1.4;
}

/* MOBILE */

@media(max-width:768px){

    .pub-buttons{

        flex-direction:column;

        align-items:stretch;
    }

    .pub-btn-primary{

        justify-content:center;
    }

    .pub-btn-play{

        justify-content:center;
    }

    .pub-trust{

        flex-direction:column;

        gap:18px;
    }

}

/* RIGHT IMAGE */

.pub-hero-image{

    flex:1;

    display:flex;

    justify-content:flex-end;
}

.pub-hero-image img{

    width:100%;

    max-width:900px;

    display:block;
}

/* =====================================
   TABLET
===================================== */

@media(max-width:1200px){

    .pub-title{

        font-size:52px;
    }

    .pub-hero-content{

        width:450px;
    }

}

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

@media(max-width:991px){

    .pub-hero{

        padding:30px 0;
    }

    .pub-hero .container{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;
    }

    .pub-hero-content{

        width:100%;
    }

    .pub-title{

        font-size:42px;
    }

    .pub-desc{

        font-size:16px;
    }

    .pub-buttons{

        flex-wrap:wrap;
    }

    .pub-hero-image{

        width:100%;

        justify-content:flex-end;
    }

    .pub-hero-image img{

        width:140%;

        max-width:none;

        margin-right:-40%;
    }

}

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

@media(max-width:576px){

    .pub-title{

        font-size:34px;
    }

    .pub-desc{

        font-size:15px;
    }

    .pub-btn-primary{

        width:100%;
    }

    .pub-btn-play{

        width:100%;
    }

    .pub-btn-play img{

        max-width:180px;
        height:auto;
    }

    .pub-hero-image img{

        width:160%;

        margin-right:-60%;
    }

}
@media(max-width:991px){

    .pub-hero .container{

        flex-direction:column;
    }

    .pub-hero-left{

        width:100%;

        flex:unset;
    }

    .pub-hero-right{

        width:100%;

        flex:unset;

        min-height:auto;

        justify-content:flex-end;
    }

    .pub-hero-right img{

        width:100%;

        height:auto;

        object-fit:contain;

        object-position:right center;

       
    }

}

/* ==========================
   GROW SECTION
========================== */

.pub-growth{

    padding:80px 0;
}

.pub-growth .container{

    display:grid;

    grid-template-columns:2fr 1.1fr;

    gap:30px;

    align-items:stretch;
}

.pub-growth-left,
.pub-growth-right{

    display:flex;

    flex-direction:column;
}

.pub-section-title{
     line-height:1.15;

    font-size:42px;

    font-weight:800;

    color:#111827;

    margin-bottom:25px;
}

.pub-section-title span{

    color:#6d4aff;
}

/* GRID */

.pub-feature-grid{

    display:grid;

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

    gap:15px;

    flex:1;
}

.pub-feature-card{

    background:#fff;

    border:1px solid #ececf6;

    border-radius:18px;

    padding:20px;

    transition:.3s;

    min-height:125px;
}

.pub-feature-card:hover{

    transform:translateY(-4px);

    border-color:#d8d2ff;

    box-shadow:
    0 15px 35px rgba(109,74,255,.08);
}
.pub-feature-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4f1ff;

    color:#6d4aff;

    margin-bottom:14px;
}

.pub-feature-icon svg{

    width:22px;

    height:22px;
}
.pub-feature-card h4{

    font-size:15px;

    font-weight:700;

    margin-bottom:8px;
}

.pub-feature-card p{

    font-size:13px;

    line-height:1.6;

    color:#6b7280;
}

/* AI CARD */

.pub-ai-card{

    flex:1;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:1px solid #ececf6;

    border-radius:22px;

    overflow:hidden;
}

.pub-ai-header{

    background:
    linear-gradient(
        135deg,
        #6d4aff,
        #9747ff
    );

    color:#fff;

    padding:24px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;
}

.pub-ai-header small{

    opacity:.9;
}

.pub-ai-header h4{

    margin-top:5px;
}

.pub-ai-content{

    padding:25px;
}

.pub-ai-content p{

    font-size:18px;

    line-height:1.7;
}

.pub-ai-content strong{

    color:#22c55e;
}

.pub-ai-stats{

    padding:0 25px 20px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.pub-ai-stats span{

    font-size:13px;

    color:#6b7280;
}

.pub-ai-stats h3{

    margin-top:5px;

    font-size:34px;

    font-weight:800;
}
.pub-ai-btn{

    margin-top:auto;

    display:block;

    text-align:center;

    text-decoration:none;

    padding:18px;

    background:#f5f2ff;

    color:#6d4aff;

    font-weight:700;
}
.pub-chart{

    display:flex;

    align-items:flex-end;

    justify-content:flex-end;

    gap:8px;

    height:100px;

    padding:0 25px 25px;
}

.pub-chart span{

    width:18px;

    border-radius:8px;

    background:#8b5cff;
}

.pub-chart span:nth-child(1){

    height:30px;
}

.pub-chart span:nth-child(2){

    height:50px;
}

.pub-chart span:nth-child(3){

    height:75px;
}

.pub-chart span:nth-child(4){

    height:95px;
}

.pub-ai-btn{

    display:block;

    text-align:center;

    text-decoration:none;

    padding:18px;

    background:#f5f2ff;

    color:#6d4aff;

    font-weight:700;
}

/* MOBILE */

@media(max-width:991px){

    .pub-growth .container{

        grid-template-columns:1fr;
    }

    .pub-feature-grid{

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

    .pub-section-title{

        font-size:30px;
    }

}

@media(max-width:576px){

    .pub-feature-grid{

        grid-template-columns:1fr;
    }

}
/* ==================================
   MONITORING SECTION
================================== */

.pub-monitoring-section{

    padding:70px 0;
}

.pub-monitoring-section .container{

    display:grid;

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

    gap:24px;
}

/* COMMON CARDS */

.pub-monitoring-card,
.pub-alerts-card,
.pub-tools-card{

    background:#fff;

    border:1px solid #ececf6;

    border-radius:20px;

    padding:24px;
}

.pub-monitoring-card h3,
.pub-alerts-card h3,
.pub-tools-card h3{

    font-size:30px;

    font-weight:800;

    margin-bottom:24px;

    color:#111827;
}

.pub-monitoring-card h3 span,
.pub-alerts-card h3 span,
.pub-tools-card h3 span{

    display:block;

    color:#6d4aff;
}

/* MONITOR ITEMS */

.pub-monitor-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border:1px solid #f0f0f5;

    border-radius:14px;

    margin-bottom:14px;
}

.pub-monitor-left{

    display:flex;

    gap:14px;
}

.pub-monitor-icon{

    width:42px;
    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.pub-green-icon{background:#ecfdf3;}
.pub-blue-icon{background:#eff6ff;}
.pub-purple-icon{background:#f5f3ff;}
.pub-orange-icon{background:#fff7ed;}

.pub-monitor-item h4{

    font-size:15px;

    margin-bottom:4px;
}

.pub-monitor-item p{

    font-size:13px;

    color:#6b7280;
}

.pub-monitor-item strong{

    display:block;

    margin-top:8px;

    color:#16a34a;
}

/* ALERTS */

.pub-alert-item{

    display:flex;

    gap:14px;

    padding:18px;

    border:1px solid #f0f0f5;

    border-radius:14px;

    margin-bottom:14px;
}

.pub-alert-icon{

    width:42px;
    height:42px;

    background:#f5f3ff;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.pub-alert-btn{

    display:block;

    text-align:center;

    background:#f7f4ff;

    padding:18px;

    border-radius:12px;

    text-decoration:none;

    color:#6d4aff;

    font-weight:700;
}

/* TOOLS */

.pub-tool-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #f0f0f5;
}

.pub-tool-left{

    display:flex;

    gap:12px;

    align-items:center;
}

.pub-tool-icon{

    width:38px;
    height:38px;

    background:#f5f3ff;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.pub-tool-item h4{

    font-size:14px;

    margin-bottom:3px;
}

.pub-tool-item p{

    font-size:12px;

    color:#6b7280;
}

/* RESPONSIVE */

@media(max-width:991px){

    .pub-monitoring-section .container{

        grid-template-columns:1fr;
    }

}
.pub-section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;
}

.pub-section-badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:30px;

    background:#f3efff;

    color:#6d4aff;

    font-size:12px;

    font-weight:700;

    margin-bottom:16px;
}

.pub-section-header h2{

    font-size:48px;

    font-weight:800;

    color:#111827;

    margin-bottom:15px;
}

.pub-section-header h2 span{

    color:#6d4aff;
}

.pub-section-header p{

    font-size:18px;

    color:#6b7280;

    line-height:1.7;
}
/* ==========================
   MANAGEMENT SECTION
========================== */

.pub-management-section{

    padding:80px 0;
}

.pub-management-grid{

    display:grid;

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

    gap:24px;
}

/* CARDS */

.pub-analytics-card,
.pub-adsense-card,
.pub-wordpress-card,
.pub-telegram-card{

    background:#fff;

    border:1px solid #ececf6;

    border-radius:20px;

    padding:24px;

    transition:.3s;
}

.pub-analytics-card:hover,
.pub-adsense-card:hover,
.pub-wordpress-card:hover,
.pub-telegram-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.05);
}

/* TABS */

.pub-tabs{

    display:flex;

    gap:8px;

    margin:18px 0;
}

.pub-tabs span{

    padding:6px 12px;

    border-radius:20px;

    background:#f5f3ff;

    font-size:12px;
}

.pub-tabs .active{

    color:#6d4aff;

    font-weight:700;
}

.pub-main-chart{

    margin-bottom:20px;
}

.pub-main-chart svg{

    width:100%;
}

/* STATS */

.pub-stats-grid{

    display:grid;

    gap:12px;
}

.pub-stat-box{

    padding:12px;

    border:1px solid #f0f0f5;

    border-radius:12px;
}

.pub-stat-box small{

    color:#16a34a;
}

/* ADSENSE */

.pub-adsense-summary{

    background:
    linear-gradient(
    135deg,
    #6d4aff,
    #9747ff);

    color:#fff;

    padding:20px;

    border-radius:16px;

    margin:20px 0;
}

.pub-adsense-summary h2{

    margin:10px 0;
}

.pub-adsense-metrics{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;
}

.pub-adsense-metrics div{

    border:1px solid #f0f0f5;

    padding:12px;

    border-radius:12px;
}

/* WORDPRESS */

.pub-wordpress-card h3 span{

    display:block;

    color:#6d4aff;
}

.pub-wp-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #f0f0f5;
}

.pub-success{

    color:#16a34a;
}

/* TELEGRAM */

.pub-telegram-card{

    background:
    linear-gradient(
    180deg,
    #6d4aff,
    #4f46e5);

    color:#fff;
}

.pub-chat-window{

    background:#fff;

    color:#111827;

    border-radius:16px;

    padding:15px;

    margin:20px 0;
}

.pub-chat-left,
.pub-chat-right{

    padding:10px 12px;

    border-radius:12px;

    margin-bottom:10px;

    max-width:85%;
}

.pub-chat-left{

    background:#f3f4f6;
}

.pub-chat-right{

    background:#e9f7ef;

    margin-left:auto;
}

/* BUTTON */

.pub-card-btn{

    display:block;

    text-align:center;

    padding:14px;

    border-radius:12px;

    background:#f5f2ff;

    color:#6d4aff;

    text-decoration:none;

    font-weight:700;
}

.pub-telegram-card .pub-card-btn{

    background:#fff;

    color:#4f46e5;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .pub-management-grid{

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

@media(max-width:768px){

    .pub-management-grid{

        grid-template-columns:1fr;
    }
}
/* =====================================
   BENEFITS SECTION
===================================== */

.pub-benefits-section{

    padding:25px 0 40px;
}

.pub-benefits-section .container{

    display:grid;

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

    gap:0;

    border-top:1px solid #ececf6;
}

.pub-benefit-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:25px 30px;

    border-right:1px solid #ececf6;
}

.pub-no-border{

    border-right:none;
}

.pub-benefit-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.pub-benefit-icon svg{

    width:26px;

    height:26px;
}

/* Colors */

.pub-benefit-item:nth-child(1)
.pub-benefit-icon{

    color:#7c4dff;
}

.pub-benefit-item:nth-child(2)
.pub-benefit-icon{

    color:#06b6d4;
}

.pub-benefit-item:nth-child(3)
.pub-benefit-icon{

    color:#7c3aed;
}

.pub-benefit-item:nth-child(4)
.pub-benefit-icon{

    color:#14b8a6;
}

.pub-benefit-content h4{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:5px;
}

.pub-benefit-content p{

    font-size:13px;

    line-height:1.6;

    color:#6b7280;
}

/* =====================================
   TABLET
===================================== */

@media(max-width:991px){

    .pub-benefits-section .container{

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

    .pub-benefit-item:nth-child(2){

        border-right:none;
    }

}

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

@media(max-width:576px){

    .pub-benefits-section .container{

        grid-template-columns:1fr;
    }

    .pub-benefit-item{

        border-right:none;

        border-bottom:1px solid #ececf6;

        padding:20px;
    }

    .pub-benefit-item:last-child{

        border-bottom:none;
    }

}
/* ==================================
   CTA BANNER
================================== */

.pub-cta-banner{

    padding:0 0 80px;
}

.pub-cta-banner .container{

    background:
    linear-gradient(
        135deg,
        #4f1fff,
        #6d4aff,
        #8b5cff
    );

    border-radius:18px;

    display:grid;

    grid-template-columns:
    1.2fr
    1fr
    1.2fr;

    align-items:center;

    overflow:hidden;

    position:relative;
}

.pub-cta-left,
.pub-cta-center,
.pub-cta-right{

    padding:30px;
}

.pub-cta-center{

    border-left:1px solid rgba(255,255,255,.15);

    border-right:1px solid rgba(255,255,255,.15);
}

/* LEFT */

.pub-cta-left{

    color:#fff;
}

.pub-cta-icon{

    width:48px;
    height:48px;

    border-radius:14px;

    background:rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;
}

.pub-cta-icon svg{

    width:24px;
    height:24px;
}

.pub-cta-left h4{

    font-size:18px;

    margin-bottom:4px;
}

.pub-cta-left p{

    font-size:15px;

    opacity:.95;
}

/* AVATARS */

.pub-user-stack{

    display:flex;

    align-items:center;

    margin-top:20px;
}

.pub-user-stack img{

    width:42px;
    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #fff;

    margin-left:-10px;
}

.pub-user-stack img:first-child{

    margin-left:0;
}

.pub-user-stack span{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#fff;

    color:#6d4aff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-left:-10px;
}

/* CENTER */

.pub-cta-center{

    color:#fff;
}

.pub-cta-center h3{

    font-size:42px;

    line-height:1.25;

    font-weight:400;
}

.pub-cta-center strong{

    font-weight:800;
}

/* RIGHT */

.pub-cta-right{

    color:#fff;

    text-align:center;
}

.pub-cta-right h3{

    font-size:28px;

    margin-bottom:10px;
}

.pub-cta-right p{

    opacity:.9;

    margin-bottom:20px;
}

.pub-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    color:#6d4aff;

    text-decoration:none;

    padding:16px 32px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;
}

.pub-cta-btn:hover{

    transform:translateY(-3px);
}

.pub-cta-btn svg{

    width:18px;
    height:18px;
}

/* ==========================
   TABLET
========================== */

@media(max-width:991px){

    .pub-cta-banner .container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .pub-cta-center{

        border:none;

        border-top:1px solid rgba(255,255,255,.15);

        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .pub-user-stack{

        justify-content:center;
    }

}

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

@media(max-width:576px){

    .pub-cta-left,
    .pub-cta-center,
    .pub-cta-right{

        padding:24px;
    }

    .pub-cta-center h3{

        font-size:30px;
    }

    .pub-cta-right h3{

        font-size:22px;
    }

    .pub-cta-btn{

        width:100%;

        justify-content:center;
    }

}