@property --logo-trace-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

@property --cta-trace-angle{
    syntax:"<angle>";
    initial-value:0deg;
    inherits:false;
}

:root{
    --bg:#090b0e;
    --card:#15191e;
    --card2:#1b2026;

    --red:#ff4f5e;
    --red2:#d73847;

    --gold:#ffd365;
    --gold2:#ffe6a0;

    --green:#51d2b3;
    --green2:#32a98f;

    --blue:#619df0;
    --purple:#9a70dc;

    --white:#ffffff;
    --muted:#9ba2aa;
    --border:#2c343c;

    --shadow:0 7px 22px rgba(0,0,0,.43);
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255,79,94,.08),
            transparent 390px
        ),
        var(--bg);

    color:var(--white);
    font-family:Arial,Helvetica,sans-serif;
    padding-bottom:50px;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:min(960px,calc(100% - 24px));
    margin:auto;
}


/* =========================================================
   TOP RAIL
========================================================= */

.topbar{
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            #772930,
            var(--red),
            #af7827,
            var(--red),
            #772930
        );

    background-size:240% 100%;
    animation:railGlow 9s linear infinite;
}

@keyframes railGlow{
    to{
        background-position:240% 0;
    }
}

.toptrack{
    display:flex;
    width:max-content;
    animation:railMove 31s linear infinite;
}

.toptrack span,
.toptrack a{
    padding:9px 19px;
    white-space:nowrap;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.toptrack a{
    color:#fff2b7;
}

.toptrack span:after,
.toptrack a:after{
    content:"◆";
    margin-left:19px;
    color:var(--gold);
}

@keyframes railMove{
    to{
        transform:translateX(-50%);
    }
}


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

header{
    padding:27px 0 24px;
    text-align:center;
}

.logo-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:11px;
}

.logo-icon{
    position:relative;

    width:48px;
    height:48px;

    border:2px solid transparent;
    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            #271719,
            #111419
        ) padding-box,
        conic-gradient(
            from var(--logo-trace-angle),
            transparent 0 16%,
            var(--red) 22%,
            var(--gold) 31%,
            transparent 39% 62%,
            var(--green) 70%,
            var(--blue) 78%,
            transparent 87%
        ) border-box;

    box-shadow:
        0 0 25px rgba(255,79,94,.17);

    animation:
        logoFloat 4s ease-in-out infinite,
        logoTrace 4.7s linear infinite;
}

.logo-icon:before{
    content:"▶";

    position:absolute;
    inset:7px;

    display:grid;
    place-items:center;

    border:2px solid var(--red);
    border-radius:7px;

    color:var(--gold);
    font-size:15px;
}

.logo-icon:after{
    content:"4K";

    position:absolute;
    right:4px;
    bottom:3px;

    color:var(--green);

    font-size:6px;
    font-weight:1000;
}

@keyframes logoFloat{
    50%{
        transform:translateY(-3px);
    }
}

@keyframes logoTrace{
    to{
        --logo-trace-angle:360deg;
    }
}

header h1{
    font-size:2.15rem;
    font-weight:1000;
    letter-spacing:-1.6px;
    text-transform:uppercase;
}

header h1 span{
    color:var(--red);
}

.subtitle{
    margin-top:7px;
    color:var(--muted);
    font-size:.89rem;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-top:12px;
    padding:6px 12px;

    border:1px solid rgba(81,210,179,.24);
    border-radius:20px;

    background:rgba(81,210,179,.05);

    color:var(--green);

    font-size:.7rem;
    font-weight:900;
}

.status-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 8px var(--green);

    animation:statusPulse 1.25s ease-in-out infinite;
}

@keyframes statusPulse{
    50%{
        opacity:.35;
        transform:scale(.7);
    }
}


/* =========================================================
   QUICK LINKS
========================================================= */

.quick{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:25px;
}

.quick a{
    position:relative;
    overflow:hidden;

    padding:12px 8px;

    border:1px solid var(--border);
    border-radius:7px;

    background:var(--card);

    text-align:center;
    transition:.16s ease;
}

