/*==================================================
                GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
}

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

:root{

    --bg:#09090B;

    --card:#18181B;

    --card-hover:#202024;

    --primary:#EF4444;

    --primary-dark:#DC2626;

    --accent:#F87171;

    --text:#FAFAFA;

    --text-light:#A1A1AA;

    --border:rgba(255,255,255,.08);

    --shadow:
    0 15px 40px rgba(0,0,0,.35);

    --radius:24px;

    --transition:.35s ease;

}

/*==================================================
                    BODY
==================================================*/

body{

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/*==================================================
            PREMIUM BACKGROUND
==================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 10% 15%,
    rgba(239,68,68,.08),
    transparent 28%),

    radial-gradient(circle at 90% 85%,
    rgba(220,38,38,.08),
    transparent 30%),

    linear-gradient(
    180deg,
    #09090B,
    #0D0D10);

    z-index:-3;

}

/*==================================================
            BACKGROUND GLOW
==================================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle,
    rgba(239,68,68,.08),
    transparent 65%);

    filter:blur(120px);

    z-index:-2;

    animation:ambientGlow 10s ease-in-out infinite;

}

@keyframes ambientGlow{

    0%,100%{

        opacity:.35;

        transform:scale(1);

    }

    50%{

        opacity:.6;

        transform:scale(1.15);

    }

}

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

.container{

    width:min(1200px,92%);

    margin:auto;

    padding:80px 0;

}

/*==================================================
            COMMON SECTION GAP
==================================================*/

section{

    margin-bottom:70px;

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

.hero{

    text-align:center;

    max-width:780px;

    margin:0 auto 70px;

}

.hero h1{

    font-size:clamp(2.8rem,6vw,4.6rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:22px;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FFD4D4 45%,
        #EF4444 100%
    );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
    0 0 30px rgba(239,68,68,.15);

}

.hero p{

    max-width:640px;

    margin:auto;

    color:var(--text-light);

    font-size:1.08rem;

    line-height:1.9;

}

/* Small decorative line */

.hero::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:35px auto 0;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

}
/*==================================================
                UPLOAD SECTION
==================================================*/

.upload-section{

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.upload-card{

    position:relative;

    width:100%;

    max-width:720px;

    padding:70px 40px;

    border-radius:28px;

    background:linear-gradient(
        180deg,
        #1B1B1F,
        #151518
    );

    overflow:hidden;

    cursor:pointer;

    text-align:center;

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

    transition:all .35s ease;

    box-shadow:var(--shadow);

}

/* Inner Border */

.upload-card::before{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:27px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

    z-index:0;

}

/*===============================
      NEON BORDER ANIMATION
================================*/

.upload-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:

    radial-gradient(circle,
    rgba(239,68,68,.95),
    transparent 70%);

    filter:blur(30px);

    animation:neonBorder 6s linear infinite;

    opacity:.8;

    pointer-events:none;

}

@keyframes neonBorder{

    0%{

        top:-90px;
        left:-90px;

    }

    25%{

        top:-90px;
        left:calc(100% - 90px);

    }

    50%{

        top:calc(100% - 90px);
        left:calc(100% - 90px);

    }

    75%{

        top:calc(100% - 90px);
        left:-90px;

    }

    100%{

        top:-90px;
        left:-90px;

    }

}

/* Hover */

.upload-card:hover{

    transform:translateY(-8px);

    border-color:rgba(239,68,68,.35);

    box-shadow:

    0 25px 60px rgba(0,0,0,.45),

    0 0 40px rgba(239,68,68,.15);

}

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

.upload-icon{

    position:relative;

    z-index:2;

    width:95px;

    height:95px;

    margin:0 auto 30px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:2rem;

    color:white;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    box-shadow:

    0 10px 30px rgba(239,68,68,.30);

    transition:.35s;

}

.upload-card:hover .upload-icon{

    transform:scale(1.08) rotate(8deg);

}

/*==================================================
                    TEXT
==================================================*/

.upload-card h2{

    position:relative;

    z-index:2;

    font-size:2rem;

    margin-bottom:14px;

}

.upload-card p{

    position:relative;

    z-index:2;

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:22px;

}

.upload-card span{

    position:relative;

    z-index:2;

    display:inline-block;

    padding:11px 20px;

    border-radius:999px;

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.25);

    color:#FCA5A5;

    font-size:.9rem;

    font-weight:600;

}
/*==================================================
                PREVIEW SECTION
==================================================*/

.preview-section{

    display:grid;

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

    gap:28px;

}

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

.preview-card{

    background:linear-gradient(
        180deg,
        #1B1B1F,
        #151518
    );

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

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.preview-card:hover{

    transform:translateY(-6px);

    border-color:rgba(239,68,68,.25);

}

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

.card-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 25px;

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

}

