/* =====================================================
   SELLER LANDING
===================================================== */

.seller-landing{
    padding:30px 0 70px;
} 


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

.seller-hero{
    margin-bottom:30px;
}

.seller-hero-card{
    position:relative;
    overflow:hidden;

    padding:80px 60px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #3b82f6 50%,
            #4f46e5 100%
        );

    color:#fff;

    box-shadow:
        0 30px 60px rgba(37,99,235,.20);
}

.seller-hero-card::before{
    content:'';

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}

.seller-hero-card::after{
    content:'';

    position:absolute;

    width:320px;
    height:320px;

    left:-120px;
    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.05);
}

.seller-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

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

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(10px);

    border-radius:999px;

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

    margin-bottom:24px;
}

.seller-badge i{
    font-size:16px;
}

.seller-hero h1{
    font-size:56px;
    line-height:1.15;
    font-weight:800;

    max-width:950px;

    margin:0 auto 24px;
}

.seller-hero-text{
    max-width:820px;

    margin:0 auto;

    font-size:19px;
    line-height:1.8;

    color:rgba(255,255,255,.90);
}


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

.seller-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;

    margin-top:35px;
}

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

    text-decoration:none;

    padding:15px 28px;

    border-radius:14px;

    font-weight:600;

    transition:.25s ease;
}

.seller-btn i{
    font-size:16px;
}

.seller-btn-primary{
    background:#fff;
    color:#2563eb;
}

.seller-btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}

.seller-btn-secondary{
    background:rgba(255,255,255,.12);

    color:#fff;

    border:1px solid rgba(255,255,255,.18);
}

.seller-btn-secondary:hover{
    background:rgba(255,255,255,.18);
}


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

.seller-metrics{
    display:grid;

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

    gap:20px;

    margin-top:-40px;
    margin-bottom:60px;

    position:relative;
    z-index:10;
}

.seller-metric-card{
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    padding:28px;

    text-align:center;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
}

.metric-icon{
    width:64px;
    height:64px;

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

    margin:0 auto 16px;

    border-radius:18px;

    background:#eff6ff;

    color:#2563eb;

    font-size:28px;
}

.metric-value{
    font-size:32px;
    font-weight:800;

    color:#0f172a;

    margin-bottom:6px;
}

.metric-label{
    font-size:14px;
    color:#64748b;
}


/* =====================================================
   SECTIONS
===================================================== */

.seller-section{
    margin-top:70px;
}

.seller-section h2{
    text-align:center;

    font-size:38px;
    font-weight:800;

    margin-bottom:36px;

    color:#0f172a;
}


/* =====================================================
   ADVANTAGES
===================================================== */

.seller-grid{
    display:grid;

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

    gap:24px;
}

.seller-card{
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    padding:30px;

    transition:.25s ease;
}

.seller-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);
}

.seller-card-icon{
    width:58px;
    height:58px;

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

    margin-bottom:20px;

    border-radius:16px;

    background:#eff6ff;

    color:#2563eb;

    font-size:26px;
}

.seller-card h3{
    font-size:21px;

    margin-bottom:14px;

    color:#0f172a;
}

.seller-card p{
    color:#64748b;

    line-height:1.8;
}


/* =====================================================
   PAYOUTS
===================================================== */

.seller-highlight{
    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:28px;

    padding:40px;
}

.seller-features{
    display:grid;

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

    gap:20px;

    margin-top:30px;
}

.feature-box{
    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:18px;

    padding:24px;

    text-align:center;
}

.feature-icon{
    width:56px;
    height:56px;

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

    margin:0 auto 16px;

    border-radius:14px;

    background:#eff6ff;

    color:#2563eb;

    font-size:24px;
}

.feature-box strong{
    display:block;

    margin-bottom:10px;

    color:#0f172a;
}

.feature-box p{
    margin:0;

    color:#64748b;
}


/* =====================================================
   VIP
===================================================== */

.seller-vip{

    padding:50px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#fff;
}

.vip-badge{

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

    margin-bottom:24px;

    padding:10px 18px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #fbbf24
        );

    color:#111827;

    font-weight:700;
}

.seller-vip h2{
    color:#fff;

    text-align:left;

    margin-bottom:20px;
}

.seller-vip p{
    color:rgba(255,255,255,.80);

    line-height:1.8;
}

.seller-vip ul{
    list-style:none;

    margin:30px 0;

    padding:0;
}

.seller-vip li{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:16px;
}

.seller-vip li i{
    color:#22c55e;
}


/* =====================================================
   STEPS
===================================================== */

.seller-steps{
    display:grid;

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

    gap:20px;
}

.seller-step{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    padding:30px;

    text-align:center;
}

.seller-step span{

    width:56px;
    height:56px;

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

    margin:0 auto 18px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

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

.seller-step p{
    margin:0;

    font-weight:500;
}


/* =====================================================
   FAQ
===================================================== */

.faq-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.faq-item{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:18px;

    padding:24px;
}

.faq-item h3{

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

    margin-bottom:12px;

    color:#0f172a;
}

.faq-item h3 i{
    color:#2563eb;
}

.faq-item p{
    color:#64748b;

    line-height:1.8;

    margin:0;
}


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

.seller-cta{

    margin-top:80px;

    padding:70px 50px;

    text-align:center;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color:#fff;
}

.seller-cta h2{
    color:#fff;

    margin-bottom:18px;
}

.seller-cta p{
    max-width:760px;

    margin:0 auto;

    color:rgba(255,255,255,.90);

    line-height:1.8;
}


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

@media(max-width:992px){

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

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

    .seller-metrics{
        grid-template-columns:repeat(2,1fr);
        margin-top:20px;
    }

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

    .seller-hero h1{
        font-size:42px;
    }
}


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

@media(max-width:768px){

    .seller-landing{
        padding:15px 0 50px;
    }

    .seller-hero-card{
        padding:35px 24px;
    }

    .seller-hero h1{
        font-size:32px;
        line-height:1.25;
    }

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

    .seller-grid,
    .seller-features,
    .seller-steps,
    .seller-metrics{
        grid-template-columns:1fr;
    }

    .seller-actions{
        flex-direction:column;
    }

    .seller-btn{
        width:100%;
    }

    .seller-vip{
        padding:30px 24px;
    }

    .seller-highlight{
        padding:24px;
    }

    .seller-cta{
        padding:40px 24px;
    }

    .seller-section h2{
        font-size:28px;
    }
}