.quick a:hover{
    transform:translateY(-2px);
    border-color:var(--red);
}

.quick a:before{
    content:"";

    position:absolute;
    left:-45px;
    top:-50%;

    width:21px;
    height:200%;

    transform:rotate(20deg);

    background:rgba(255,255,255,.11);

    animation:quickShine 6.5s ease-in-out infinite;
}

@keyframes quickShine{
    0%,72%{
        left:-45px;
    }

    90%,100%{
        left:120%;
    }
}

.quick small{
    display:block;

    color:var(--muted);

    font-size:.59rem;
    font-weight:800;

    text-transform:uppercase;
}

.quick strong{
    display:block;

    margin-top:3px;

    font-size:.88rem;
    font-weight:900;
}

.quick a:nth-child(1) strong{
    color:var(--red);
}

.quick a:nth-child(2) strong{
    color:var(--gold);
}

.quick a:nth-child(3) strong{
    color:var(--green);
}

.quick a:nth-child(4) strong{
    color:var(--blue);
}


/* =========================================================
   INTRO
========================================================= */

.intro{
    margin-bottom:28px;
    padding:20px;

    border:1px solid var(--border);
    border-left:4px solid var(--red);
    border-radius:8px;

    background:
        linear-gradient(
            115deg,
            #1b1719,
            #111419
        );
}

.intro small{
    color:var(--gold);

    font-size:.65rem;
    font-weight:900;

    text-transform:uppercase;
}

.intro h2{
    margin:5px 0 10px;

    font-size:1.38rem;
    line-height:1.15;

    text-transform:uppercase;
}

.intro p{
    max-width:840px;

    color:var(--muted);

    font-size:.85rem;
    line-height:1.62;
}

.intro strong{
    color:#fff;
}


/* =========================================================
   SECTION HEADERS
========================================================= */

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

    gap:15px;

    margin:28px 0 14px;

    padding-left:9px;

    border-left:4px solid var(--red);
}

.section.gold{
    border-left-color:var(--gold);
}

.section h2{
    font-size:1.03rem;
    font-weight:900;
    text-transform:uppercase;
}

.section span{
    color:var(--muted);

    font-size:.65rem;
    font-weight:800;

    text-transform:uppercase;
}


/* =========================================================
   CARDS
========================================================= */

.cards{
    display:flex;
    flex-direction:column;
    gap:13px;
}


/* =========================================================
   PREMIUM 1 x 3 GRID
   Only the lower three cards change structure on desktop.
   The first two free cards keep the existing horizontal layout.
========================================================= */

.premium-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
}

.premium-cards .card{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    border-left-width:1px;
    border-top-width:3px;
}

.premium-cards .card.premium{
    border-top-color:var(--gold);
}

.premium-cards .card.focused{
    border-top-color:var(--green);
}

.premium-cards .thumb{
    width:100%;
    height:176px;
    min-height:176px;
}

.premium-cards .details{
    flex:1;
    justify-content:flex-start;
    padding:14px 14px 15px;
}

.premium-cards .details > div:first-child{
    flex:1;
}

.premium-cards .description{
    font-size:.74rem;
    line-height:1.52;
}

.premium-cards .card h3{
    font-size:1.03rem;
}

.premium-cards .tag{
    padding:3px 5px;
    font-size:.53rem;
}

.premium-cards .pills{
    gap:4px;
    margin-bottom:11px;
}

.premium-cards .pill{
    padding:3px 5px;
    font-size:.52rem;
}

.premium-cards .cta{
    position:relative;

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

    width:100%;
    min-height:50px;
    overflow:hidden;

    padding:11px 12px;

    border:2px solid transparent;
    border-radius:8px;

    background:
        linear-gradient(
            180deg,
            #ff6874,
            #d73847
        ) padding-box,
        conic-gradient(
            from var(--cta-trace-angle),
            transparent 0 15%,
            #ff9aa4 22%,
            var(--gold) 30%,
            transparent 38% 61%,
            var(--blue) 69%,
            transparent 78%
        ) border-box;

    color:#fff;

    font-size:.9rem;
    font-weight:900;
    text-transform:uppercase;

    box-shadow:0 4px 13px rgba(255,79,94,.23);

    animation:ctaTrace 4.15s linear infinite;

    transition:
        transform .16s ease,
        filter .16s ease,
        box-shadow .16s ease;
}

