/* ==========================================
   MARKETPLACE
========================================== */

#marketplace{

    padding:140px 0;

    background:#ffffff;

}

#marketplace .container{

    max-width:1500px;

    width:100%;

    margin:0 auto;

}

/* ==========================================
   TOP GRID
========================================== */

.marketplace-grid{

    display:grid;

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

    gap:32px;

    align-items:start;

    margin-top:70px;

}

/* ==========================================
   PANELS
========================================== */

.marketplace-panel,
.download-panel{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:28px;

    padding:36px;

    min-width:0;

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

}

/* ==========================================
   PANEL HEADER
========================================== */

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    margin-bottom:28px;

}

.panel-title{

    display:flex;

    align-items:center;

    gap:18px;

    flex:1;

    min-width:0;

}

.panel-title i{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border-radius:16px;

    background:#eff6ff;

    color:#2563eb;

    font-size:24px;

}

.panel-title h3{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#111827;

    line-height:1.2;

}

.panel-header>a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#2563eb;

    font-weight:600;

    white-space:nowrap;

}

/* ==========================================
   DESCRIPTION
========================================== */

.panel-description{

    margin-bottom:34px;

    font-size:18px;

    line-height:1.8;

    color:#6b7280;

}

/* ==========================================
   MARKETPLACE CATEGORIES
========================================== */

.marketplace-categories{

    display:grid;

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

    gap:22px;

}

.category-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:28px;

    border:1px solid #e5e7eb;

    border-radius:20px;

    background:#ffffff;

    min-width:0;

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

}

.category-card:hover{

    transform:translateY(-4px);

    border-color:#2563eb;

    box-shadow:
        0 18px 45px rgba(37,99,235,.08);

}

.category-card i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

    border-radius:16px;

    background:#eff6ff;

    color:#2563eb;

    font-size:24px;

    flex-shrink:0;

}

.category-card h4{

    margin:0 0 10px;

    font-size:22px;

    font-weight:700;

    color:#111827;

    line-height:1.3;

}

.category-card p{

    margin:0;

    color:#6b7280;

    line-height:1.8;

    font-size:16px;

}

/* ==========================================
   DOWNLOAD CARD
========================================== */

.download-card{

    display:flex;

    align-items:center;

    gap:28px;

    padding:28px;

    margin-bottom:30px;

    border:1px solid #e5e7eb;

    border-radius:20px;

    background:#ffffff;

}

.download-info{

    flex:1;

    min-width:0;

}

.download-info h4{

    margin:0 0 10px;

    font-size:24px;

    font-weight:700;

    color:#111827;

}

.download-info p{

    margin:0;

    color:#6b7280;

    line-height:1.8;

    font-size:17px;

}

.download-card .btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:0 28px;

    height:58px;

    flex-shrink:0;

    border-radius:14px;

    background:#2563eb;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

}

/* ==========================================
   DOWNLOAD BENEFITS
========================================== */

.download-benefits{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}

.download-benefits div{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    color:#374151;

    font-size:16px;

}

.download-benefits i{

    color:#2563eb;

    flex-shrink:0;

}

/* ==========================================
   HOSTING CARD
========================================== */

.hosting-card{

    padding:26px;

    border:1px solid #e5e7eb;

    border-radius:20px;

    background:#ffffff;

}

.hosting-card h4{

    margin:0 0 12px;

    font-size:24px;

    font-weight:700;

    color:#111827;

}

.hosting-card p{

    margin:0 0 24px;

    color:#6b7280;

    line-height:1.8;

    font-size:17px;

}

.hosting-card .btn-outline-hosting{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 28px;

    border:2px solid #2563eb;

    border-radius:14px;

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

/* ==========================================
   POPULAR SECTION
========================================== */

.popular-section{

    margin-top:80px;

}

.popular-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;

    gap:24px;

}

.popular-header h3{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#111827;

}

.popular-header a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

    white-space:nowrap;

}

/* ==========================================
   POPULAR GRID
========================================== */

.popular-grid{

    display:grid;

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

    gap:24px;

}

/* ==========================================
   POPULAR CARD
========================================== */

.popular-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:20px;

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

}

.popular-card:hover{

    transform:translateY(-5px);

    border-color:#2563eb;

    box-shadow:
        0 18px 45px rgba(37,99,235,.08);

}

.popular-card img{

    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

}

.popular-card-body{

    padding:22px;

}

.popular-card-body h4{

    margin:0 0 14px;

    font-size:20px;

    font-weight:700;

    color:#111827;

    line-height:1.3;

}

.popular-card-body span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    letter-spacing:.6px;

}

/* ==========================================
   MARKETPLACE FOOTER
========================================== */

.marketplace-footer{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}

.marketplace-footer>div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:24px;

    min-width:0;

    border:1px solid #e5e7eb;

    border-radius:18px;

    background:#ffffff;

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

}

.marketplace-footer>div:hover{

    transform:translateY(-4px);

    border-color:#2563eb;

    box-shadow:
        0 18px 45px rgba(37,99,235,.08);

}

.marketplace-footer i{

    font-size:22px;

    color:#2563eb;

    flex-shrink:0;

}

.marketplace-footer span{

    font-size:17px;

    font-weight:600;

    color:#374151;

    text-align:center;

}