/* ==========================================
   PRICING
========================================== */

#pricing{

    padding:140px 0;

    background:#f8f7f5;

}

#pricing .container{

    max-width:1500px;

    margin:auto;

}

/* ==========================================
   BILLING TOGGLE
========================================== */

.billing-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:50px 0 70px;

}

.billing-toggle button{

    width:130px;

    height:54px;

    border:none;

    border-radius:999px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.billing-toggle button.active{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

}

.billing-toggle button:hover{

    border-color:#2563eb;

}

.billing-toggle span{

    padding:14px 24px;

    background:#e9f9ef;

    color:#16a34a;

    border-radius:999px;

    font-size:16px;

    font-weight:600;

}

/* ==========================================
   MAIN GRID
========================================== */

.pricing-grid{

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:28px;

    align-items:start;

}

/* ==========================================
   PLANS
========================================== */

.pricing-plans{

    display:grid;

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

    gap:28px;

}

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

.pricing-card{

    position:relative;

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:26px;

    padding:34px;

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

}

.pricing-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:
        0 22px 60px rgba(0,0,0,.08);

}

/* ==========================================
   FEATURED
========================================== */

.pricing-card.featured{

    border:2px solid #2563eb;

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

}

.popular-badge{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:#2563eb;

    color:#ffffff;

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

}

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

.plan-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:34px;

}

.plan-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eef4ff;

    color:#2563eb;

    font-size:32px;

    flex-shrink:0;

}

.plan-icon.creator{

    background:#f4efff;

    color:#7c3aed;

}

.plan-icon.studio{

    background:#eef4ff;

    color:#2563eb;

}

.plan-header h3{

    font-size:22px;

    color:#111827;

    margin-bottom:6px;

}

.plan-header p{

    font-size:16px;

    color:#6b7280;

    line-height:1.6;

}

/* ==========================================
   PRICE
========================================== */

.plan-price{

    text-align:center;

    margin-bottom:28px;

}

.plan-price h2{

    font-size:64px;

    font-weight:700;

    color:#111827;

    line-height:1;

}

.plan-price span{

    display:block;

    margin-top:10px;

    color:#2563eb;

    font-size:20px;

    font-weight:600;

}

.plan-price small{

    display:block;

    margin-top:10px;

    color:#6b7280;

    font-size:16px;

}

/* ==========================================
   DIVIDER
========================================== */

.pricing-card hr{

    border:none;

    border-top:1px solid #edf2f7;

    margin:28px 0;

}

/* ==========================================
   FEATURES
========================================== */

.pricing-card ul{

    list-style:none;

    padding:0;

    margin:0 0 36px;

}

.pricing-card li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:18px;

    color:#1f2937;

}

.pricing-card li i{

    color:#2563eb;

    font-size:18px;

}

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

.pricing-card .btn-outline,
.pricing-card .btn-primary,
.pricing-card .btn-gradient{

    width:100%;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    border-radius:14px;

    font-weight:600;

    transition:.30s;

}

.pricing-card .btn-outline{

    border:2px solid #2563eb;

    color:#2563eb;

    background:#ffffff;

}

.pricing-card .btn-outline:hover{

    background:#2563eb;

    color:#ffffff;

}

.pricing-card .btn-primary{

    background:#2563eb;

    color:#ffffff;

}

.pricing-card .btn-primary:hover{

    background:#1d4ed8;

}

.pricing-card .btn-gradient{

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    color:#ffffff;

}

.pricing-card .btn-gradient:hover{

    opacity:.92;

}

/* ==========================================
   SIDEBAR
========================================== */

.pricing-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ==========================================
   SIDEBAR CARD
========================================== */

.sidebar-card,
.hosting-box{

    background:#ffffff;

    border:1px solid #edf2f7;

    border-radius:24px;

    padding:30px;

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

}

.sidebar-card:hover,
.hosting-box:hover{

    transform:translateY(-4px);

    border-color:#2563eb;

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

}

.sidebar-card h3,
.hosting-box h3{

    font-size:30px;

    color:#111827;

    margin-bottom:28px;

}

/* ==========================================
   FEATURE ITEM
========================================== */

.feature-item{

    display:flex;

    gap:18px;

    margin-bottom:26px;

}

.feature-item:last-child{

    margin-bottom:0;

}

.feature-item i{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    background:#eef4ff;

    color:#2563eb;

    flex-shrink:0;

}

.feature-item h4{

    font-size:20px;

    color:#111827;

    margin-bottom:8px;

}

.feature-item p{

    font-size:16px;

    line-height:1.7;

    color:#6b7280;

}

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

.hosting-info{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:26px;

}

.hosting-info img{

    width:72px;

    height:72px;

    border-radius:16px;

    object-fit:cover;

}

.hosting-info h4{

    font-size:24px;

    margin-bottom:8px;

    color:#111827;

}