.premium-cards .cta.gold{
    background:
        linear-gradient(
            180deg,
            #f8dd7a,
            #bd9338
        ) padding-box,
        conic-gradient(
            from var(--cta-trace-angle),
            transparent 0 15%,
            var(--gold) 22%,
            #fff0aa 30%,
            transparent 38% 61%,
            var(--red) 69%,
            transparent 78%
        ) border-box;

    color:#211707;
}

.premium-cards .cta.green{
    background:
        linear-gradient(
            180deg,
            #70e0c3,
            #32a98f
        ) padding-box,
        conic-gradient(
            from var(--cta-trace-angle),
            transparent 0 15%,
            var(--green) 22%,
            #a1f1df 30%,
            transparent 38% 61%,
            var(--gold) 69%,
            transparent 78%
        ) border-box;

    color:#041814;
}

.premium-cards .cta.blue{
    background:
        linear-gradient(
            180deg,
            #75b1f8,
            #477fca
        ) padding-box,
        conic-gradient(
            from var(--cta-trace-angle),
            transparent 0 15%,
            var(--blue) 22%,
            #a9ccff 30%,
            transparent 38% 61%,
            var(--gold) 69%,
            transparent 78%
        ) border-box;
}

.card{
    display:flex;
    overflow:hidden;

    border:1px solid var(--border);
    border-radius:9px;

    background:var(--card);

    box-shadow:var(--shadow);

    transition:
        transform .16s ease,
        border-color .16s ease;
}

.card:hover{
    transform:translateY(-2px);
    border-color:#4d5660;
}

.card.free{
    border-left:3px solid var(--red);
}

.card.premium{
    border-left:3px solid var(--gold);
}

.card.focused{
    border-left:3px solid var(--green);
}


/* =========================================================
   NON-CLICKABLE THUMBNAILS
========================================================= */

.thumb{
    position:relative;

    width:300px;
    min-height:225px;

    flex-shrink:0;
    overflow:hidden;

    background:#111;

    cursor:default;
    user-select:none;
}

.thumb img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:none;

    transition:
        transform .38s ease,
        filter .38s ease;
}

.card:hover .thumb img{
    transform:scale(1.035);
}

.thumb:before{
    content:"";

    position:absolute;
    z-index:3;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.07),
            transparent 46%,
            rgba(0,0,0,.30)
        );
}


/* =========================================================
   IMAGE-SPECIFIC TREATMENTS
========================================================= */

.thumb-xvideos img{
    object-position:center;
    filter:contrast(1.05) saturate(1.05);
}

.thumb-xnxx img{
    object-position:center;
    filter:contrast(1.06) saturate(1.02);
}

.thumb-bangbros img{
    object-position:center;
    filter:contrast(1.05) saturate(1.09);
}

.thumb-anal img{
    object-position:center;
    filter:contrast(1.06) saturate(1.03);
}

.thumb-red img{
    object-position:center;
    filter:contrast(1.06) saturate(1.08);
}


/* edge treatments */

.thumb-xvideos:after{
    content:"";

    position:absolute;
    z-index:4;

    left:0;
    top:0;
    bottom:0;

    width:5px;

    background:var(--red);

    pointer-events:none;
}

.thumb-xnxx:after{
    content:"";

    position:absolute;
    z-index:4;

    right:0;
    top:0;
    bottom:0;

    width:5px;

    background:var(--blue);

    pointer-events:none;
}

.thumb-bangbros:after{
    content:"";

    position:absolute;
    z-index:4;

    left:0;
    right:0;
    top:0;

    height:5px;

    background:var(--gold);

    pointer-events:none;
}

.thumb-anal:after{
    content:"";

    position:absolute;
    z-index:4;

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

    height:5px;

    background:var(--green);

    pointer-events:none;
}

