/* =========================================================
   XXX.COM - CTR REWORK
   Larger / clearer clickable elements
========================================================= */

:root{
    --bg:#070b13;
    --bg2:#0b1120;

    --panel:#101724;
    --panel2:#141d2b;
    --panel3:#192334;

    --cyan:#2de2e6;
    --cyan2:#17b8c1;

    --magenta:#ff4fa3;
    --magenta2:#d52e7e;

    --gold:#ffc857;
    --gold2:#ffe29a;

    --blue:#638cff;
    --green:#50d6a7;

    --white:#f7fbff;
    --muted:#98a5b5;

    --border:#26354a;
    --border-soft:rgba(124,155,195,.18);

    --shadow:
        0 8px 24px
        rgba(0,0,0,.4);
}


/* =========================================================
   ANIMATED TRACE PROPERTIES
   Modern treatment without changing the existing content
========================================================= */

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

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


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

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 20% 0,
            rgba(45,226,230,.09),
            transparent 340px
        ),
        radial-gradient(
            circle at 80% 7%,
            rgba(255,79,163,.08),
            transparent 360px
        ),
        linear-gradient(
            180deg,
            var(--bg2),
            var(--bg) 480px
        );

    color:var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    padding-bottom:48px;
}

body:before{
    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.19;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:42px 42px;
}

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

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

.container{
    position:relative;
    z-index:2;

    width:min(
        960px,
        calc(100% - 24px)
    );

    margin:auto;
}


/* =========================================================
   GLOBAL CLICKABLE FEEDBACK
========================================================= */

a{
    -webkit-tap-highlight-color:
        rgba(45,226,230,.12);
}

a:focus-visible{
    outline:
        2px solid
        var(--cyan);

    outline-offset:3px;
}


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

.top-rail{
    position:relative;
    z-index:5;

    overflow:hidden;

    border-bottom:
        1px solid
        rgba(45,226,230,.2);

    background:
        linear-gradient(
            90deg,
            #142742,
            #126d79,
            #44315e,
            #8c2f66,
            #142742
        );

    background-size:260% 100%;

    animation:
        railColor
        12s linear infinite;
}

@keyframes railColor{
    to{
        background-position:260% 0;
    }
}

.rail-track{
    display:flex;

    width:max-content;

    animation:
        railMove
        32s linear infinite;
}

.rail-track span,
.rail-track a{
    padding:
        9px 19px;

    white-space:nowrap;

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

    letter-spacing:.5px;

    text-transform:uppercase;
}

.rail-track a{
    color:#fff0ad;

    transition:
        color .16s ease,
        background .16s ease;
}

.rail-track a:hover{
    color:#fff;

    background:
        rgba(255,255,255,.08);
}

.rail-track span:after,
.rail-track a:after{
    content:"◆";

    margin-left:19px;

    color:var(--cyan);
}

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


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

.site-header{
    display:flex;

    justify-content:
        space-between;

    align-items:center;

    gap:22px;

    padding:
        27px 0 23px;
}

.brand-row{
    display:flex;

    align-items:center;

    gap:13px;

    min-width:0;
}

.brand-mark{
    position:relative;

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    overflow:hidden;

    border:
        2px solid
        transparent;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #16263a,
            #0b111c
        ) padding-box,
        conic-gradient(
            from var(--logo-trace-angle),
            transparent 0 17%,
            var(--cyan) 22%,
            var(--gold) 29%,
            transparent 36% 61%,
            var(--magenta) 69%,
            var(--blue) 77%,
            transparent 86%
        ) border-box;

    color:var(--cyan);

    font-size:12px;
    font-weight:1000;

    letter-spacing:-1px;

    box-shadow:
        0 0 28px
        rgba(45,226,230,.11);

    animation:
        brandFloat 4.5s ease-in-out infinite,
        brandTrace 4.8s linear infinite;
}

.brand-mark:before{
    content:"";

    position:absolute;

    inset:7px;

    border:
        2px solid
        var(--magenta);

    border-radius:8px;
}

