#home-doors{
    margin-top: 40px;
    max-width: 1470px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 20px;
}

#home-doors .door{
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    min-height: 220px;
    box-sizing: border-box;
    border: 1px solid #2a323a;
    border-radius: 10px;
    container: door / inline-size;
}

#home-doors .door-text{
    flex: 1 1 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Both doors share one breakpoint, wide enough for the longest CTA + thumbs,
   so they don't wrap independently based on their own button width */
@container door (max-width: 519px){
    #home-doors .door-text{
        flex-basis: 100%;
    }
}

#home-doors .door-kicker{
    font-size: 12px;
    color: #8a97a3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#home-doors .door-title{
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}

#home-doors .door-desc{
    max-width: 230px;
    font-size: 13px;
    line-height: 1.55;
    color: #b8c0c8;
}

#home-doors .door-cta-wrap{
    margin-top: 8px;
}

#home-doors .door-cta{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

#home-doors .door-cta:hover{
    filter: brightness(1.12);
}

#home-doors .door-cta:focus-visible{
    outline: 2px solid #55f5ff;
    outline-offset: 2px;
}

#home-doors .door-cta-fill{
    background: #7b48fc;
    color: #fff;
}

#home-doors .door-cta-outline{
    border: 1px solid #4de3e3;
    color: #4de3e3;
}

/* Both doors: the museum's dot grid on the picture side */
#home-doors .door-scene{
    position: relative;
    overflow: hidden;
    background: #0b0c0e;
}

#home-doors .door-scene::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 7.5px 7.5px, rgba(120, 135, 150, .2) 1px, transparent 1.6px) 0 0 / 15px 15px;
    -webkit-mask: linear-gradient(90deg, transparent 30%, #000 75%);
    mask: linear-gradient(90deg, transparent 30%, #000 75%);
    pointer-events: none;
}

#home-doors .door-scene .door-text{
    position: relative;
    z-index: 2;
}

/* The wall never goes under the text: it narrows instead */
#home-doors .door-packs,
#home-doors .door-custom{
    flex-wrap: nowrap;
}

/* The text keeps its width, the logo gets all the rest */
#home-doors .door-custom .door-text{
    flex: 0 0 230px;
}

/* Custom design door: a client's finished logo, and a Photoshop-like
   selection that shows the pencil sketch under it (door-select.js moves it) */
#home-doors .sel-show{
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    min-height: 220px;
    margin: -24px -24px -24px 0;
    overflow: hidden;
    cursor: crosshair;
}

#home-doors .sel-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 80%;
    opacity: .5;
    -webkit-mask: linear-gradient(90deg, transparent, #000 40%);
    mask: linear-gradient(90deg, transparent, #000 40%);
}

#home-doors .sel-art{
    position: absolute;
    left: 45%;
    top: 50%;
    width: min(300px, 88%);
    aspect-ratio: 660 / 374;
    transform: translate(-50%, -50%);
}

#home-doors .sel-art img{
    display: block;
    width: 100%;
    height: 100%;
}

/* The client's animated logo over the still one, a touch taller (its
   ADDICT sits lower) */
#home-doors .sel-anim{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 390;
    opacity: 0;
    transition: opacity .4s ease;
}

#home-doors .sel-anim.is-playing{
    opacity: 1;
}

#home-doors .sel-art.is-anim > img{
    opacity: 0;
    transition: opacity .4s ease;
}

#home-doors .sel-show > .sel-art{
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .9));
}

/* The sketch on paper, only inside the selection */
#home-doors .sel-sketch{
    position: absolute;
    inset: 0;
    background: #f1eee7 radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1.2px) 0 0 / 5px 5px;
    clip-path: inset(50% 50% 50% 50%);
}