.card-title h3{

    font-size:1.1rem;

    font-weight:700;

}

.card-title span{

    background:rgba(239,68,68,.12);

    color:#FCA5A5;

    padding:7px 16px;

    border-radius:50px;

    font-size:.82rem;

    font-weight:600;

}

/*==================================================
                PREVIEW BOX
==================================================*/

.preview-box{

    position:relative;

    height:340px;

    margin:22px;

    border-radius:22px;

    background:#101013;

    border:2px dashed rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.preview-box img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:none;

}

/*==================================================
            PLACEHOLDER
==================================================*/

.placeholder{

    text-align:center;

    color:var(--text-light);

}

.placeholder i{

    font-size:72px;

    margin-bottom:18px;

    color:var(--primary);

    opacity:.85;

}

.placeholder p{

    font-size:.96rem;

}

/*==================================================
            IMAGE DETAILS
==================================================*/

.image-details{

    display:flex;

    justify-content:space-between;

    padding:0 25px 24px;

}

.image-details small{

    display:block;

    color:var(--text-light);

    margin-bottom:8px;

    font-size:.82rem;

}

.image-details strong{

    font-size:1rem;

    font-weight:600;

}
/*==================================================
                CONTROLS SECTION
==================================================*/

.controls-section{

    background:linear-gradient(
        180deg,
        #1B1B1F,
        #151518
    );

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

    border-radius:28px;

    padding:35px;

    box-shadow:var(--shadow);

}

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

.controls-header{

    margin-bottom:30px;

}

.controls-header h2{

    font-size:1.7rem;

    margin-bottom:10px;

}

.controls-header p{

    color:var(--text-light);

    line-height:1.7;

}

/*==================================================
            WIDTH & HEIGHT
==================================================*/

.dimension-grid{

    display:grid;

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

    gap:22px;

    margin-bottom:28px;

}

.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    font-size:.92rem;

    font-weight:600;

    margin-bottom:10px;

}

.input-group input{

    width:100%;

    height:58px;

    padding:0 18px;

    border-radius:16px;

    background:#101013;

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

    color:var(--text);

    font-size:1rem;

    outline:none;

    transition:var(--transition);

}

.input-group input:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(239,68,68,.12);

}

/*==================================================
            ASPECT RATIO
==================================================*/

.aspect-ratio{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

    cursor:pointer;

    color:var(--text-light);

    font-weight:500;

}

.aspect-ratio input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

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

.preset-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.preset-btn{

    padding:12px 22px;

    border:none;

    border-radius:50px;

    background:#101013;

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

    color:var(--text);

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.preset-btn:hover{

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-3px);

}

.preset-btn:active{

    transform:scale(.96);

}
/*==================================================
                ACTION SECTION
==================================================*/

.action-section{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin:60px 0;

}

.action-section button{

    min-width:220px;

    height:58px;

    border:none;

    border-radius:16px;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}

/* Primary Button */

#resizeBtn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    box-shadow:0 12px 28px rgba(239,68,68,.28);

}

#resizeBtn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 36px rgba(239,68,68,.35);

}

/* Secondary Button */

#downloadBtn{

    background:#101013;

    color:var(--text);

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

}

#downloadBtn:hover{

    background:var(--card-hover);

    border-color:rgba(239,68,68,.3);

    transform:translateY(-4px);

}

/*==================================================
                STATS SECTION
==================================================*/

.stats-section{

    display:grid;

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

    gap:20px;

    margin-bottom:70px;

}

.stat-card{

    background:linear-gradient(
        180deg,
        #1B1B1F,
        #151518
    );

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

    border-radius:22px;

    padding:28px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.stat-card:hover{

    transform:translateY(-6px);

    border-color:rgba(239,68,68,.25);

}

.stat-card h3{

    font-size:.9rem;

    color:var(--text-light);

    margin-bottom:12px;

    font-weight:500;

}

.stat-card p{

    font-size:1.8rem;

    font-weight:700;

    color:var(--text);

}

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

footer{

    text-align:center;

    padding:35px 0;

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

    color:var(--text-light);

    font-size:.95rem;

}

footer a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

footer a:hover{

    color:#fff;

}

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

@media (max-width:992px){

    .container{

        width:94%;

    }

}

@media (max-width:768px){

    .container{

        padding:60px 0;

    }

    .preview-section{

        grid-template-columns:1fr;

    }

    .dimension-grid{

        grid-template-columns:1fr;

    }

    .action-section{

        flex-direction:column;

    }

    .action-section button{

        width:100%;

    }

}

@media (max-width:480px){

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .upload-card{

        padding:50px 24px;

    }

    .preview-box{

        height:260px;

        margin:18px;

    }

    .controls-section{

        padding:24px;

    }

    .stats-section{

        grid-template-columns:1fr;

    }

}