.brand-mark:after{
    content:"";

    position:absolute;

    right:6px;
    top:6px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:
        0 0 8px
        var(--gold);
}

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

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

.site-header h1{
    font-size:2.28rem;

    line-height:1;

    font-weight:1000;

    letter-spacing:-1.8px;

    text-transform:uppercase;
}

.site-header h1 span{
    color:var(--magenta);
}

.site-header p{
    margin-top:7px;

    color:var(--muted);

    font-size:.85rem;
}

.adult-status{
    display:flex;
    align-items:center;

    gap:8px;

    flex-shrink:0;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(80,214,167,.25);

    border-radius:30px;

    background:
        rgba(80,214,167,.05);

    color:var(--green);

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

.adult-status span{
    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--green);

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

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

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


/* =========================================================
   TOP QUICK LINKS
   CTR: larger destination names + larger hit area
========================================================= */

.quick-links{
    display:grid;

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

    gap:9px;

    margin-bottom:25px;
}

.quick-links a{
    position:relative;

    display:flex;
    flex-direction:column;

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

    min-height:76px;

    overflow:hidden;

    padding:
        14px 10px;

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

    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );

    text-align:center;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.16);

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

.quick-links a:hover{
    transform:
        translateY(-3px);

    border-color:
        var(--cyan);

    background:
        linear-gradient(
            145deg,
            #1a2738,
            #121c2a
        );

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.28);
}

.quick-links a:active{
    transform:
        translateY(-1px)
        scale(.99);
}