#home-doors .sel-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background-image:
        linear-gradient(90deg, #fff 50%, #111 0), linear-gradient(90deg, #fff 50%, #111 0),
        linear-gradient(0deg, #fff 50%, #111 0), linear-gradient(0deg, #fff 50%, #111 0);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: sel-ants .6s linear infinite;
    pointer-events: none;
}

/* Marching ants */
@keyframes sel-ants{
    to{
        background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
    }
}

/* The 8 handles */
#home-doors .sel-box i{
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -3px 0 0 -3px;
    background: #fff;
    border: 1px solid #111;
}

#home-doors .sel-box i:nth-child(1){ left: 0; top: 0; }
#home-doors .sel-box i:nth-child(2){ left: 50%; top: 0; }
#home-doors .sel-box i:nth-child(3){ left: 100%; top: 0; }
#home-doors .sel-box i:nth-child(4){ left: 100%; top: 50%; }
#home-doors .sel-box i:nth-child(5){ left: 100%; top: 100%; }
#home-doors .sel-box i:nth-child(6){ left: 50%; top: 100%; }
#home-doors .sel-box i:nth-child(7){ left: 0; top: 100%; }
#home-doors .sel-box i:nth-child(8){ left: 0; top: 50%; }

#home-doors .sel-dim{
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(20, 22, 26, .9);
    color: #cfd3d8;
    font: 600 9px/1.2 ui-monospace, monospace;
    white-space: nowrap;
    pointer-events: none;
}

#home-doors .sel-box,
#home-doors .sel-dim{
    opacity: 0;
    transition: opacity .25s ease;
}

#home-doors .sel-show.is-on .sel-box,
#home-doors .sel-show.is-on .sel-dim{
    opacity: 1;
}

/* At rest (mouse away from the logo): no paper, the sketch in white pencil
   on a darkened window, faint, nothing moving */
#home-doors .sel-ghost{
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 11, .85);
    opacity: 0;
    transition: opacity .3s ease;
}

#home-doors .sel-ghost img{
    opacity: .9;
}

#home-doors .sel-sketch{
    transition: opacity .3s ease;
}

#home-doors .sel-show.is-rest .sel-ghost{
    opacity: 1;
}

#home-doors .sel-show.is-rest .sel-sketch{
    opacity: 0;
}

#home-doors .sel-show.is-rest .sel-box{
    opacity: .3;
    animation: none;
}

#home-doors .sel-show.is-rest .sel-dim{
    opacity: 0;
}

/* Coming back to rest after the selection left: a slow fade in */
#home-doors .sel-show.is-return .sel-sketch,
#home-doors .sel-show.is-return .sel-dim{
    transition: none;
    opacity: 0;
}

#home-doors .sel-show.is-return .sel-ghost,
#home-doors .sel-show.is-return .sel-box{
    transition: opacity 1.4s ease;
}

#home-doors .sel-show.is-return .sel-ghost{
    animation: sel-back 1.4s ease;
}

#home-doors .sel-show.is-return .sel-box{
    animation: sel-back-box 1.4s ease;
}

@keyframes sel-back{
    from{ opacity: 0; }
}

@keyframes sel-back-box{
    from{ opacity: 0; }
}

#home-doors .pack-wall{
    position: relative;
    z-index: 2;
    flex: 0 1 330px;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

#home-doors .pack-wall-grid{
    flex: none;
    display: grid;
    grid-template-columns: repeat(6, 72px);
    gap: 8px;
}

/* Empty frames on the faded sides */
#home-doors .pack-ghost{
    aspect-ratio: 620 / 777;
    border: 1px solid #1d2329;
    border-radius: 5px;
    background: linear-gradient(160deg, #16191d, #0d0f11);
}

/* Narrow door (smaller screens, menu still on the left): the wall stays
   beside the text, narrowed to the 2 middle columns (4 covers) */