.thumb-red:after{
    content:"";

    position:absolute;
    z-index:4;
    inset:0;

    box-shadow:
        inset 0 0 48px rgba(255,79,94,.23);

    pointer-events:none;
}


/* =========================================================
   BADGES + DECORATIVE PLAY
========================================================= */

.badge{
    position:absolute;
    z-index:20;

    left:8px;
    top:8px;

    padding:4px 7px;

    border:1px solid var(--gold);
    border-radius:4px;

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

    color:var(--gold2);

    font-size:.61rem;
    font-weight:900;

    pointer-events:none;
}

.corner{
    position:absolute;
    z-index:20;

    right:8px;
    bottom:8px;

    padding:4px 7px;

    border-radius:4px;

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

    color:#fff;

    font-size:.62rem;
    font-weight:800;

    pointer-events:none;
}

.play{
    position:absolute;
    z-index:20;

    left:50%;
    top:50%;

    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    transform:translate(-50%,-50%);

    border:2px solid rgba(255,255,255,.45);
    border-radius:50%;

    background:rgba(255,79,94,.94);

    box-shadow:
        0 0 0 0 rgba(255,79,94,.5),
        0 8px 20px rgba(0,0,0,.3);

    animation:playPulse 2.3s ease-out infinite;

    pointer-events:none;
    cursor:default;
}

.play:after{
    content:"";

    margin-left:4px;

    border-style:solid;

    border-width:
        8px
        0
        8px
        13px;

    border-color:
        transparent
        transparent
        transparent
        #fff;
}

@keyframes playPulse{
    70%{
        box-shadow:
            0 0 0 14px rgba(255,79,94,0),
            0 8px 20px rgba(0,0,0,.3);
    }
}


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

.details{
    flex:1;

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

    padding:15px 16px;
}

.title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:10px;
}

.card h3{
    font-size:1.12rem;
    font-weight:900;
}

.tag{
    flex-shrink:0;

    padding:3px 6px;

    border-radius:4px;

    background:rgba(255,211,101,.06);
    border:1px solid rgba(255,211,101,.22);

    color:var(--gold);

    font-size:.59rem;
    font-weight:800;
}

.description{
    margin:7px 0 10px;

    color:var(--muted);

    font-size:.8rem;
    line-height:1.54;
}

.pills{
    display:flex;
    flex-wrap:wrap;

    gap:5px;

    margin-bottom:11px;
}

.pill{
    padding:3px 6px;

    border:1px solid var(--border);
    border-radius:4px;

    color:#c8ced3;

    font-size:.6rem;
    font-weight:800;

    text-transform:uppercase;
}

.pill.red{
    color:#ff8a95;
    border-color:rgba(255,79,94,.25);
}

.pill.gold{
    color:var(--gold);
    border-color:rgba(255,211,101,.25);
}

.pill.green{
    color:var(--green);
    border-color:rgba(81,210,179,.25);
}

.pill.blue{
    color:#88b7f5;
    border-color:rgba(97,157,240,.25);
}


/* =========================================================
   CTA
========================================================= */

.cta{
    position:relative;

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

    width:100%;
    overflow:hidden;

    padding:11px 12px;

    border-radius:6px;

    background:
        linear-gradient(
            180deg,
            #ff6874,
            #d73847
        );

    color:#fff;

    font-size:.82rem;
    font-weight:900;

    text-transform:uppercase;

    box-shadow:
        0 4px 13px rgba(255,79,94,.23);

    transition:.16s ease;
}

.cta:after{
    content:" →";
    margin-left:6px;
}

.cta:hover{
    transform:translateY(-1px);
    filter:brightness(1.09);
    box-shadow:0 7px 19px rgba(255,79,94,.27);
}

.cta:before{
    content:"";

    position:absolute;

    left:-60px;
    top:-60%;

    width:27px;
    height:220%;

    transform:rotate(20deg);

    background:rgba(255,255,255,.23);

    animation:buttonShine 5s ease-in-out infinite;
}

@keyframes ctaTrace{
    to{
        --cta-trace-angle:360deg;
    }
}