.quick-links a:before{
    content:"";

    position:absolute;

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

    width:22px;
    height:220%;

    transform:
        rotate(22deg);

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

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

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

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

.quick-links small{
    display:block;

    color:var(--muted);

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

    letter-spacing:.2px;

    text-transform:uppercase;
}

.quick-links strong{
    display:block;

    margin-top:5px;

    font-size:.98rem;
    font-weight:1000;

    line-height:1.05;
}

.quick-links strong:after{
    content:" →";

    font-size:.82em;

    opacity:.68;
}

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

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

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

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


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

.intro-panel{
    position:relative;

    overflow:hidden;

    margin-bottom:30px;

    padding:22px;

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

    border-radius:10px;

    background:
        linear-gradient(
            120deg,
            #142135,
            #101522
        );

    box-shadow:var(--shadow);
}

.intro-panel:after{
    content:"XXX";

    position:absolute;

    right:18px;
    top:-14px;

    color:
        rgba(255,255,255,.025);

    font-size:7rem;
    font-weight:1000;

    letter-spacing:-8px;

    pointer-events:none;
}

.intro-label{
    position:relative;
    z-index:2;

    color:var(--cyan);

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

    letter-spacing:.6px;

    text-transform:uppercase;
}

.intro-panel h2{
    position:relative;
    z-index:2;

    margin:
        6px 0 10px;

    max-width:680px;

    font-size:1.43rem;

    line-height:1.18;

    text-transform:uppercase;
}

.intro-panel p{
    position:relative;
    z-index:2;

    max-width:820px;

    color:var(--muted);

    font-size:.85rem;

    line-height:1.64;
}

.intro-panel strong{
    color:#fff;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-heading{
    display:flex;

    justify-content:
        space-between;

    align-items:end;

    gap:16px;

    margin:
        29px 0 13px;

    padding:
        0 0 9px 11px;

    border-left:
        4px solid
        var(--magenta);

    border-bottom:
        1px solid
        var(--border-soft);
}

.section-heading span{
    color:var(--magenta);

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

    letter-spacing:1px;

    text-transform:uppercase;
}

.section-heading h2{
    margin-top:3px;

    font-size:1.06rem;

    text-transform:uppercase;
}

.section-heading p{
    color:var(--muted);

    font-size:.64rem;

    font-weight:800;

    text-transform:uppercase;
}

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

.premium-heading span{
    color:var(--gold);
}


/* =========================================================
   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 original 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-focus{
    border-top-color:var(--cyan);
}

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

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

.premium-cards .description{
    flex:1;
    font-size:.75rem;
    line-height:1.52;
}

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

.premium-cards .card-title small{
    font-size:.52rem;
    letter-spacing:.55px;
}

.premium-cards .type{
    padding:4px 6px;
    font-size:.53rem;
}

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

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

.premium-cards .cta{
    min-height:50px;
    padding:12px 10px;
    font-size:.91rem;
}

.card{
    display:flex;

    overflow:hidden;

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

    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            var(--panel),
            #0e1520
        );

    box-shadow:var(--shadow);

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

.card:hover{
    transform:
        translateY(-2px);

    border-color:#3f526c;
}

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

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

.card-focus{
    border-left:
        3px solid
        var(--cyan);
}


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

.thumb{
    position:relative;

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

    flex-shrink:0;

    overflow:hidden;

    background:#080b10;

    user-select:none;
    cursor:default;
}

.thumb img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:none;

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

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

.thumb:before{
    content:"";

    position:absolute;

    z-index:3;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(5,8,13,.12),
            transparent 42%,
            rgba(5,8,13,.42)
        );
}

.thumb-xvideos img{
    object-position:center;

    filter:
        contrast(1.06)
        saturate(1.04);
}

.thumb-xnxx img{
    object-position:center;

    filter:
        contrast(1.07)
        saturate(1);
}

.thumb-bangbros img{
    object-position:center;

    filter:
        contrast(1.05)
        saturate(1.08);
}

.thumb-analvids img{
    object-position:center;

    filter:
        contrast(1.06)
        saturate(1.03);
}

.thumb-red img{
    object-position:center;

    filter:
        contrast(1.06)
        saturate(1.1);
}

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

    position:absolute;

    z-index:4;

    left:0;
    bottom:0;

    width:42%;
    height:5px;

    background:
        var(--magenta);

    box-shadow:
        60px 0 0
        var(--cyan);
}

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

    position:absolute;

    z-index:4;

    right:0;
    top:0;

    width:5px;
    height:100%;

    background:
        linear-gradient(
            var(--blue),
            var(--cyan)
        );
}

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

    position:absolute;

    z-index:4;

    inset:0;

    border-top:
        5px solid
        var(--gold);

    pointer-events:none;
}

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

    position:absolute;

    z-index:4;

    left:0;
    top:0;

    width:70px;
    height:70px;

    background:
        linear-gradient(
            135deg,
            rgba(45,226,230,.46),
            transparent 62%
        );

    pointer-events:none;
}

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

    position:absolute;

    z-index:4;

    inset:0;

    box-shadow:
        inset 0 0 52px
        rgba(255,79,163,.24);

    pointer-events:none;
}


/* =========================================================
   THUMB LABELS
========================================================= */

.thumb-top,
.thumb-bottom{
    position:absolute;

    z-index:20;

    pointer-events:none;

    padding:
        4px 7px;

    border-radius:4px;

    background:
        rgba(4,7,12,.84);

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

    backdrop-filter:
        blur(6px);
}

.thumb-top{
    left:8px;
    top:8px;

    border:
        1px solid
        var(--magenta);

    color:#ff9acb;
}

.thumb-bottom{
    right:8px;
    bottom:8px;

    color:#fff;

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

.premium-badge{
    border-color:
        var(--gold);

    color:var(--gold2);
}

.focus-badge{
    border-color:
        var(--cyan);

    color:#9ffafd;
}


/* =========================================================
   DECORATIVE PLAY
========================================================= */

.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,.5);

    border-radius:50%;

    background:
        rgba(255,79,163,.93);

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

    pointer-events:none;
    cursor:default;

    animation:
        playPulse
        2.4s ease-out infinite;
}

.play:after{
    content:"";

    margin-left:4px;

    border-style:solid;

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

    border-color:
        transparent
        transparent
        transparent
        #fff;
}