@container door (max-width: 519px){
    #home-doors .door-packs .door-text,
    #home-doors .door-custom .door-text{
        flex-basis: 160px;
    }

    #home-doors .sel-show{
        flex: 0 0 216px;
    }

    #home-doors .pack-wall{
        flex: 0 0 216px;
    }

    /* The 4 visible ones, the others fill the faded sides */
    #home-doors .pack-wall-grid{
        grid-auto-flow: row dense;
    }

    #home-doors .pack-tbc{ grid-area: 1 / 3; }
    #home-doors .pack-f4{ grid-area: 1 / 4; }
    #home-doors .pack-d4{ grid-area: 2 / 3; }
    #home-doors .pack-midnight{ grid-area: 2 / 4; }
}


/* Phones (the door is then under 400px wide): still beside the text, the
   same 4 covers but smaller, and a tighter text block so both fit on one line.
   A media query, as a container query can't style the door itself */
@media screen and (max-width: 455px){
    #home-doors .door-packs,
    #home-doors .door-custom{
        flex-wrap: nowrap;
        gap: 12px;
        padding: 18px;
    }

    #home-doors .door-packs .door-text,
    #home-doors .door-custom .door-text{
        flex: 1 1 0;
        min-width: 0;
    }

    #home-doors .door-packs .door-title,
    #home-doors .door-custom .door-title{
        font-size: 18px;
    }

    #home-doors .door-packs .door-desc,
    #home-doors .door-custom .door-desc{
        font-size: 12.5px;
    }

    #home-doors .door-packs .door-cta,
    #home-doors .door-custom .door-cta{
        min-height: 40px;
        padding: 0 16px;
        font-size: 13px;
    }

    #home-doors .sel-show{
        flex: 0 0 126px;
        min-height: 0;
        margin: -18px -18px -18px 0;
    }

    #home-doors .sel-art{
        left: 50%;
        width: 94%;
    }

    #home-doors .pack-wall{
        flex: 0 0 126px;
        padding: 6px 0;
        -webkit-mask: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent);
        mask: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent);
    }

    #home-doors .pack-wall-grid{
        grid-template-columns: repeat(6, 54px);
        gap: 6px;
    }
}

#home-doors .pack-cover{
    position: relative;
    display: block;
    aspect-ratio: 620 / 777;
    border-radius: 5px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .9);
    transition: transform .25s ease, box-shadow .25s ease;
}

#home-doors .pack-cover img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

/* Thin light edge tinted with the pack's colour */
#home-doors .pack-cover::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 40%, var(--glow));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .7;
}

/* Theme of the pack, at the bottom of the cover on hover only */
#home-doors .pack-name{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 5px 5px;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(transparent, rgba(8, 9, 11, .92) 45%);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

#home-doors .pack-cover:hover .pack-name,
#home-doors .pack-cover:focus-visible .pack-name{
    opacity: 1;
}

#home-doors .pack-cover:focus-visible{
    outline: 2px solid #55f5ff;
    outline-offset: 2px;
}

#home-doors .pack-cover:hover,
#home-doors .pack-cover:focus-visible{
    transform: translateY(-6px);
    box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .95), 0 0 30px -6px var(--glow);
}

@media (prefers-reduced-motion: reduce){
    #home-doors .pack-cover{
        transition: none;
    }
}

/* Very small phones (320px): even smaller covers, the button may wrap */
@media screen and (max-width: 359px){
    #home-doors .pack-wall{
        flex-basis: 104px;
    }

    #home-doors .pack-wall-grid{
        grid-template-columns: repeat(6, 44px);
    }

    #home-doors .sel-show{
        flex-basis: 104px;
    }

    #home-doors .door-packs .door-cta,
    #home-doors .door-custom .door-cta{
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding: 6px 14px;
    }
}

#deals{
    margin-top: 40px;
    max-width: 1470px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 20px;
    align-items: stretch;
}

#deals .deals-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid #181e23;
    border-radius: 10px;
    background: #111315;
    /* The countdown scales with the card, which can get narrow in the grid */
    container-type: inline-size;
}