@keyframes buttonShine{
    0%,70%{
        left:-60px;
    }

    88%,100%{
        left:110%;
    }
}

.cta.gold{
    background:
        linear-gradient(
            180deg,
            #f8dd7a,
            #bd9338
        );

    color:#211707;
}

.cta.green{
    background:
        linear-gradient(
            180deg,
            #70e0c3,
            #32a98f
        );

    color:#041814;
}

.cta.blue{
    background:
        linear-gradient(
            180deg,
            #75b1f8,
            #477fca
        );
}


/* =========================================================
   DOMAIN INFO
========================================================= */

.domain-info{
    margin-top:30px;
    padding:31px 29px;

    border:1px solid rgba(255,79,94,.18);
    border-radius:9px;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(255,211,101,.08),
            transparent 190px
        ),
        linear-gradient(
            125deg,
            #1d1718,
            #11161b
        );

    box-shadow:
        0 7px 26px rgba(0,0,0,.27);
}

.domain-info p{
    margin:0;

    color:#d3ced0;

    font-size:1.08rem;
    line-height:1.79;
}

.domain-info strong{
    color:#fff;
}

.domain-info a{
    color:var(--gold2);
    font-weight:800;
}


/* =========================================================
   FINAL LINKS
========================================================= */

.final-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:14px;
}

.final-links a{
    padding:12px;

    border:1px solid var(--border);
    border-radius:6px;

    background:var(--card);

    text-align:center;

    transition:.16s ease;
}

.final-links a:hover{
    transform:translateY(-2px);
    border-color:#4d5760;
}

.final-links small{
    display:block;

    color:var(--muted);

    font-size:.59rem;
    font-weight:800;

    text-transform:uppercase;
}

.final-links strong{
    display:block;

    margin-top:3px;

    font-size:.83rem;
}

.final-links a:nth-child(1) strong{
    color:var(--red);
}

.final-links a:nth-child(2) strong{
    color:var(--gold);
}

.final-links a:nth-child(3) strong{
    color:var(--green);
}


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

footer{
    padding:35px 5px 0;

    color:#747b82;

    text-align:center;

    font-size:.66rem;
    line-height:1.85;
}

footer strong{
    color:#c4c9ce;
}


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

@media(max-width:760px){

    .premium-cards{
        grid-template-columns:1fr;
        gap:13px;
    }

    .premium-cards .card{
        display:block;
        height:auto;
        border-left-width:3px;
        border-top-width:1px;
    }

    .premium-cards .card.premium{
        border-left-color:var(--gold);
    }

    .premium-cards .card.focused{
        border-left-color:var(--green);
    }

    .premium-cards .thumb{
        width:100%;
        height:245px;
        min-height:245px;
    }

    .premium-cards .details{
        padding:15px 16px;
    }

    .premium-cards .details > div:first-child{
        flex:initial;
    }

    .premium-cards .description{
        font-size:.8rem;
        line-height:1.54;
    }

    .premium-cards .card h3{
        font-size:1.12rem;
    }

    .premium-cards .pills{
        gap:5px;
        margin-bottom:11px;
    }

    .premium-cards .pill{
        padding:3px 6px;
        font-size:.6rem;
    }

    .premium-cards .cta{
        min-height:52px;
        padding:14px;
        font-size:.96rem;
    }

    .quick{
        grid-template-columns:1fr 1fr;
    }

    .card{
        display:block;
    }

    .thumb{
        width:100%;
        height:245px;
    }

    .domain-info{
        padding:24px 20px;
    }

    .domain-info p{
        font-size:1rem;
    }
}

@media(max-width:520px){

    .premium-cards .thumb{
        height:230px;
        min-height:230px;
    }

    .container{
        width:min(100% - 14px,960px);
    }

    header h1{
        font-size:1.55rem;
    }

    .section{
        display:block;
    }

    .section span{
        display:block;
        margin-top:3px;
    }

    .final-links{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .topbar,
    .toptrack,
    .logo-icon,
    .cta,
    .status-dot,
    .quick a:before,
    .play,
    .cta:before{
        animation:none !important;
    }
}