.play-gold{
    background:
        rgba(223,165,54,.94);
}

.play-cyan{
    background:
        rgba(22,170,179,.94);
}

.play-magenta{
    background:
        rgba(255,79,163,.94);
}

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


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

.card-body{
    flex:1;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding:
        16px 17px;
}

.card-title{
    display:flex;

    justify-content:
        space-between;

    align-items:flex-start;

    gap:12px;
}

.card-title small{
    display:block;

    margin-bottom:3px;

    color:var(--muted);

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

    text-transform:uppercase;

    letter-spacing:.7px;
}

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

.type{
    flex-shrink:0;

    padding:
        4px 7px;

    border-radius:5px;

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

.free-type{
    border:
        1px solid
        rgba(255,79,163,.25);

    color:#ff91c7;

    background:
        rgba(255,79,163,.06);
}

.premium-type{
    border:
        1px solid
        rgba(255,200,87,.25);

    color:var(--gold);

    background:
        rgba(255,200,87,.06);
}

.focus-type{
    border:
        1px solid
        rgba(45,226,230,.25);

    color:var(--cyan);

    background:
        rgba(45,226,230,.06);
}

.red-type{
    border:
        1px solid
        rgba(255,79,163,.3);

    color:#ff91c7;

    background:
        rgba(255,79,163,.07);
}

.description{
    margin:
        8px 0 10px;

    color:var(--muted);

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


/* =========================================================
   PILLS
   Slightly quieter than CTAs
========================================================= */

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

    gap:5px;

    margin-bottom:14px;
}

.pills span{
    padding:
        3px 6px;

    border:
        1px solid
        rgba(38,53,74,.85);

    border-radius:4px;

    color:#aeb9c6;

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

    opacity:.9;
}

.pills span:first-child{
    color:#df83b1;

    border-color:
        rgba(255,79,163,.2);
}

.premium-pills span:first-child{
    color:#d9b253;

    border-color:
        rgba(255,200,87,.2);
}

.focus-pills span:first-child{
    color:#27c5ca;

    border-color:
        rgba(45,226,230,.2);
}

.red-pills span:first-child{
    color:#df83b1;

    border-color:
        rgba(255,79,163,.2);
}


/* =========================================================
   MAIN CLICKABLE CTA
   CTR PRIORITY
========================================================= */

.cta{
    position:relative;

    display:flex;

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

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

    overflow:hidden;

    padding:
        13px 15px;

    border:
        2px solid
        transparent;

    border-radius:8px;

    --cta-bg:
        linear-gradient(
            180deg,
            #ff69b1,
            #d52e7e
        );

    background:
        var(--cta-bg) padding-box,
        conic-gradient(
            from var(--cta-trace-angle),
            transparent 0 16%,
            var(--magenta) 22%,
            var(--gold) 29%,
            transparent 36% 62%,
            var(--cyan) 69%,
            var(--blue) 77%,
            transparent 86%
        ) border-box;

    color:#fff;

    font-size:1rem;
    font-weight:1000;

    line-height:1.05;

    letter-spacing:.2px;

    text-align:center;
    text-transform:uppercase;

    box-shadow:
        0 6px 18px
        rgba(255,79,163,.25);

    animation:
        ctaBorderTrace 4.2s linear infinite;

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

.cta:after{
    content:"→";

    margin-left:9px;

    font-size:1.08em;

    transition:
        transform .16s ease;
}

.cta:before{
    content:"";

    position:absolute;

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

    width:28px;
    height:230%;

    transform:
        rotate(20deg);

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

    animation:
        ctaShine
        5.4s ease-in-out infinite;
}

.cta:hover{
    transform:
        translateY(-2px);

    filter:
        brightness(1.1);

    box-shadow:
        0 9px 24px
        rgba(255,79,163,.3);
}

.cta:hover:after{
    transform:
        translateX(3px);
}

.cta:active{
    transform:
        translateY(0)
        scale(.99);
}

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

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

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


/* =========================================================
   CTA COLOR VARIANTS
========================================================= */

.cta-gold{
    color:#1e1607;

    border-color:
        rgba(255,255,255,.13);

    --cta-bg:
        linear-gradient(
            180deg,
            #ffde7b,
            #cf9d35
        );

    box-shadow:
        0 6px 18px
        rgba(255,200,87,.22);
}

.cta-gold:hover{
    box-shadow:
        0 9px 24px
        rgba(255,200,87,.27);
}

.cta-cyan{
    color:#031619;

    border-color:
        rgba(255,255,255,.14);

    --cta-bg:
        linear-gradient(
            180deg,
            #6df2f3,
            #1eb3ba
        );

    box-shadow:
        0 6px 18px
        rgba(45,226,230,.21);
}

.cta-cyan:hover{
    box-shadow:
        0 9px 24px
        rgba(45,226,230,.27);
}

.cta-magenta{
    --cta-bg:
        linear-gradient(
            180deg,
            #ff70b6,
            #bd286f
        );

    box-shadow:
        0 6px 18px
        rgba(255,79,163,.24);
}


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

.domain-info{
    position:relative;

    overflow:hidden;

    margin-top:30px;

    padding:
        30px 29px;

    border:
        1px solid
        rgba(45,226,230,.16);

    border-radius:10px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255,79,163,.09),
            transparent 210px
        ),
        linear-gradient(
            125deg,
            #111c2c,
            #0c111b
        );

    box-shadow:var(--shadow);
}