.hosting-info p{

    font-size:16px;

    line-height:1.7;

    color:#6b7280;

}

.hosting-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

}

.hosting-actions>a:first-child{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

.hosting-actions .btn-outline{

    padding:14px 24px;

}

/* ==========================================
   DOWNLOAD BANNER
========================================== */

.download-banner{

    margin-top:70px;

    display:grid;

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

    gap:26px;

    padding:34px;

    border:1px solid #edf2f7;

    border-radius:26px;

    background:#ffffff;

    box-shadow:
        0 12px 40px rgba(0,0,0,.04);

}

.download-left{

    display:flex;

    align-items:center;

    gap:24px;

}

.download-left i{

    width:82px;

    height:82px;

    border-radius:50%;

    background:#2563eb;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

.download-left h3{

    font-size:36px;

    margin-bottom:10px;

    color:#111827;

}

.download-left p{

    font-size:18px;

    line-height:1.8;

    color:#6b7280;

}

/* ==========================================
   DOWNLOAD MIDDLE
========================================== */

.download-middle{

    background:#f8fafc;

    border-radius:18px;

    padding:24px;

}

.download-middle h4{

    font-size:22px;

    margin-bottom:18px;

    color:#111827;

}

.download-middle ul{

    list-style:none;

    padding:0;

    margin:0;

}

.download-middle li{

    margin-bottom:12px;

    font-size:17px;

    color:#374151;

}

/* ==========================================
   DOWNLOAD RIGHT
========================================== */

.download-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

}

.download-right .btn-primary{

    width:100%;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#2563eb;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

}

.download-right .btn-primary:hover{

    background:#1d4ed8;

}

.download-right small{

    color:#6b7280;

}

.download-right>a:last-child{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

}

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

.pricing-footer{

    display:grid;

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

    gap:22px;

    margin-top:40px;

}

.pricing-footer>div{

    display:flex;

    align-items:center;

    gap:18px;

    padding:26px;

    border:1px solid #edf2f7;

    border-radius:20px;

    background:#ffffff;

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

}

.pricing-footer>div:hover{

    transform:translateY(-4px);

    border-color:#2563eb;

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

}

.pricing-footer i{

    font-size:32px;

    color:#2563eb;

}

.pricing-footer h4{

    font-size:20px;

    margin-bottom:6px;

    color:#111827;

}

.pricing-footer p{

    font-size:16px;

    color:#6b7280;

    line-height:1.6;

}

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

@media(max-width:1400px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:1200px){

    .pricing-plans{

        grid-template-columns:1fr;

    }

    .download-banner{

        grid-template-columns:1fr;

    }

    .pricing-footer{

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

    }

}

@media(max-width:768px){

    #pricing{

        padding:90px 0;

    }

    .billing-toggle{

        flex-wrap:wrap;

    }

    .download-left{

        flex-direction:column;

        text-align:center;

    }

    .hosting-actions{

        flex-direction:column;

        align-items:flex-start;

    }

    .pricing-footer{

        grid-template-columns:1fr;

    }

}

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

.why-wio{

    margin-top:90px;

}

.why-wio .section-heading{

    margin-bottom:70px;

}

.why-wio .section-heading h2{

    font-size:64px;

    margin-bottom:22px;

}

.why-wio .section-heading p{

    max-width:900px;

    margin:auto;

    font-size:24px;

    line-height:1.8;

    color:#6b7280;

}

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

.why-grid{

    display:grid;

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

    gap:90px;

}

.why-column{

    display:flex;

    flex-direction:column;

    gap:42px;

}

/* ==========================================
   FEATURE
========================================== */

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:24px;

    transition:.30s ease;

}

.feature-item:hover{

    transform:translateY(-4px);

}

/* ==========================================
   ICON
========================================== */

.feature-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    background:#eef4ff;

    flex-shrink:0;

}

.feature-icon i{

    font-size:30px;

    color:#2563eb;

}

/* ==========================================
   CONTENT
========================================== */

.feature-content h3{

    font-size:36px;

    font-weight:700;

    color:#111827;

    margin-bottom:12px;

}

.feature-content p{

    font-size:20px;

    line-height:1.8;

    color:#6b7280;

}

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

@media(max-width:1200px){

    .why-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media(max-width:768px){

    .why-wio{

        margin-top:70px;

    }

    .why-wio .section-heading{

        margin-bottom:50px;

    }

    .why-wio .section-heading h2{

        font-size:42px;

    }

    .why-wio .section-heading p{

        font-size:18px;

    }

    .feature-item{

        gap:18px;

    }

    .feature-icon{

        width:60px;

        height:60px;

        border-radius:18px;

    }

    .feature-icon i{

        font-size:24px;

    }

    .feature-content h3{

        font-size:24px;

    }

    .feature-content p{

        font-size:17px;

    }

}