/*
====================================================
Converigo
Global Style
Version : 3.1.0

Theme:
- Light SaaS UI
- Modern Converter Layout
- AdSense Friendly
====================================================
*/


/* ==========================================
   ROOT
========================================== */


:root {


    color-scheme: light;


    --bg:#f8fafc;


    --surface:#ffffff;


    --surface-soft:#f1f5f9;


    --surface-dark:#0f172a;


    --text:#0f172a;


    --muted:#64748b;


    --accent:#2563eb;


    --accent-hover:#1d4ed8;


    --accent-soft:rgba(
        37,
        99,
        235,
        .12
    );


    --success:#16a34a;


    --border:#e2e8f0;


    --radius:24px;


    --shadow:

        0 20px 60px

        rgba(
            15,
            23,
            42,
            .08
        );


    --container:1120px;



    font-family:

        Inter,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;


}







/* ==========================================
   RESET
========================================== */


* {


    box-sizing:border-box;


}





html {


    scroll-behavior:smooth;


}





body {


    margin:0;


    min-height:100vh;


    overflow-x:hidden;


    background:var(--bg);


    color:var(--text);


}







img {


    max-width:100%;


    display:block;


}





a {


    text-decoration:none;


    color:inherit;


}





button,


input {


    font-family:inherit;


}







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


.container {


    width:min(

        var(--container),

        calc(100% - 40px)

    );


    margin:auto;


}







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


.site-header {


    position:sticky;


    top:0;


    z-index:50;


    background:

        rgba(

            255,

            255,

            255,

            .85

        );


    backdrop-filter:

        blur(15px);


    border-bottom:

        1px solid var(--border);


}







.nav-wrap {


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:18px 0;


}







.brand {


    display:flex;


    align-items:center;


    gap:12px;


    font-size:24px;


    font-weight:800;


    color:var(--text);


    text-decoration:none;


}



.brand img {
    width:48px;
    height:48px;
    max-width:48px;
    object-fit:contain;
    display:block;
    background: transparent !important;
    border: none;
    box-shadow: none;
    padding: 0;
    flex-shrink:0;
}


.brand span {


    line-height:1;


}


@media (max-width: 768px) {


    .brand {


        font-size:20px;


        gap:10px;


    }


    .brand img {
        width:48px;
        height:48px;
    }


}







.primary-nav {


    display:flex;


    align-items:center;


    gap:25px;


}







.nav-list {


    display:flex;


    list-style:none;


    gap:25px;


    padding:0;


    margin:0;


}







.nav-list a {


    color:var(--muted);


    font-weight:500;


}







.nav-list a:hover {


    color:var(--accent);


}







/* ==========================================
   BUTTON SYSTEM
========================================== */


.btn {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;


    border:none;


    cursor:pointer;


    padding:

        12px 24px;


    border-radius:

        14px;


    font-weight:700;


    transition:.25s ease;


}







.btn:hover {


    transform:

        translateY(-2px);


}







.btn-primary {


    background:

        linear-gradient(

            135deg,

            var(--accent),

            var(--accent-hover)

        );


    color:white;


}







.btn-success {


    background:

        linear-gradient(

            135deg,

            #22c55e,

            #16a34a

        );


    color:white;


}







.btn:disabled {


    opacity:.5;


    cursor:not-allowed;


    transform:none;


}/* ==========================================
   HERO SECTION
========================================== */


.hero {


    padding:

        70px 0

        40px;


}







.hero-inner {


    text-align:center;


    max-width:850px;


    margin:auto;


}







.eyebrow {


    display:inline-flex;


    align-items:center;


    padding:

        8px 16px;


    border-radius:

        999px;


    background:

        var(--accent-soft);


    color:

        var(--accent);


    font-size:

        14px;


    font-weight:

        700;


    margin-bottom:

        20px;


}







.hero-title {


    margin:0;


    font-size:

        clamp(

            42px,

            6vw,

            72px

        );


    line-height:

        1.05;


    font-weight:

        800;


    letter-spacing:

        -1px;


}







.hero-sub {


    max-width:

        700px;


    margin:

        25px auto 0;


    color:

        var(--muted);


    font-size:

        18px;


    line-height:

        1.7;


}







/* ==========================================
   UPLOAD AREA
========================================== */


.upload-wrapper {


    margin-top:

        20px;


    padding-bottom:

        70px;


}







.upload-card {


    width:

        100%;


    max-width:

        560px;


    margin:

        auto;


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        var(--radius);


    padding:

        35px;


    box-shadow:

        var(--shadow);


    display:

        flex;


    flex-direction:

        column;
    .brand img {
        width:40px;
        height:40px;
        max-width:40px;
        object-fit:contain;
    }

}







/* ==========================================
   DROP ZONE
========================================== */

/* Upload drop-zone visuals are handled by the dedicated upload-card component stylesheet. */

/* ==========================================
   FILE INFO
========================================== */


.selected-file {


    width:

        100%;


    text-align:

        center;


    margin-top:

        20px;


    padding:

        12px;


    border-radius:

        12px;


    background:

        var(--surface-soft);


}







#fileName {


    font-weight:

        700;


}







#fileSize {


    margin-top:

        5px;


    color:

        var(--muted);


}







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


.supported-formats {


    display:

        flex;


    justify-content:

        center;


    flex-wrap:

        wrap;


    gap:

        12px;


    margin:

        20px 0;


}







.format-btn {


    min-width:

        70px;


    padding:

        10px 18px;


    border-radius:

        12px;


    border:

        2px solid var(--accent);


    background:

        white;


    color:

        var(--accent);


    font-weight:

        700;


    cursor:

        pointer;


    transition:

        .25s ease;


}