.domain-symbol{
    position:absolute;

    right:20px;
    top:-20px;

    color:
        rgba(45,226,230,.035);

    font-size:8rem;
    font-weight:1000;

    letter-spacing:-10px;

    pointer-events:none;
}

.domain-info p{
    position:relative;
    z-index:2;

    margin:0;

    color:#cad2dd;

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

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

.domain-info a{
    color:var(--gold2);

    font-weight:800;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(255,226,154,.25);

    text-underline-offset:3px;
}

.domain-info a:hover{
    color:#fff1bb;

    text-decoration-color:
        currentColor;
}


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

.final-links{
    display:grid;

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

    gap:9px;

    margin-top:14px;
}

.final-links a{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:70px;

    padding:
        13px 12px;

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

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );

    text-align:center;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.15);

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

.final-links a:hover{
    transform:
        translateY(-3px);

    border-color:
        var(--cyan);

    background:
        linear-gradient(
            145deg,
            #1b2736,
            #121b27
        );

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.25);
}

.final-links a:active{
    transform:
        translateY(-1px)
        scale(.99);
}

.final-links small{
    display:block;

    color:var(--muted);

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

    text-transform:uppercase;
}

.final-links strong{
    display:block;

    margin-top:5px;

    font-size:.92rem;
    font-weight:1000;
}

.final-links strong:after{
    content:" →";

    opacity:.7;
}

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

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

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


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

.site-footer{
    padding:
        34px 5px 0;

    color:#718094;

    text-align:center;

    font-size:.65rem;
    line-height:1.9;
}

.site-footer strong{
    color:#c8d1dc;
}

.site-footer p{
    margin-top:2px;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@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-focus{
        border-left-color:var(--cyan);
    }

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

    .premium-cards .card-body{
        padding:16px 17px;
    }

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

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

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

    .premium-cards .pills span{
        padding:3px 6px;
        font-size:.58rem;
    }

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

    /*
       Brand stays left.
       Online status stays right.
    */

    .site-header{
        display:flex;

        justify-content:space-between;
        align-items:center;

        gap:12px;

        padding:
            21px 0 20px;

        text-align:left;
    }

    .brand-row{
        justify-content:flex-start;

        flex:1;

        min-width:0;
    }

    .brand-row > div:last-child{
        min-width:0;
    }

    .adult-status{
        width:max-content;

        margin:0 0 0 auto;

        flex-shrink:0;
    }


    /* larger mobile quick tap targets */

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

        gap:8px;
    }

    .quick-links a{
        min-height:72px;
    }


    .section-heading{
        display:block;
    }

    .section-heading p{
        margin-top:4px;
    }

    .card{
        display:block;
    }

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

    .domain-info{
        padding:
            25px 21px;
    }

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


    /* CTR button stays large */

    .cta{
        min-height:52px;

        padding:
            14px 14px;

        font-size:1rem;
    }
}


