html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

:root{
    --bg:#050505;
    --gold:#d4af37;
    --gold-soft:#8f6a16;
    --accent:#8b1e3f;
    --card:#111111;
    --text:#f5f5f5;
    --muted:#999;
}

*{
    box-sizing:border-box;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
}

a{
    color: #d4af37;
}
visited a{
    color: #d4af37;
}

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero{
    position:relative;

    width:100%;

    height:520px;
    min-height:520px;
    max-height:520px;

    overflow:hidden;

    background:black;

    margin-bottom:30px;
}

.hero::after{
    content:'';

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:80px;

    background:linear-gradient(
        to bottom,
        rgba(5,5,5,0),
        rgba(5,5,5,1)
    );

    z-index:4;

    pointer-events:none;
}

.hero-slide{
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    opacity:0;

    transition:opacity 1s ease;
}

.hero-slide.active{
    opacity:1;

    z-index:2;
}

.hero-slide img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    filter:brightness(0.75);
}

.hero-overlay{
    position:absolute;
    inset:0;

    z-index:5;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:0 80px;

    max-width:800px;

    color:white;
}

.hero-overlay h1{
    margin-bottom:20px;

    max-width:700px;

    font-size:52px;
    line-height:1.05;
}

.hero-overlay p{
    max-width:650px;

    font-size:20px;
    line-height:1.7;

    color:#ddd;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:30px;
}

.btn-primary,
.btn-secondary{
    display:inline-block;

    padding:16px 28px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;
}

.btn-primary{
    background:var(--gold);

    color:black;
}

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

    color:white;

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

/*
|--------------------------------------------------------------------------
| INFO STRIP
|--------------------------------------------------------------------------
*/

.info-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    padding:40px;

    margin-bottom:20px;
}

.info-left{
    flex:1;
}

.info-left h2{
    margin-bottom:16px;

    font-size:36px;

    color:var(--gold);
}

.info-left p{
    max-width:850px;

    margin-bottom:16px;

    line-height:1.7;

    color:#ccc;
}

.info-right{
    width:260px;

    flex-shrink:0;

    background:#0d0d0d;

    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;

    padding:24px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:18px;
}

.info-qr{
    width:130px;

    border-radius:12px;

    background:white;

    padding:8px;
}

/*
|--------------------------------------------------------------------------
| CATEGORY ROWS
|--------------------------------------------------------------------------
*/

.category-section{
    position:relative;

    z-index:5;

    overflow:visible;

    background:#050505;

    margin-bottom:10px;
}

.category-title{
    display:inline-block;

    margin:0 0 6px 40px;

    font-size:32px;

    color:var(--gold);

    text-decoration:none;

    transition:0.25s ease;
}

.category-title:hover{
    color:white;

    transform:translateX(4px);
}

.slider-wrapper{
    position:relative;

    margin-top:10px;
}

.prompt-row{
    display:flex;

    gap:18px;

    overflow-x:auto;
    overflow-y:visible;

    scroll-behavior:smooth;

    padding:4px 40px 12px;

    -ms-overflow-style:none;
    scrollbar-width:none;
}

.prompt-row::-webkit-scrollbar{
    display:none;
}

/*
|--------------------------------------------------------------------------
| SLIDER BUTTONS
|--------------------------------------------------------------------------
*/

.slider-btn{
    position:absolute;

    top:4px;
    bottom:12px;

    width:72px;

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

    border:none;

    background:rgba(0,0,0,0);

    color:white;

    font-size:56px;

    cursor:pointer;

    z-index:20;

    opacity:0;

    transition:0.25s ease;
}

.slider-wrapper:hover .slider-btn{
    opacity:1;
}

.slider-btn.left{
    left:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0)
    );
}

.slider-btn.right{
    right:0;

    background:linear-gradient(
        to left,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0)
    );
}

.slider-btn:hover{
    color:var(--gold);
}

/*
|--------------------------------------------------------------------------
| CARD LINKS
|--------------------------------------------------------------------------
*/

.card-link{
    display:block;

    text-decoration:none;

    color:inherit;
}

.card-link:visited{
    color:inherit;
}

.card-link:hover{
    color:inherit;
}

/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.card{
    min-width:280px;
    max-width:280px;

    flex:0 0 auto;

    background:var(--card);

    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;

    overflow:hidden;

    transition:0.3s ease;
}

.card:hover{
    transform:scale(1.015);

    border-color:rgba(212,175,55,0.4);
}

.card img{
    width:100%;
    height:390px;

    object-fit:cover;

    display:block;
}

.card-content{
    padding:14px;
}

.card h3{
    margin:0 0 8px;

    font-size:18px;
}

.prompt-id{
    margin-bottom:12px;

    font-size:13px;

    color:var(--muted);
}

.card-meta{
    margin-bottom:12px;
}

.card-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:10px;
}

.vote-button,
.share-button{
    flex:1;

    height:38px;

    border:none;
    border-radius:8px;

    cursor:pointer;

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

    transition:0.25s ease;
}

.vote-button{
    background:#1b1b1b;

    color:var(--gold);
}

.vote-button:hover{
    background:#252525;
}

.share-button{
    background:#151515;

    color:white;
}

.share-button:hover{
    background:#222;
}

.copy-button{
    width:100%;

    padding:12px;

    border:none;
    border-radius:8px;

    background:var(--accent);
    color:white;

    cursor:pointer;

    font-weight:700;

    transition:0.25s;
}

.copy-button:hover{
    background:#b32650;
}

/*
|--------------------------------------------------------------------------
| SUPPORT
|--------------------------------------------------------------------------
*/

.support-section{
    padding:90px 24px;

    text-align:center;

    background:#070707;
}

.support-section h2{
    margin-bottom:18px;

    font-size:42px;

    color:var(--gold);
}

.support-section p{
    max-width:700px;

    margin:0 auto 40px;

    line-height:1.7;

    color:#cccccc;
}

.support-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:24px;
}

.qr-code{
    width:220px;
    max-width:80%;

    border-radius:18px;

    background:white;

    padding:12px;
}

.support-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 34px;

    border-radius:12px;

    background:var(--gold);
    color:black;

    text-decoration:none;

    font-weight:700;

    transition:0.25s ease;
}

.support-button:hover{
    opacity:0.9;

    transform:translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    header{
        padding:16px 20px;
    }

    .hero{
        height:420px;

        min-height:auto;
        max-height:none;
    }

    .hero-overlay{
        display:none !important;
    }

    .hero-slide img,
        .browse-hero-image,
        .category-hero-image,
        .request-hero-image{
        filter:none;
    }

    .prompt-row{
        padding:4px 0 12px;
    }

    .category-title{
        margin:0 0 6px 0;
    }

    .category-section{
        padding:12px 20px;
    }

    .card{
        min-width:220px;
        max-width:220px;
    }

    .card img{
        height:320px;
    }

    .slider-btn{
        display:none;
    }

    .support-section{
        padding:70px 20px;
    }

    .support-section h2{
        font-size:32px;
    }

    .support-section p{
        font-size:15px;
        line-height:1.6;
    }

    .qr-code{
        width:180px;
        max-width:80%;
    }

    .support-button{
        width:100%;
        max-width:280px;

        padding:15px 20px;

        text-align:center;

        font-size:16px;
    }

    .info-strip{
        flex-direction:column;

        align-items:flex-start;

        gap:24px;

        padding:24px 20px;
    }

    .info-left h2{
        font-size:28px;
    }

    .info-left p{
        font-size:14px;

        line-height:1.6;
    }

    .info-right{
        width:100%;
    }

    footer{
        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}