#deals .deals-info-top{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#deals .deals-head{
    display: flex;
    align-items: center;
    gap: 12px;
}

#deals .deals-dot{
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dfa453;
}

#deals .deals-title{
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.4px;
}

#deals-countdown{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#deals .deals-countdown-label{
    font-size: 13px;
    font-weight: 600;
}

/* Sizes below in em of this font-size: 10px, less when the card can't fit
   the timer's ~19.7em */
#deals .deals-countdown-timer{
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    font-size: min(10px, 5cqi);
}

#deals .deals-countdown-unit{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

#deals .deals-countdown-value,
#deals .deals-countdown-separator{
    font-family: 'ubuntu regular', sans-serif;
    font-weight: 700;
}

#deals .deals-countdown-value{
    font-size: 2.7em;
    line-height: 1.1;
    color: #976fff;
    font-variant-numeric: tabular-nums;
}

#deals .deals-countdown-separator{
    font-size: 2.2em;
    line-height: 1.3;
}

#deals .deals-countdown-name{
    font-size: 1em;
    color: #6f7b86;
}

#deals .deals-info-foot{
    border-top: 1px solid #1c232a;
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #b8c0c8;
}

#deals .deal{
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #fff;
}

#deals .deal:hover .deal-title{
    color: #b79bff;
}

#deals .deal:focus-visible{
    outline: 2px solid #55f5ff;
    outline-offset: 2px;
}

#deals .deal-media{
    position: relative;
    aspect-ratio: 16 / 9;
    background: #2b3036;
}

#deals .deal-media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A thin light slowly running around each deal's picture (each one starting
   elsewhere on the border) */
@property --deal-a{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#deals .deal-media:after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--deal-a), transparent 0 72%, rgba(155, 123, 255, .9) 82%, rgba(226, 168, 91, .9) 87%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: deal-run 12s linear infinite;
}

#deals .deal:nth-of-type(2) .deal-media:after{
    animation-delay: -4s;
}

#deals .deal:nth-of-type(3) .deal-media:after{
    animation-delay: -8s;
}

@keyframes deal-run{
    to{
        --deal-a: 360deg;
    }
}

@media (prefers-reduced-motion: reduce){
    #deals .deal-media:after{
        animation: none;
    }
}

#deals .deal-badge{
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 2px 8px;
    border: 1px solid #54ff54;
    border-radius: 5px;
    background: #0b0b0c;
    color: #54ff54;
    font-size: 12px;
    font-weight: 700;
}

#deals .deal-names{
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#deals .deal-game{
    font-size: 11px;
    color: #9a9a9a;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

#deals .deal-title{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

#deals .deal-prices{
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: figtree, sans-serif;
}

#deals .deal-prices .price-dual{
    font-size: 20px;
}

#deals .deal-prices .price-dual-before{
    font-size: 13px;
    color: #8a97a3;
    text-decoration: line-through;
}

/* Shared by the sections below the deals */
#home-custom .home-cta,
#home-reviews .home-cta{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

#home-custom .home-cta:hover,
#home-reviews .home-cta:hover{
    filter: brightness(1.12);
}

#home-custom .home-cta-outline{
    border: 1px solid #4de3e3;
    color: #4de3e3;
}

#home-reviews .home-cta-fill{
    background: #7b48fc;
    color: #fff;
}

#home-custom a:focus-visible,
#home-reviews a:focus-visible{
    outline: 2px solid #55f5ff;
    outline-offset: 2px;
}

.hand{
    font-family: 'Caveat', cursive;
    font-weight: 600;
}

/* Custom work: one card per portfolio section */
#home-custom{
    margin-top: 64px;
    max-width: 1470px;
}

#home-custom .section-head{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
}

#home-custom .section-head-text{
    border-left: 3px solid;
    border-image: linear-gradient(#8f6bff, #d052d8, #ff7a6b) 1;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#home-custom .section-kicker{
    font-size: 12px;
    color: #8a97a3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#home-custom .section-title{
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

#home-custom .section-desc{
    margin: 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.65;
    color: #b8c0c8;
}