/* =========================================================
   PHONE
========================================================= */

@media(max-width:520px){

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

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


    /* =====================================================
       HEADER
       XXX.COM LEFT / ONLINE RIGHT
    ===================================================== */

    .site-header{
        gap:8px;

        padding:
            18px 0 17px;
    }

    .brand-row{
        gap:9px;
    }

    .brand-mark{
        width:46px;
        height:46px;

        border-radius:11px;
    }

    .brand-mark:before{
        inset:6px;
    }

    .site-header h1{
        font-size:1.55rem;

        line-height:1;

        letter-spacing:-1.3px;

        white-space:nowrap;
    }

    .site-header p{
        margin-top:4px;

        max-width:190px;

        overflow:hidden;

        color:#8e9bad;

        font-size:.68rem;

        line-height:1.15;

        white-space:nowrap;

        text-overflow:ellipsis;
    }

    .adult-status{
        gap:6px;

        padding:
            7px 10px;

        border-radius:24px;

        font-size:.64rem;

        white-space:nowrap;
    }

    .adult-status span{
        width:7px;
        height:7px;
    }


    /* =====================================================
       TOP LINKS
       Bigger destination names
    ===================================================== */

    .quick-links{
        gap:7px;
    }

    .quick-links a{
        min-height:70px;

        padding:
            11px 7px;
    }

    .quick-links small{
        font-size:.53rem;
    }

    .quick-links strong{
        margin-top:4px;

        font-size:.94rem;
    }


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

    .intro-panel{
        padding:18px;
    }

    .intro-panel:after{
        right:8px;
        top:-5px;

        font-size:5.3rem;
    }

    .intro-panel h2{
        font-size:1.22rem;
    }

    .intro-panel p{
        font-size:.82rem;
    }


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

    .thumb{
        height:230px;
    }

    .card-body{
        padding:
            15px 14px;
    }


    /* =====================================================
       MAIN CTA
       intentionally prominent on phone
    ===================================================== */

    .cta{
        min-height:54px;

        padding:
            14px 12px;

        border-radius:8px;

        font-size:.98rem;

        letter-spacing:.1px;
    }

    .cta:after{
        margin-left:8px;
    }


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

    .domain-symbol{
        right:8px;

        font-size:6rem;
    }


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

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

        gap:8px;
    }

    .final-links a{
        min-height:63px;

        padding:
            12px;
    }

    .final-links strong{
        font-size:.94rem;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:370px){

    .site-header{
        gap:6px;

        padding:
            16px 0;
    }

    .brand-row{
        gap:7px;
    }

    .brand-mark{
        width:43px;
        height:43px;
    }

    .site-header h1{
        font-size:1.4rem;

        letter-spacing:-1.1px;
    }

    .site-header p{
        display:none;
    }

    .adult-status{
        gap:5px;

        padding:
            6px 8px;

        font-size:.59rem;
    }

    .adult-status span{
        width:6px;
        height:6px;
    }

    .quick-links a{
        min-width:0;
        min-height:67px;
    }

    .quick-links strong{
        font-size:.88rem;
    }

    .intro-panel h2{
        font-size:1.14rem;
    }

    .cta{
        min-height:52px;

        font-size:.94rem;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html{
        scroll-behavior:auto;
    }

    .top-rail,
    .rail-track,
    .brand-mark,
    .adult-status span,
    .quick-links a:before,
    .play,
    .cta,
    .cta:before{
        animation:none !important;
    }
}