.format-btn:hover {


    background:

        var(--accent-soft);


}







.format-btn.active {


    background:

        var(--accent);


    color:

        white;


    transform:

        translateY(-2px);


    box-shadow:

        0 10px 25px

        rgba(

            37,

            99,

            235,

            .25

        );


}







/* ==========================================
   CONVERT AREA
========================================== */


#convertBtn {


    margin-top:

        20px;


    min-width:

        160px;


    height:

        48px;


}







.conversion-status {


    min-height:

        25px;


    text-align:

        center;


    margin-top:

        15px;


    color:

        var(--muted);


}







.download-btn {


    margin-top:

        20px;


}







/* ==========================================
   PROGRESS
========================================== */


.progress {


    width:

        100%;


    height:

        8px;


    margin-top:

        20px;


    background:

        #e2e8f0;


    border-radius:

        999px;


    overflow:

        hidden;


}







.progress-bar {


    width:

        0%;


    height:

        100%;


    background:

        linear-gradient(

            90deg,

            var(--accent),

            #60a5fa

        );


    transition:

        .3s ease;


}/* ==========================================
   SMART PANEL
========================================== */


.smart-panel {


    width:

        100%;


    max-width:

        720px;


    margin:

        35px auto 0;


    display:

        grid;


    grid-template-columns:

        repeat(

            2,

            minmax(

                0,

                1fr

            )

        );


    gap:

        20px;


}







.smart-item {


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        20px;


    padding:

        22px;


    box-shadow:

        0 10px 30px

        rgba(

            15,

            23,

            42,

            .05

        );


}







.smart-item h3 {


    margin-top:

        0;


    margin-bottom:

        15px;


}







.detected-card {


    line-height:

        1.8;


}







.recommend-card {


    line-height:

        1.7;


}







.badge {


    display:

        inline-flex;


    padding:

        5px 12px;


    border-radius:

        999px;


    background:

        var(--accent-soft);


    color:

        var(--accent);


    font-size:

        13px;


    font-weight:

        700;


}







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


.section {


    padding:

        70px 0;


}







.section-title {


    text-align:center;


    font-size:

        32px;


    margin-bottom:

        40px;


}

.faq-list {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

}

@media(max-width:700px){

    .faq-list {

        grid-template-columns:1fr;

    }

}








.features-grid {


    display:

        grid;


    grid-template-columns:

        repeat(

            3,

            1fr

        );


    gap:

        25px;


}







.card {


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        22px;


    padding:

        25px;


    box-shadow:

        0 10px 30px

        rgba(

            15,

            23,

            42,

            .05

        );


}







.card h3 {


    margin-top:

        0;


}







.card p {


    color:

        var(--muted);


    line-height:

        1.7;


}







/* ==========================================
   POPULAR CONVERTERS
========================================== */


.popular-grid {


    display:

        grid;


    grid-template-columns:

        repeat(

            4,

            1fr

        );


    gap:

        20px;


}







.converter-card {


    background:

        var(--surface);


    border:

        1px solid var(--border);


    border-radius:

        20px;


    padding:

        22px;


    transition:

        .25s ease;


}







.converter-card:hover {


    transform:

        translateY(-4px);


    box-shadow:

        var(--shadow);


}







.converter-card h3 {


    margin-top:

        0;


}







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


.site-footer {


    margin-top:

        60px;


    padding:

        40px 0;


    border-top:

        1px solid var(--border);


    color:

        var(--muted);


    text-align:

        center;


}







/* ==========================================
   LOADING BUTTON
========================================== */


#convertBtn.loading {


    position:

        relative;


    opacity:

        .85;


}





#convertBtn.loading::after {


    content:"";


    width:

        14px;


    height:

        14px;


    border:

        2px solid white;


    border-top-color:

        transparent;


    border-radius:

        50%;


    display:

        inline-block;


    margin-left:

        8px;


    animation:

        spin .8s linear infinite;


}







@keyframes spin {


    from {


        transform:

            rotate(0deg);


    }


    to {


        transform:

            rotate(360deg);


    }


}







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


.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
}

.header-right {
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
}

@media (max-width: 480px) {
    .container {
        width:calc(100% - 20px);
    }

    .header-inner {
        flex-wrap:wrap;
        gap:10px;
    }

    .header-right {
        width:100%;
        justify-content:space-between;
        gap:10px;
        margin-left:0;
    }

    .logo {
        font-size:20px;
        gap:8px;
    }

    .logo img {
        width:40px;
        height:40px;
    }

    .main-nav {
        gap:10px;
    }

    .main-nav a {
        font-size:14px;
    }

    .header-actions {
        gap:8px;
    }

    .header-actions .btn,
    .btn {
        min-height:44px;
        padding:10px 12px;
        font-size:13px;
        white-space:nowrap;
    }
}

@media(max-width:900px){



    .features-grid {


        grid-template-columns:

            1fr;


    }



    .popular-grid {


        grid-template-columns:

            repeat(

                2,

                1fr

            );


    }



}







@media(max-width:700px){



    .hero {


        padding-top:

            40px;


    }





    .hero-title {


        font-size:

            42px;


    }





    .upload-card {


        padding:

            20px;


    }





    .smart-panel {


        grid-template-columns:

            1fr;


    }



}







@media(max-width:500px){



    .container {


        width:

            calc(

                100% - 24px

            );


    }





    .hero-title {


        font-size:

            34px;


    }





    .popular-grid {


        grid-template-columns:

            1fr;


    }





    .format-btn {


        min-width:

            60px;


        padding:

            9px 14px;


    }



}