#home-custom .cat-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Inside a card everything is sized in cqw (% of the card width) so the
   little scene keeps its proportions at any width */
.cat{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background: #111315;
    border: 1px solid #232a30;
    border-radius: 10px;
    container-type: inline-size;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cat .im{position:relative;height:64.444cqw;overflow:hidden;background:radial-gradient(100% 70% at 50% 0%,var(--t),transparent 75%),#111315;filter:brightness(.92);transition:filter .18s ease}
.cat .sc{position:absolute;inset:0}
.cat .cat-vid{position:absolute;left:5cqw;top:5cqw;width:90cqw;height:auto;aspect-ratio:16/9;border-radius:1.5cqw;object-fit:cover;box-shadow:0 2.778cqw 8.333cqw rgba(0,0,0,.6)}
.cat .ln{position:absolute;display:block;height:1.389cqw;border-radius:0.833cqw;background:#2a323a}
.cat .lv{position:absolute;top:1.389cqw;left:1.389cqw;background:#e91916;color:#fff;font-size:2.222cqw;font-weight:700;padding:0.556cqw 1.111cqw;border-radius:0.833cqw;letter-spacing:.05em}
.cat .vw{position:absolute;font-size:2.778cqw;font-weight:600;color:#aeb6bd}
.cat .vw i{display:inline-block;width:1.944cqw;height:1.944cqw;border-radius:50%;background:#e91916;margin-right:1.389cqw}
.cat .t1{font-size:2.917cqw;font-weight:700;color:#e6e9ec;line-height:1.3}
.cat .t2{font-size:2.639cqw;color:#8a97a3;line-height:1.3}
.cat .tg{position:absolute;display:inline-flex;align-items:center;gap:1.111cqw;padding:0.833cqw 1.667cqw;border-radius:0.833cqw;background:rgba(11,11,12,.85);color:#fff;font-size:2.500cqw;font-weight:700;letter-spacing:.04em}
.cat .r1{position:absolute;display:flex;align-items:center;gap:1.111cqw;height:3.889cqw}
.cat .r1 .t1{flex:none;margin-right:0.556cqw}
.cat .vw2{margin-left:auto;font-size:2.639cqw;font-weight:600;color:#aeb6bd;display:flex;align-items:center;gap:1.111cqw}
.cat .vw2 i{width:1.667cqw;height:1.667cqw;border-radius:50%;background:#e91916}
.cat .xf{background:#fff!important;color:#0b0b0c!important}
.cat .g4{flex:1;height:0.833cqw;border-radius:0.556cqw;background:#2a323a;margin:0 1.111cqw}
.cat .fo{position:absolute;padding:0.833cqw 2.500cqw;border-radius:3.333cqw;background:#262c32;color:#e6e9ec;font-size:2.500cqw;font-weight:700}
.cat .cn{flex:none;height:38px;display:flex;align-items:center;gap:9px;padding:0 16px;border-top:1px solid #1d2328;background:#0f1113;font-size:14px;font-weight:600;color:#c4cad0;transition:color .18s ease}
.cat .cn b{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.cat:hover,
.cat:focus-visible{
    border-color: var(--c);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -14px var(--c);
}
.cat:hover .im,
.cat:focus-visible .im{
    filter: brightness(1);
}
.cat:hover .cn,
.cat:focus-visible .cn{
    color: #fff;
}
@media (prefers-reduced-motion: reduce){
    .cat, .cat .im, .cat .cn{transition: none}
    .cat:hover, .cat:focus-visible{transform: none}
}

/* Game starting screens with a starting on sale: the card leads to the
   category, except the starting in front (big preview) and its buy button */
.cat-st{
    position: relative;
}
.cat-st .cat-link{
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.cat-st:focus-within{
    border-color: var(--c);
}
/* Above the link, but only the starting and its button catch the clicks */
.cat-st .im{
    z-index: 2;
    pointer-events: none;
}
.cat-st .cat-item{
    pointer-events: auto;
}
.cat-st .cat-item{
    position: absolute;
    z-index: 2;
    left: 17.778cqw;
    top: 7.222cqw;
    width: 64.444cqw;
    height: 36.111cqw;
    overflow: hidden;
    border-radius: 1.111cqw;
    background: #23282d;
    box-shadow: 0 2.778cqw 8.333cqw rgba(0, 0, 0, .6);
}
.cat-st .cat-sale{
    z-index: 2;
    left: 2.222cqw;
    top: 2.222cqw;
    background: #0c0c0d;
    border: 0.278cqw solid #2a323a;
    font-size: 3.056cqw;
    padding: 1.389cqw 2.778cqw 1.389cqw 2.222cqw;
    gap: 1.667cqw;
    pointer-events: none;
}
.cat-st .pk-left{
    padding: 6cqw 2.5cqw 2.2cqw;
}
.cat-st .pk-left-t{
    gap: 1.4cqw;
    font-size: 3.2cqw;
}
.cat-st .pk-left-t .hg{
    width: 3.4cqw;
    height: 3.4cqw;
}
.cat-st .cat-buy{
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 50.5cqw;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.cat-st .cat-buy .pk-buy{
    margin: 0;
    pointer-events: auto;
    min-height: 0;
    height: 9cqw;
    padding: 0 4.5cqw;
    font-size: 3.6cqw;
}

/* Reviews: real screenshots, slightly tilted, fading out at the bottom */
#home-reviews{
    margin-top: 32px;
    padding-top: 32px;
    max-width: 1470px;
    border-top: 1px solid #181e23;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 28px 20px;
    align-items: start;
}

#home-reviews .reviews-intro{
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 6px;
}

#home-reviews .reviews-kicker{
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #8a97a3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#home-reviews .reviews-quote{
    margin: 0;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.15;
    color: #c4b5ff;
}

#home-reviews .reviews-desc{
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #d6d6d6;
}

#home-reviews .reviews-wall{
    min-width: 0;
    position: relative;
    max-height: 420px;
    overflow: hidden;
}

#home-reviews .reviews-wall::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(rgba(12, 12, 13, 0), #0c0c0d);
    pointer-events: none;
}

#home-reviews .reviews-wall-columns{
    column-count: 3;
    column-gap: 16px;
    padding: 6px;
}

#home-reviews .review-shot{
    display: block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
    border: 1px solid #3a4148;
    border-radius: 4px;
    box-sizing: border-box;
    background: #2b3036;
}
#home-reviews .review-shot:nth-child(8n+1){transform: rotate(-1.2deg)}
#home-reviews .review-shot:nth-child(8n+2){transform: rotate(1deg)}
#home-reviews .review-shot:nth-child(8n+3){transform: rotate(-0.8deg)}
#home-reviews .review-shot:nth-child(8n+4){transform: rotate(1.4deg)}
#home-reviews .review-shot:nth-child(8n+5){transform: rotate(-1deg)}
#home-reviews .review-shot:nth-child(8n+6){transform: rotate(0.8deg)}
#home-reviews .review-shot:nth-child(8n+7){transform: rotate(-1.4deg)}
#home-reviews .review-shot:nth-child(8n){transform: rotate(1.1deg)}

@media screen and (max-width: 600px){
    #home-reviews .reviews-wall-columns{
        column-count: 2;
    }
}

/* Background text */
#home-about{
    margin-top: 32px;
    padding-top: 32px;
    max-width: 1470px;
    border-top: 1px solid #181e23;
    margin-bottom: 64px;
}

#home-about h2{
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#home-about p{
    margin: 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.75;
    color: #b8c0c8;
}