/* Gilroy (local files in fonts/). Used on the subscription cards. */
@font-face { font-family: 'Gilroy'; src: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --bg: #0b0c12;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.66);
    --faint: rgba(255, 255, 255, 0.4);
    --glass: rgba(20, 22, 32, 0.55);
    --line: rgba(255, 255, 255, 0.14);
    --accent: #a77bff;
    --gold: #f2c45a;
    --gutter: clamp(20px, calc(22vw - 140px), 280px); /* grows fast on wide screens, stays small on narrow ones */
    --card: clamp(96px, 10.6vw, 210px);
    --hero-img: 66vw; /* width of the sharp hero image (and video) on the right */
    --cat: clamp(56px, 5.5vw, 106px);
    --cat-focus: clamp(92px, 9.3vw, 178px);
    --card-ratio: 1.5; /* card width = height x this (1 = square) */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* nothing (menus, sliding content, price changes) ever makes the page scroll sideways */
}

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

/* Lenis smooth scroll housekeeping. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

.home {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

/* ---------- Opening loader ---------- */

.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: radial-gradient(60% 60% at 50% 45%, #1c1a2c 0%, #121019 70%, #0d0c14 100%);
    transition: opacity 0.7s var(--ease), filter 0.7s var(--ease);
}

.loader.is-done { opacity: 0; filter: blur(12px); pointer-events: none; }

.loader__logo {
    width: clamp(96px, 9vw, 156px);
    overflow: visible;
    animation: loaderIn 0.8s var(--ease) backwards;
}

.loader__logo use { fill: none; }
#loaderPath path { vector-effect: non-scaling-stroke; }
.loader__base { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.2; }

/* The whole outline lights up where a diagonal band passes, top-left to bottom-right, then rests. */
.loader__shine {
    stroke: url(#loaderShine);
    stroke-width: 1.8;
    filter: drop-shadow(0 0 5px rgba(200, 160, 255, 0.9));
}

.loader__band {
    transform: translate(-230px, -230px);
    animation: loaderSweep 1.9s ease-in-out 0.2s 2 both;
}

/* Two slow passes. The travel only spans the logo itself, so the whole pass is spent on it.
   Symmetric ease since it repeats. */
@keyframes loaderSweep {
    0% { transform: translate(-230px, -230px); }
    90%, 100% { transform: translate(230px, 230px); }
}

/* ---------- Homepage entrance after the loader ---------- */

.is-loading .hsale,
.is-loading .topbar,
.is-loading .cats,
.is-loading .info,
.is-loading .shelf,
.is-loading .hints { opacity: 0; }

@keyframes enterIn { from { opacity: 0; filter: blur(10px); } }

.is-entering .hsale { animation: enterIn 0.8s var(--ease) 0.1s backwards; }
.is-entering .topbar { animation: enterIn 0.8s var(--ease) 0.15s backwards; }
/* Category tiles arrive one after another, left to right. */
.is-entering .cat { animation: enterIn 0.7s var(--ease) backwards; }
.is-entering .cat:nth-child(1) { animation-delay: 0.25s; }
.is-entering .cat:nth-child(2) { animation-delay: 0.34s; }
.is-entering .cat:nth-child(3) { animation-delay: 0.43s; }
.is-entering .cat:nth-child(4) { animation-delay: 0.52s; }
.is-entering .cat:nth-child(5) { animation-delay: 0.61s; }
.is-entering .shelf { animation: enterIn 0.8s var(--ease) 0.45s backwards; }
.is-entering .hints { animation: enterIn 0.8s var(--ease) 0.8s backwards; }

@keyframes loaderIn { from { opacity: 0; filter: blur(8px); } }

/* ---------- Background ---------- */

.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--bg); }

.hero-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    filter: blur(18px);
    transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
    /* Stay on the GPU the whole time: when a fade ends, Chrome would otherwise re-draw the big blur and the
       soft mask on the CPU, at a slightly different quality, and the picture visibly jumps. */
    will-change: opacity, filter;
}

.hero-layer.is-in { opacity: 1; filter: blur(0); }
.hero-layer.is-slow { transition-duration: 2.6s; }
/* After a page change the background picture rises from nothing to full over 3.5 s: no blur, and the sharp picture and its
   blurred copy come in together. */
html.nav-slowbg .hero-layer { filter: none; transition: opacity 3.5s ease-in-out; } /* 0 to full in 3.5 s */
.hero-layer.is-out { opacity: 0; filter: blur(18px); }

.hero-layer img { position: absolute; height: 100%; object-fit: cover; }
canvas.hero-layer__amb { position: absolute; height: 100%; } /* small canvas stretched to the screen; the blur hides it */

/* Looping clip: both copies sit in one masked box, so the soft mask is drawn once and does not change while
   the copies cross-fade (a mask on each fading video re-renders and jumps at the start and end of a fade). */
.hero-layer__clipbox video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: opacity;
}

/* "Expanded" image: the same picture, heavily blurred, stretched across the whole screen
   behind the sharp one, so the left side looks like a continuation of it. */
.hero-layer__amb {
    inset: 0;
    width: 100%;
    z-index: 0;
    filter: blur(90px) saturate(1.25) brightness(0.8);
    transform: scale(1.5) translateZ(0);
    will-change: transform;
}

/* Sharp image is shown whole (16:9) in the top-right corner; its left and bottom
   edges melt into the blurred copy behind it. */
.hero-layer .hero-layer__main {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--hero-img);
    height: auto;
    aspect-ratio: 16 / 9;
    z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
    mask-composite: intersect;
}

/* Blurred full-screen copy of the product video: the moving background behind the sharp one. */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}

.hero-video-bg.is-in { opacity: 1; }

.hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%) scale(1.5);
    filter: blur(60px) saturate(1.25) brightness(0.8);
}

/* Product video: sits exactly where the sharp product image is (top-right, 16:9, same soft edges),
   so the blurred copy of the image stays visible around it. Cropped 15% so YouTube's corner marks stay hidden. */
.hero-video {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    width: var(--hero-img);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 1.4s var(--ease), filter 1.4s var(--ease);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
    mask-composite: intersect;
}

.hero-video.is-in { opacity: 1; filter: none; }

/* Cover the box at any shape (it is 16:9 on desktop, taller on phones). */
.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%) scale(1.15);
}

/* Sound toggle for the product video: right end of the tab row, just above the cards. */
.sound {
    margin-left: auto;
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; /* same height as the tabs, so the row doesn't grow */
    height: 32px;
    border-radius: 50%;
    background: rgba(10, 11, 18, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.sound.is-in { opacity: 1; filter: none; pointer-events: auto; }
.sound:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.06); }
.sound svg { width: 17px; height: 17px; }
.sound .sound__on { display: none; }
.sound.is-on .sound__on { display: block; }
.sound.is-on .sound__off { display: none; }


.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 9, 14, 0.7) 0%, rgba(8, 9, 14, 0.3) 38%, rgba(8, 9, 14, 0) 60%),
        /* Ends in exactly the page colour, so the hero has no visible bottom edge. */
        linear-gradient(0deg, var(--bg) 0%, rgba(11, 12, 18, 0.9) 10%, rgba(11, 12, 18, 0.55) 32%, rgba(11, 12, 18, 0) 58%),
        linear-gradient(180deg, rgba(8, 9, 14, 0.6) 0%, rgba(8, 9, 14, 0) 18%);
}

/* ---------- Top bar (PS5 style: big text tabs left, icons right) ---------- */

.topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 40px);
    padding: clamp(16px, 1.6vw, 32px) var(--gutter) 0;
}

/* Progressive blur behind the top bar, so the menu stays readable over busy pictures: strongest at the top,
   fading to nothing at its lower edge, with a light dark tint. */
.topbar::before {
    content: '';
    position: absolute;
    inset: 0 0 calc(clamp(12px, 1vw, 20px) * -1); /* reaches a little below the bar; clicks pass through */
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 8, 14, 0.45), rgba(8, 8, 14, 0));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    pointer-events: none;
}

.brand { flex: none; display: flex; }
.brand img { width: clamp(24px, 1.4vw, 28px); height: auto; }

.nav { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 40px); }

/* Inactive tabs are smaller and dimmer; the active one stands out (PS5 Games / Media). */
.nav a {
    flex: none;
    font-size: clamp(13px, 0.88vw, 17px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.42);
    transform-origin: 50% 100%;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.nav a:hover { color: rgba(255, 255, 255, 0.8); transform: scale(1.06); }
.nav a.is-active { font-size: clamp(15px, 1.15vw, 22px); color: var(--text); font-weight: 700; }

.topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 32px);
}

.icon-btn {
    position: relative;
    width: clamp(24px, 1.3vw, 26px);
    height: clamp(24px, 1.3vw, 26px);
    display: grid;
    place-items: center;
    transition: opacity 0.3s var(--ease);
}

.icon-btn:hover { opacity: 0.75; }
.icon-btn svg { width: clamp(20px, 1.1vw, 22px); height: clamp(20px, 1.1vw, 22px); }

.badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Account pill: same look as the currency button. */
.account {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.account:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }

/* The two pills sit as a pair, closer than the icons. */
.account + .currency-wrap { margin-left: calc(8px - clamp(12px, 1.6vw, 32px)); }

.account__avatar {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/header-logo.png') center / 56% no-repeat, linear-gradient(135deg, #2a2340, #15131f);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 700;
}

/* Logged in: initial on a purple disc, green online dot like the PS5 profile. */
.account.is-in .account__avatar { background: linear-gradient(135deg, var(--accent), #5b3fd6); }
.account.is-in .account__avatar::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 0 2px #15131f;
}

.account__name {
    max-width: 260px; /* grows with the name; only very long names get an ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.currency-wrap { position: relative; }

/* Pill button so it reads as clickable. */
.currency {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.currency:hover,
.currency[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.currency svg { width: 16px; height: 16px; color: var(--muted); transition: transform 0.3s var(--ease); }
.currency[aria-expanded="true"] svg { transform: rotate(180deg); }

.currency-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    width: 300px;
    padding: 14px;
    border-radius: 14px;
    /* Purple-tinted glass: see-through enough that the blur of the page behind shows. */
    background: linear-gradient(160deg, rgba(58, 40, 104, 0.42), rgba(22, 18, 40, 0.5));
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(26px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.22s var(--ease), filter 0.22s var(--ease);
}

.currency-menu[hidden] { display: none; }
.currency-menu.is-open { opacity: 1; filter: none; }

.currency-menu__label {
    padding: 0 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

.currency-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.currency-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.currency-item small { font-size: 12px; font-weight: 500; color: var(--faint); }
.currency-item:hover { background: rgba(255, 255, 255, 0.09); }
.currency-item.is-active { background: rgba(167, 123, 255, 0.16); border-color: rgba(167, 123, 255, 0.5); }
.currency-item.is-active small { color: var(--accent); }

.currency-menu__note {
    margin: 12px 4px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--faint);
}

/* ---------- Category tiles (PS5 top row: one focused big tile, label beside it) ---------- */

.cats {
    display: flex;
    align-items: flex-start;
    gap: clamp(5px, 0.42vw, 8px);
    padding: clamp(14px, 1.6vw, 30px) var(--gutter) 0;
    /* Fixed height (one focused tile): while two tiles swap sizes the row would otherwise dip for a moment
       and everything under it (the sale block) would bob up and down. */
    flex: none;
    height: calc(var(--cat-focus) + clamp(14px, 1.6vw, 30px));
}

.cat {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--cat);
    height: var(--cat);
    border-radius: clamp(8px, 0.62vw, 12px);
    background: #1b1d25;
    outline: 3px solid transparent;
    outline-offset: 4px; /* gap between the focus ring and the tile */
    transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), outline-color 0.3s var(--ease);
}

.cat svg { width: 40%; height: 40%; color: var(--cat-color, #fff); transition: transform 0.45s var(--ease); }

.cat.is-focus {
    width: var(--cat-focus);
    height: var(--cat-focus);
    border-radius: clamp(10px, 0.85vw, 16px);
    background: #181a22;
    outline-color: rgba(226, 214, 222, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.cat.is-focus svg { transform: scale(0.92); }

/* Tiles sit close together; the focused/hovered one pushes its neighbours away to make room for its ring. */
.cat.is-focus,
.cat:hover { margin-inline: clamp(5px, 0.36vw, 7px); }
.cat:first-child { margin-left: 0; }

/* Tiles with artwork instead of an icon: the art fills the whole square. */
.cat__art {
    position: absolute;
    inset: 0 0 var(--strip-h, 0) 0;
    width: 100%;
    height: calc(100% - var(--strip-h, 0px));
    object-fit: cover;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: height 0.35s var(--ease), border-radius 0.35s var(--ease);
}

/* Sits under the small tiles, to the right of the focused one. */
.cat__label {
    position: absolute;
    left: calc(100% + 7px + clamp(10px, 0.8vw, 16px)); /* clears the 7px focus ring, then a gap */
    top: calc(var(--cat) + clamp(10px, 0.9vw, 18px));
    width: max-content;
    font-size: clamp(16px, 1.45vw, 29px);
    font-weight: 300;
    letter-spacing: -0.005em;
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

.cat.is-focus .cat__label { opacity: 1; filter: none; }

/* Name bar: its own band at the bottom of the tile, so the artwork is centred in the space above it.
   On hover the bar slides away and the artwork takes the whole tile. */
.cat { --strip-h: clamp(20px, 1.5vw, 26px); }

.cat__strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    height: var(--strip-h);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background: #15131f;
    font-size: clamp(9px, 0.62vw, 12px);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), height 0.45s var(--ease);
}

.cat.is-focus .cat__strip { font-size: clamp(11px, 0.78vw, 14px); }
.cat:hover,
.cat.is-focus { --strip-h: 0px; } /* the focused tile's name is already written beside it */
.cat:hover .cat__art,
.cat.is-focus .cat__art { border-radius: inherit; }
.cat:hover .cat__strip,
.cat.is-focus .cat__strip { opacity: 0; transform: translateY(4px); }

/* ---------- Info block ---------- */

.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text column stays ~760px wide no matter how big the side padding gets. */
    max-width: min(calc(var(--gutter) + 760px), 100%);
    padding: 0 var(--gutter) clamp(20px, 2.4vw, 40px);
}

@media (min-width: 961px) {
    .info { padding-right: 0; }
}

.info > * {
    animation: blurIn 0.8s var(--ease) backwards;
}

.info > *:nth-child(2) { animation-delay: 0.06s; }
.info > *:nth-child(3) { animation-delay: 0.12s; }
.info > *:nth-child(4) { animation-delay: 0.18s; }
.info > *:nth-child(5) { animation-delay: 0.24s; }
.info > *:nth-child(6) { animation-delay: 0.3s; }
.info > *:nth-child(7) { animation-delay: 0.36s; }

/* Starts only, with "backwards": once over the animation leaves no filter behind (keeps scrolling light). */
@keyframes blurIn { from { opacity: 0; filter: blur(var(--in-blur, 10px)); } }

.eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}


.info h1 {
    margin: 0;
    font-size: clamp(34px, 4.4vw, 76px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.info p {
    margin: 16px 0 0;
    max-width: 520px;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.5;
    color: var(--muted);
}

.fw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

.fw span {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
}

.price { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.price strong { font-size: clamp(24px, 1.9vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.price s { font-size: 16px; color: var(--faint); }

.price em {
    align-self: baseline; /* sits on the same line as the old price */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: #1a1406;
    background: var(--gold);
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn--primary { background: #fff; color: #0b0c12; }
.btn--primary:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
.btn--ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Sale ---------- */

.sale-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

.sale-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.sale-line__dot {
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(242, 196, 90, 0.18);
}

/* Coupon chip with copy action. */
.coupon {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px dashed rgba(242, 196, 90, 0.55);
    background: rgba(242, 196, 90, 0.08);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.coupon:hover { background: rgba(242, 196, 90, 0.14); border-color: rgba(242, 196, 90, 0.85); }

.coupon__code {
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.coupon__action {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    padding: 0 12px;
    background: rgba(242, 196, 90, 0.16);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.coupon__action svg { width: 14px; height: 14px; }
.coupon.is-copied { border-style: solid; border-color: rgba(61, 220, 132, 0.7); }
.coupon.is-copied .coupon__action { background: rgba(61, 220, 132, 0.18); color: #3ddc84; }

.coupon--small { height: 22px; margin-left: 2px; border-radius: 6px; }
.sale-line__extra { margin-left: 10px; font-weight: 600; color: var(--gold); }
.coupon--small .coupon__code { padding: 0 8px; font-size: 12px; }
.coupon--small .coupon__action { padding: 0 8px; font-size: 11px; }
.coupon--small .coupon__action svg { width: 12px; height: 12px; }

@media (max-width: 560px) {
    .sale-line { flex-wrap: wrap; row-gap: 8px; }
}

/* Deal row under a product price: countdown pill + coupon ticket. */
.deal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.deal__timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--muted);
}

.deal__timer svg { width: 15px; height: 15px; color: var(--gold); }
.deal__timer b { color: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Ticket: "+10% extra" stub, perforated edge, code, copy. */
.ticket {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(242, 196, 90, 0.08);
    border: 1px solid rgba(242, 196, 90, 0.4);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.ticket:hover { background: rgba(242, 196, 90, 0.14); border-color: rgba(242, 196, 90, 0.8); }

.ticket__off {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    background: linear-gradient(135deg, #f7d27a, #e0a93a);
    color: #1a1406;
    border-right: 2px dashed rgba(16, 18, 28, 0.55);
}

.ticket__off b { font-size: 13px; font-weight: 800; }
.ticket__off small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.ticket__code {
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ticket .coupon__action { padding: 0 10px; font-size: 11px; }
.ticket.is-copied { border-color: rgba(61, 220, 132, 0.7); }
.ticket.is-copied .coupon__action { background: rgba(61, 220, 132, 0.18); color: #3ddc84; }

/* Sale bar: full width across the top. Three zones: offer on the left, countdown centred, coupon on the right. */
.hsale {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 42px;
    padding: 0 var(--gutter);
    background: transparent; /* no tint, just the blur of what is behind */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    white-space: nowrap;
}

.hsale[hidden] { display: none; }

.hsale__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hsale__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.hsale__name { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #c4a6ff; }
.hsale__text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.hsale__text b { color: var(--text); font-weight: 700; }

/* Countdown: no boxes. A small ring that empties as the sale runs out, "5 days", then a clock whose
   seconds are in the accent colour. */
.hsale__clock { display: flex; align-items: center; gap: 10px; }

.hsale__ring { width: 16px; height: 16px; transform: rotate(-90deg); }
.hsale__ring circle { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 2.4; }
.hsale__ring .hsale__ring-fill {
    stroke: #c4a6ff;
    stroke-linecap: round;
    stroke-dasharray: calc(var(--left, 1) * 100) 100;
    transition: stroke-dasharray 1s linear;
}

.hsale__days { font-size: 12px; font-weight: 600; color: var(--muted); }
.hsale__days b { font-size: 13px; font-weight: 800; color: var(--text); }

.hsale__time {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.hsale__time em { font-style: normal; color: #c4a6ff; }

.hsale__ends { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }

.hsale__hint { color: var(--muted); }

.hsale__code {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 3px 3px 3px 10px; /* equal 3px around the Copy chip so it sits centred */
    border-radius: 7px;
    border: 1px dashed rgba(167, 123, 255, 0.65);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #c4a6ff;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.hsale__code:hover { background: rgba(167, 123, 255, 0.1); border-color: var(--accent); }
.hsale__code .coupon__action { align-self: stretch; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 4px; background: rgba(167, 123, 255, 0.18); color: #c4a6ff; font-size: 11px; letter-spacing: 0; }
.hsale__code.is-copied { border-style: solid; border-color: rgba(61, 220, 132, 0.7); }
.hsale__code.is-copied .coupon__action { background: rgba(61, 220, 132, 0.18); color: #3ddc84; }

@media (max-width: 1100px) { .hsale__text { display: none; } }
@media (max-width: 760px) {
    .hsale { grid-template-columns: auto auto; justify-content: center; }
    .hsale__right, .hsale__ends { display: none; }
}



/* ---------- Tabs ---------- */

.shelf { padding-bottom: clamp(44px, 3.6vw, 66px); } /* leaves room for the key hints row */

.tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--gutter);
    margin-bottom: 4px;
}

.tabs__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }

.tab {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border: 2px solid transparent;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-color: #3d8bff; background: rgba(61, 139, 255, 0.12); }

.key {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    font-size: 10px;
    font-weight: 800;
    color: #0b0c12;
}

/* ---------- Cards ---------- */

.cards {
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 0.8vw, 16px);
    /* Room above the tallest card for its focus ring and hover scale, so the scroller doesn't clip them. */
    height: calc(var(--card) + 18px + 8px);
    padding: 18px var(--gutter) 0;
    overflow-x: auto;
    cursor: grab;
    user-select: none;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
}

.cards::-webkit-scrollbar { display: none; }
.cards.is-dragging { cursor: grabbing; }
.cards.is-dragging .card { pointer-events: none; }
.card img { -webkit-user-drag: none; }

.card {
    position: relative;
    flex: none;
    width: calc(var(--card) * var(--card-ratio));
    height: var(--card);
    margin-bottom: 8px;
    padding: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    outline: 3px solid transparent;
    outline-offset: 5px;
    --in-blur: 8px;
    animation: blurIn 0.6s var(--ease) backwards;
    transform-origin: 50% 100%;
    transition: width 0.45s var(--ease), height 0.45s var(--ease), outline-color 0.3s var(--ease), box-shadow 0.45s var(--ease), transform 0.4s var(--ease);
}

.card:hover { transform: scale(1.04); }

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transition: filter 0.3s var(--ease);
}

.card:hover img { filter: brightness(1.12); }

/* Two light beams chase each other inside a faint track around the border, with a soft glow.
   Product cards: on hover and while selected. Category tiles: on hover only. */
@property --beam {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.card,
.cat { isolation: isolate; --beam-speed: 3.6s; }

/* Track sits exactly on the focus ring: gap + 3px. */
.card { --beam-inset: -8px; --beam-radius: 11px; }
.cat { --beam-inset: -7px; --beam-radius: calc(clamp(8px, 0.62vw, 12px) + 7px); }
.cat.is-focus { --beam-radius: calc(clamp(10px, 0.85vw, 16px) + 7px); }

.card::before, .cat::before,
.card::after, .cat::after {
    content: '';
    position: absolute;
    inset: var(--beam-inset);
    border-radius: var(--beam-radius);
    background: conic-gradient(from var(--beam),
        transparent 0deg, rgba(167, 123, 255, 0.9) 50deg, #fff 72deg, transparent 80deg,
        transparent 180deg, rgba(167, 123, 255, 0.9) 230deg, #fff 252deg, transparent 260deg);
    opacity: 0;
    pointer-events: none;
    animation: beam var(--beam-speed) linear infinite paused;
    transition: opacity 0.4s var(--ease), border-radius 0.45s var(--ease);
}

.card::before, .cat::before {
    z-index: 2;
    padding: 3px;
    background:
        conic-gradient(from var(--beam),
            transparent 0deg, rgba(167, 123, 255, 0.9) 50deg, #fff 72deg, transparent 80deg,
            transparent 180deg, rgba(167, 123, 255, 0.9) 230deg, #fff 252deg, transparent 260deg),
        rgba(255, 255, 255, 0.14);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.card::after, .cat::after {
    z-index: -1;
    filter: blur(8px);
}

/* Category tiles: beams on the border only, no glow. */
.cat::after { display: none; }

.card:hover::before, .card.is-active::before, .cat:hover::before,
.card:hover::after, .card.is-active::after, .cat:hover::after { animation-play-state: running; }
.card:hover::before, .card.is-active::before, .cat:hover::before { opacity: 1; }
.card:hover::after, .card.is-active::after, .cat:hover::after { opacity: 0.6; }

/* Endless loop, so linear instead of the house curve. */
@keyframes beam { to { --beam: 360deg; } }

/* Product name inside the card, on a dark blurred bar along the bottom edge. */
.card__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px 12px;
    border-radius: 0 0 6px 6px;
    background: rgba(10, 11, 18, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: clamp(12px, 0.75vw, 14px);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.card.is-active {
    outline-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.card.is-active .card__name,
.card:hover .card__name { opacity: 1; }

/* Discount: a gold bookmark ribbon hanging from the top edge, notched at the bottom. */
.card__deal {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(38px, 2.6vw, 48px);
    padding: 7px 6px 13px;
    background: linear-gradient(180deg, #ffe08f 0%, #f2c45a 45%, #d99a2b 100%);
    color: #1a1406;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.card__deal b { font-size: clamp(14px, 0.95vw, 18px); font-weight: 900; letter-spacing: -0.03em; }
.card__deal small { margin-top: 3px; font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }

.card__deal--free { background: linear-gradient(180deg, #a8f7c9 0%, #4fd892 45%, #23a463 100%); color: #06200f; }
.card__deal--free b { font-size: clamp(11px, 0.75vw, 14px); letter-spacing: 0.02em; text-transform: uppercase; }

/* Label: a simple rounded pill with a blurred background, top-right. */
.card__label {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(10, 11, 18, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.card__label svg { width: 14px; height: 14px; color: #fff; }
.card__label span { color: #fff; }

/* Small cards: the label shrinks to just its icon so it never runs into the discount ribbon. */
.card { container-type: inline-size; }
@container (max-width: 220px) {
    .card__label { padding: 5px 7px; }
    .card__label span { display: none; }
}

/* ---------- Hints ---------- */

.hints {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(14px, 1.4vw, 24px);
    display: flex;
    gap: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.hints > span { display: flex; align-items: center; gap: 6px; }

.key__arrow { width: 12px; height: 12px; }
.key__arrow--left { transform: rotate(180deg); }

/* ---------- Scroll: hero fades back as the page scrolls (--p goes 0 to 1, set in app.js) ---------- */

.home { --p: 0; }

.home .cats,
.home .info,
.home .shelf,
.home .hints { opacity: calc(1 - var(--p) * 1.6); }

/* The blur is only there while the hero is part way out: at the top (and once it is gone) these big blocks
   carry no filter, so they are not redrawn while the page scrolls. */
.home.is-scrolled .cats,
.home.is-scrolled .info,
.home.is-scrolled .shelf,
.home.is-scrolled .hints { filter: blur(calc(var(--p) * 10px)); }

/* Parallax: the sale/hero text and the card row move together, a little faster than the page, while the
   background lags behind (and zooms in slightly), so the content slides off over it. */
.home .info,
.home .shelf,
.home .hints { transform: translateY(calc(var(--p) * -18vh)); }

.hero-bg { transform: translateY(calc(var(--p) * 30vh)) scale(calc(1 + var(--p) * 0.06)); transform-origin: 50% 30%; }
.home .hero-video,
.home .hero-video-bg { transform: translateY(calc(var(--p) * 30vh)); } /* the product video lags with the image it covers */
.hero-shade { background-color: rgba(8, 9, 14, calc(var(--p) * 0.7)); }

/* ---------- About (scroll-lit gradient text) ---------- */

.about { position: relative; height: 520vh; background: var(--bg); } /* last 100vh is covered by the Reliability sheet */

/* Long, eased fades that scroll with the section (not with the sticky video): the video melts in from the
   page as it arrives and melts out as it leaves, but is fully visible while it fills the screen. */
.about::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 55vh; /* short enough to have scrolled past by the time the About text comes in */
    pointer-events: none;
}

.about::before { top: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 12, 18, 0.97) 8%, rgba(11, 12, 18, 0.9) 16%, rgba(11, 12, 18, 0.78) 24%, rgba(11, 12, 18, 0.62) 32%, rgba(11, 12, 18, 0.45) 40%, rgba(11, 12, 18, 0.3) 48%, rgba(11, 12, 18, 0.17) 56%, rgba(11, 12, 18, 0.08) 64%, rgba(11, 12, 18, 0.02) 72%, transparent 80%); }

/* Scroll-driven video behind the About content. --reveal (0..1, from app.js) brings the content in
   and darkens the video under it. */
.about__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    /* Parallax: the video settles from a slight zoom as you scroll. */
    transform: scale(calc(1.12 - var(--pp) * 0.12));
}

.about__sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Darkest behind the centred text, opening up towards the edges. */
    background:
        radial-gradient(60% 55% at 50% 45%, rgba(11, 12, 18, calc(var(--reveal) * 0.85)), rgba(11, 12, 18, calc(var(--reveal) * 0.55)) 70%, rgba(30, 18, 52, calc(var(--reveal) * 0.4)) 100%);
}

/* Fills the pinned About with the Reliability background as you scroll, rising from the bottom behind a
   soft mask edge, so the cards later slide over a background that is already there (no sheet edge).
   --fill runs ahead of --cover so the fill is complete before the cards arrive. */
.about__sticky::after {
    --fill: calc(min(var(--cover) * 1.7, 1) * 180%);
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(70% 45% at 20% 25%, rgba(58, 44, 140, 0.35), transparent 70%),
        radial-gradient(60% 40% at 85% 60%, rgba(88, 40, 120, 0.28), transparent 70%),
        linear-gradient(180deg, #120f26 0%, #16122e 100%);
    -webkit-mask-image: linear-gradient(to top, #000 calc(var(--fill) - 80%), transparent var(--fill));
    mask-image: linear-gradient(to top, #000 calc(var(--fill) - 80%), transparent var(--fill));
    /* Fades in with the scroll as well, so it never lands as a solid block. */
    opacity: min(var(--cover) * 1.7, 1);
}

.about__copy {
    opacity: var(--reveal);
    filter: blur(calc((1 - var(--reveal)) * 12px));
}


.about__sticky {
    --reveal: 0;
    --pp: 0;
    --cover: 0; /* 0..1 while the Reliability sheet slides over: the About darkens underneath it */
    position: sticky;
    top: 0;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0 var(--gutter);
    text-align: center;
}

/* Scattered script cards (positions set by app.js): small, slightly tilted, behind the text. */
.scatter { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.scatter__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(120px, 10vw, 190px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    will-change: transform, opacity;
}

.scatter__card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Parallax: the text drifts up through the middle of the screen a little faster than the page scrolls. */
.about__copy { transform: translateY(calc((0.5 - var(--pp)) * 140px)); }

.about__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1100px; }

.about__eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d4bfff;
}

/* Three facts under the statement, split by thin lines. */
.about__facts {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 3vw, 48px);
}

.about__facts div { display: grid; gap: 4px; padding: 0 clamp(20px, 2.6vw, 48px); }
.about__facts div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.about__facts b { font-family: 'Big Shoulders Display', sans-serif; font-size: clamp(32px, 3vw, 56px); font-weight: 800; line-height: 1; color: #fff; }
.about__facts span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Big paragraph; the gradient drifts slowly and each word goes from dim to lit as you scroll. */
.about__text {
    max-width: 1280px;
    margin: 24px 0 0;
    font-size: clamp(26px, 3vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
}


/* Each word carries the same screen-fixed gradient, so together they read as one continuous gradient,
   while each word can still be dimmed on its own. */
.about__text .w {
    background: linear-gradient(100deg, #c4a6ff 0%, #ff8fd0 30%, #ffb38a 50%, #a77bff 75%, #c4a6ff 100%);
    background-size: 200vw 100vh;
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Always fully lit; the gradient slides through its colours as the section scrolls (--pp, 0..1). */
    background-position: calc(var(--pp) * -100vw) 0;
}

/* ---------- Reliability ---------- */

.stats {
    /* A full-screen sheet that slides up over the last screen of the About section (pinned underneath).
       --q (0..1, from app.js) is how far it has come in. Nothing appears at once: first a soft purple glow
       opens up, then the solid background opens out from the middle, and it is complete once the sheet
       sits in place. The content lags behind for a parallax feel, and the About underneath sinks back. */
    --q: 1;
    position: relative;
    z-index: 3;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    margin-top: -100vh;
    padding: clamp(60px, 7vw, 120px) var(--gutter);
    text-align: center;
}

/* Glow: fades in early and moves slower than the sheet. */
.stats::before {
    content: '';
    position: absolute;
    inset: -20% 0;
    z-index: -1;
    background:
        radial-gradient(50% 40% at 50% 45%, rgba(167, 123, 255, 0.13), transparent 70%),
        radial-gradient(40% 30% at 15% 80%, rgba(255, 143, 208, 0.08), transparent 70%),
        radial-gradient(40% 30% at 85% 75%, rgba(91, 63, 214, 0.12), transparent 70%);
    opacity: clamp(0, calc(var(--q) * 2.2), 1);
    transform: translateY(calc((1 - var(--q)) * -18%));
    /* Soft top and bottom so the glow never ends in a line (the footer sits right below). */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
}

/* Solid background. Its top fades out over the first screen, where the About fill (same colours) already
   covers the page, so the sliding sheet never shows an edge. */
.stats::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Same dark ink as the opening loader (a soft lighter centre on the first screen); the cards then tint it
       with their own colour (.stats__tint). Fades back to the page colour at the very bottom for the footer. */
    background:
        radial-gradient(60% 50vh at 50% 60vh, #1c1a2c 0%, transparent 100%),
        linear-gradient(180deg, #121019 0%, #121019 85%, var(--bg) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60vh);
    mask-image: linear-gradient(to bottom, transparent 0, #000 60vh);
}

/* Background tint: takes the main colour of the card filling the screen (--tint, "r, g, b", eased in
   app.js) and fades with --tint-a as the section comes and goes. Fixed, so it always fills the screen. */
.stats__tint {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(90% 80% at 50% 50%, rgba(var(--tint, 120, 90, 220), 0.14), transparent 80%),
        rgba(var(--tint, 120, 90, 220), 0.2); /* the whole screen takes the colour, a touch stronger in the middle */
    opacity: var(--tint-a, 0);
}

/* Content arrives just behind the background fill, drifting up from below. */
.stats > :not(.stats__tint) {
    opacity: clamp(0, calc((var(--q) - 0.12) * 2.8), 1);
    transform: translateY(calc((1 - var(--q)) * 90px));
}


.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    margin-top: clamp(40px, 5vw, 80px);
}

.stat { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; }

/* Soft purple glow behind each number. */
.stat::before {
    content: '';
    position: absolute;
    inset: 0 10%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(167, 123, 255, 0.22), transparent);
    filter: blur(20px);
}

.stat b {
    font-size: clamp(36px, 3.6vw, 80px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: #c4a6ff;
}

.stat small { font-size: 15px; color: var(--muted); }

/* ---------- FAQ (under the cards) ----------
   Questions down the left, the chosen answer in a glass panel on the right. All answers share one grid
   cell, so switching only fades opacity/blur: nothing changes height and nothing below moves. */

.faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 4vw, 80px);
    align-self: center;
    width: min(92%, 1680px);
    margin-top: clamp(120px, 12vw, 220px);
    text-align: left;
}

.faq__title {
    margin: 6px 0 clamp(24px, 2.4vw, 40px);
    font-family: 'Big Shoulders Display', 'Inter', sans-serif;
    font-size: clamp(40px, 4vw, 76px);
    font-weight: 800;
    line-height: 0.92;
    color: #efe6ff;
}

.faq__list { display: flex; flex-direction: column; }

.faq__q {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 600;
    text-align: left;
    color: var(--muted);
    transition: color 0.3s var(--ease);
}

.faq__q:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.faq__q:hover { color: var(--text); }
.faq__q.is-active { color: #fff; }

.faq__num {
    flex: none;
    width: 2ch;
    font-family: 'Big Shoulders Display', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--faint);
    transition: color 0.3s var(--ease);
}

.faq__q.is-active .faq__num { color: #c4a6ff; }

/* The label slides a touch to the right when chosen, with a short accent line growing in front of it. */
.faq__label { position: relative; transition: transform 0.4s var(--ease); }
.faq__label::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: #c4a6ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}

.faq__q.is-active .faq__label { transform: translateX(14px); }
.faq__q.is-active .faq__label::before { transform: scaleX(1); }

.faq__panel {
    position: relative;
    display: grid;
    align-self: stretch;
    padding: clamp(32px, 3.4vw, 56px);
    border-radius: 28px;
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(167, 123, 255, 0.18), transparent 70%),
        radial-gradient(60% 50% at 0% 100%, rgba(255, 143, 208, 0.08), transparent 70%),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

/* Faint CodeM mark in the bottom-right corner of the answer panel. */
.faq__panel::after {
    content: '';
    position: absolute;
    right: clamp(24px, 3vw, 48px);
    bottom: clamp(20px, 2.4vw, 40px);
    width: clamp(90px, 8vw, 140px);
    aspect-ratio: 1;
    background: #c4a6ff;
    -webkit-mask: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/logo-mark.png') center / contain no-repeat;
    mask: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/logo-mark.png') center / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
}

.faq__a {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.45s var(--ease), filter 0.45s var(--ease), transform 0.45s var(--ease);
}

.faq__a.is-active { opacity: 1; filter: none; transform: none; pointer-events: auto; transition-delay: 0.08s; }

/* Big faint number behind the answer. */
.faq__a-num {
    position: absolute;
    right: clamp(24px, 3vw, 48px);
    top: clamp(10px, 1.6vw, 24px);
    font-family: 'Big Shoulders Display', 'Inter', sans-serif;
    font-size: clamp(90px, 9vw, 160px);
    font-weight: 800;
    line-height: 1;
    color: rgba(196, 166, 255, 0.08);
    pointer-events: none;
}

.faq__a h3 { margin: 0; max-width: 85%; font-size: clamp(22px, 1.9vw, 32px); font-weight: 800; line-height: 1.15; }
.faq__a p { margin: 16px 0 0; max-width: 560px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: var(--muted); }

.faq__more { grid-area: 2 / 1; align-self: end; margin: 28px 0 0; font-size: 14px; color: var(--faint); }
.faq__more a { color: #c4a6ff; font-weight: 600; }
.faq__more a:hover { color: #fff; }

@media (max-width: 900px) {
    .faq { grid-template-columns: 1fr; width: 100%; }
}

.stats__thanks {
    position: relative;
    display: inline-block;
    margin: 0 0 26px; /* room for the underline */
    font-size: clamp(20px, 1.8vw, 32px);
    font-weight: 500;
}

.stats__thanks em { font-style: normal; font-weight: 700; color: #c4a6ff; }

/* Hand-drawn marker stroke under "CodeM" only: across, then back in a quick hook, like a pen flourish.
   Two slightly offset strokes give it a marker texture. It draws itself in when the line appears. */
.stats__mark { position: relative; display: inline-block; }

.stats__swash {
    position: absolute;
    left: -6%;
    top: 100%;
    width: 112%;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

.stats__swash path {
    fill: none;
    stroke: #c4a6ff; /* pastel lilac */
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.1s var(--ease) 0.4s;
}

.stats__swash .stats__swash-2 { stroke-width: 2.5; opacity: 0.5; transition-delay: 0.5s; }

.stats__thanks.is-in .stats__swash path { stroke-dashoffset: 0; }

@media (max-width: 960px) {
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .about__sticky { padding-bottom: 0; }
    .about__facts div { padding: 0 14px; }
    .scatter__card { width: 90px; }
}

@media (max-width: 560px) {
    .about { height: 440vh; }
}

/* Reliability card: rounded, full-width, artwork behind, text on the left (like the GTA VI site cards). */
.rcard {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end; /* text sits at the bottom of the card */
    width: min(92%, 1680px); /* narrower than the page, centred */
    align-self: center;
    --k: 0; /* -1..1: card's position in the screen, for the inner parallax (set in app.js) */
    min-height: min(56vh, 540px);
    border-radius: clamp(20px, 2vw, 36px);
    overflow: hidden;
    text-align: left;
}

.rcard__art {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Anchored low so the couple at the door keeps their feet in a wide card. */
    background: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/reliability.webp') right center / cover no-repeat,
        url('https://dunb17ur4ymx4.cloudfront.net/packages/images/2e7e61ab3b8883cbb91ac8d0a5c1a1452c54e53a.png') center / cover no-repeat;
    /* Parallax inside the card. */
    /* Gently zooms in as the card reaches the middle of the screen and back out as it leaves. */
    transform: scale(calc(1.02 + var(--near, 0) * 0.08));
    transition: transform 0.2s linear;
}

.rcard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(11, 12, 18, 0.92) 0%, rgba(11, 12, 18, 0.7) 38%, rgba(11, 12, 18, 0.15) 70%, transparent 100%);
}

/* The text moves at its own speed inside the card (--k, -1..1 from app.js): it sits lower while the card
   is below the middle and overtakes it on the way up, so text, card and artwork read as three depths. */
.rcard__body {
    max-width: 820px;
    padding: clamp(24px, 3.4vw, 64px) clamp(28px, 5vw, 96px);
    /* Smaller on phones, where the card is only as tall as its text and the padding is thin. */
    transform: translateY(calc(var(--k) * clamp(16px, 3vw, 48px)));
    will-change: transform;
}

/* Card contents stay put; only the artwork breathes with the scroll (see .rcard__art). */
.rcard__eyebrow, .rcard__title { display: block; }

.rcard__eyebrow {
    font-family: 'Big Shoulders Display', 'Inter', sans-serif;
    font-size: clamp(16px, 1.3vw, 22px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c4a6ff;
}

.rcard__title {
    margin: 6px 0 0;
    font-family: 'Big Shoulders Display', 'Inter', sans-serif;
    font-size: clamp(40px, 4.6vw, 88px);
    font-weight: 800;
    line-height: 1.04;
    color: #efe6ff;
    white-space: nowrap; /* exactly two lines: "CFX.re Verified" / "CodeM" */
}

.rcard__text { margin: 18px 0 0; max-width: 560px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.45; font-weight: 500; }

.rcard .stats__grid { grid-template-columns: repeat(4, auto); justify-content: start; gap: clamp(18px, 2.4vw, 40px); margin-top: clamp(24px, 2.6vw, 40px); }
.rcard .stat { align-items: flex-start; gap: 4px; padding: 0; }
.rcard .stat::before { display: none; }
.rcard .stat b { font-size: clamp(24px, 2.2vw, 40px); }
.rcard .stat small { font-size: 13px; }

.rcard__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin-top: clamp(24px, 2.6vw, 40px);
    padding: 0 26px;
    border-radius: 999px;
    background: #e4d6ff;
    color: #120d22;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.rcard__btn:hover { background: #fff; }
.rcard__btn svg { width: 18px; height: 18px; }

/* GitBook card: cool blues to match its blue-lit artwork. */
.rcard--docs .rcard__eyebrow { color: #93b4ff; }
.rcard--docs .rcard__title { color: #e8efff; }
.rcard--docs .rcard__text { color: #dce5ff; }
.rcard--docs .rcard__btn { background: #c7d6ff; color: #0b1430; }
.rcard--docs .rcard__btn:hover { background: #e3ebff; }

/* Small © after a brand name, like the one on the logo. */
.copy-mark { margin-left: 1px; font-size: 0.6em; vertical-align: super; line-height: 0; }

/* Marketplace card: warm reds to match its red-lit artwork. */
.rcard--red .rcard__eyebrow { color: #ff9e98; }
.rcard--red .rcard__title { color: #ffeae7; }
.rcard--red .rcard__text { color: #f6dedb; }
.rcard--red .stat b { color: #ffa59e; }
.rcard--red .stat small { color: rgba(255, 214, 209, 0.7); }

/* Pastel red, matching the red lamp light in the Marketplace artwork. */
.rcard__btn--red { background: #ffaaa5; color: #2a0d10; }
.rcard__btn--red:hover { background: #ffc9c5; }

/* Stacked cards with room between them. */
.rcard-wrap {
    position: relative;
    align-self: center;
    width: min(92%, 1680px);
}

.rcard-wrap + .rcard-wrap { margin-top: clamp(24px, 3vw, 48px); }
.rcard-wrap .rcard { width: 100%; }


/* Mirrored card: text on the right, dark side of the gradient on the right. */
.rcard--right { justify-content: flex-end; text-align: right; }
.rcard--right::after { background: linear-gradient(270deg, rgba(11, 12, 18, 0.92) 0%, rgba(11, 12, 18, 0.7) 38%, rgba(11, 12, 18, 0.15) 70%, transparent 100%); }
.rcard--right .rcard__text { margin-left: auto; }

/* Artwork for the extra cards; a script image shows until the real art is added. */
.rcard--docs .rcard__art {
    background: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/docs.webp') left 30% / cover no-repeat,
        url('https://dunb17ur4ymx4.cloudfront.net/packages/images/390a4d666666c7ccc93762bb36bf686f905eddf3.png') center / cover no-repeat;
}

.rcard--youtube .rcard__art {
    /* Anchored to the top (nothing cut off the head) at 120% height so it can slide left; the character sits in the middle of the card
       (--art-x is set in app.js). The image's own left edge is a flat purple, so the same colour fills any gap. */
    background: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/youtube.webp') var(--art-x, right) top / auto 120% no-repeat, #211c44;
}

@media (max-width: 640px) {
    .rcard__title { white-space: normal; }
}

/* Card size (desktop), like the GTA VI site cards: about 68.5% of the screen wide, 27.4% tall,
   3.3% padding, a smaller one-line title and a 2% gap between cards. The FAQ lines up with them. */
@media (min-width: 961px) {
    .rcard-wrap, .faq { width: 68.5vw; max-width: calc(100vw - 32px); }
    .rcard-wrap + .rcard-wrap { margin-top: 2vw; }
    .rcard { min-height: 27.4vw; padding: 3.3vw; border-radius: 1.6vw; }
    .rcard__body { padding: 0; }
    .rcard__eyebrow { font-size: clamp(15px, 1vw, 20px); }
    .rcard__title { font-size: clamp(36px, 3.1vw, 64px); }
    .rcard__text { margin-top: 14px; font-size: clamp(15px, 0.95vw, 19px); }
    .rcard__btn { height: clamp(46px, 3vw, 60px); margin-top: clamp(20px, 1.4vw, 28px); padding: 0 clamp(22px, 1.5vw, 30px); font-size: clamp(15px, 1vw, 19px); }
    .rcard .stats__grid { margin-top: clamp(18px, 1.4vw, 28px); }
}

@media (max-width: 960px) {
    .rcard, .rcard-wrap { width: 100%; }
    .rcard .stats__grid { grid-template-columns: repeat(2, auto); }
}

.rcard__body { position: relative; z-index: 1; }

/* Scroll reveal: blur to sharp, staggered by --d. */
[data-reveal] {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
    transition-delay: calc(var(--d, 0) * 0.08s);
}

[data-reveal].is-in { opacity: 1; filter: none; }

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 3vw, 48px);
    padding: clamp(80px, 8vw, 140px) var(--gutter) clamp(48px, 5vw, 80px);
    /* No solid fill: the page background shows through, so the stats glow above fades into it. */
    /* Kept clear of the top edge (centre 45% down, 35% tall) so the tint never starts in a line. */
    background: radial-gradient(60% 35% at 50% 45%, rgba(167, 123, 255, 0.06), transparent 70%);
    text-align: center;
}

/* Logo in the brand gradient (the SVG is used as a mask). */
.site-footer__logo {
    width: clamp(96px, 8vw, 140px);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #c4a6ff 0%, #ff8fd0 55%, #ffb38a 100%);
    -webkit-mask: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/logo-mark.png') center / 130% no-repeat;
    mask: url('https://cdn.jsdelivr.net/gh/ThaCly/codem-media@v2/img/logo-mark.png') center / 130% no-repeat;
    filter: drop-shadow(0 10px 30px rgba(167, 123, 255, 0.35));
}



.site-footer__cta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    width: min(1140px, 100%);
    padding: clamp(24px, 2.6vw, 40px) clamp(28px, 4vw, 72px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    text-align: left;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.site-footer__cta:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); }

.site-footer__cta-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(17px, 1.4vw, 24px);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-footer__cta-title svg { width: 28px; height: 28px; color: #fff; }
.site-footer__cta-text { font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, 0.85); }

.site-footer__social { display: flex; gap: clamp(22px, 2.4vw, 40px); }
.site-footer__social a { color: rgba(255, 255, 255, 0.85); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.site-footer__social a:hover { color: #fff; transform: translateY(-2px); }
.site-footer__social svg { display: block; width: 26px; height: 26px; }

.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(18px, 2vw, 32px); }
.site-footer__links a { font-size: 15px; font-weight: 500; color: #c9bde6; transition: color 0.3s var(--ease); }
.site-footer__links a:hover { color: #fff; }

.site-footer__notice {
    width: min(560px, 100%);
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.site-footer__notice p { margin: 0; }
.site-footer__copy { margin-top: 10px !important; color: var(--faint); }

@media (max-width: 760px) {
    .site-footer__cta { grid-template-columns: 1fr; border-radius: 28px; text-align: center; }
    .site-footer__cta-title { justify-content: center; }
}

/* ---------- Sale in the home hero (from the imported theme prototype): giant number + countdown ---------- */

/* During a sale the hero has two parts: the sale block, centred in the free space under the category tiles,
   and a welcome line with the buttons right above the card row. */
.info:has(.sale-a) { justify-content: flex-start; padding-top: clamp(16px, 1.6vw, 28px); }
.info .sale-a { margin-block: auto; }

.sale-welcome h2 {
    margin: 0;
    font-size: clamp(22px, 1.8vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.info .sale-welcome p { margin: 8px 0 0; max-width: 720px; font-size: clamp(14px, 0.95vw, 17px); color: var(--muted); }
/* Highlighted words in the welcome line: sale gold, no backing. */
.info .welcome-text { max-width: 720px; } /* the welcome line runs wider than other hero text */
.sale-welcome mark,
.welcome-text mark { background: none; color: var(--gold); font-weight: 700; }
.sale-welcome .actions { margin-top: clamp(14px, 1.2vw, 20px); }

.sale-a { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 24px); } /* big number on top, details under it */

.sale-a__big {
    flex: none;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: clamp(96px, 9.5vw, 184px);
    line-height: 1; /* a tighter line box would cut the tops off the gradient-filled digits */
    margin-block: -0.09em;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffe39a, #e08a3a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 40px rgba(242, 196, 90, 0.35));
}

/* "OFF" under the number, in the same gold, with the small coupon beside it. */
.sale-a__off { display: flex; align-items: center; gap: clamp(12px, 1vw, 18px); margin-top: 0.2em; }

.sale-a__offtext {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: clamp(33px, 3.2vw, 62px);
    line-height: 1;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, #ffe39a, #e08a3a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sale-coupon {
    display: grid;
    gap: 3px;
    padding: 5px 6px 6px 9px;
    border: 1px dashed rgba(242, 196, 90, 0.7);
    border-radius: 10px;
    background: rgba(242, 196, 90, 0.08);
    text-align: left;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.sale-coupon:hover { background: rgba(242, 196, 90, 0.16); border-color: var(--gold); }
.sale-coupon__deal { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.sale-coupon__deal b { color: var(--gold); }
.sale-coupon__code { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: #fff; }
.sale-coupon .coupon__action { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; background: var(--gold); color: #1a1406; font-size: 10px; letter-spacing: 0; }
.sale-coupon .coupon__action svg { width: 10px; height: 10px; }
.sale-coupon.is-copied { border-style: solid; border-color: #3ee08f; }
.sale-coupon.is-copied .coupon__action { background: #3ee08f; }

.sale-a__body { min-width: 0; }

.info .sale-a__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--gold);
}

.sale-a__name i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: livePulse 1.6s ease-in-out infinite; }
.info .sale-a__body p { margin: 10px 0 14px; font-size: 16px; }

/* Sale countdown in the hero: one line of big condensed numbers, each followed by its unit in small caps;
   the seconds are in the sale gold. Only the ones digit of a number comes in from a soft blur when it changes. */
.cd { display: flex; align-items: baseline; gap: clamp(14px, 1.3vw, 24px); }
.cd__part { display: inline-flex; align-items: baseline; gap: 5px; }

.cd b {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: clamp(36px, 3vw, 54px);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.cd b i { display: inline-block; width: 0.56em; text-align: center; font-style: normal; } /* fixed digit width: the block never shifts as the numbers change */
.cd b i.is-tick { animation: cdTick 0.55s var(--ease); }
.cd small { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.cd__part--s b { color: var(--gold); }

@keyframes cdTick {
    from { opacity: 0; filter: blur(8px); transform: translateY(-4px); }
    to { opacity: 1; filter: none; transform: none; }
}

.sale-a .actions { margin-top: 18px; }

.code-chip {
    display: inline-flex;
    align-items: stretch;
    height: 48px;
    overflow: hidden;
    border: 2px dashed rgba(242, 196, 90, 0.75);
    border-radius: 14px;
}

.code-chip b { display: flex; align-items: center; padding: 0 16px; background: rgba(242, 196, 90, 0.12); font-size: 16px; letter-spacing: 0.14em; }
.code-chip .coupon__action { display: flex; align-items: center; gap: 4px; padding: 0 14px; background: var(--gold); color: #1a1406; font-size: 13px; font-weight: 800; }
.code-chip.is-copied { border-color: #3ee08f; }
.code-chip.is-copied .coupon__action { background: #3ee08f; }

@media (max-width: 760px) {
    .sale-a { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sale-a__big { font-size: 96px; }
}

/* Basket cross-sell */
.cross-sell { padding-left: 0; padding-right: 0; }
.cross-sell .pkg-more__row { gap: 16px; }
.xs-card { flex: none; width: clamp(220px, 17vw, 280px); display: grid; gap: 10px; }
.xs-card .card { width: 100%; height: auto; aspect-ratio: 3 / 2; margin: 0; opacity: 1; filter: none; animation: none; }
.xs-card .card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.xs-card__body { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; }
.xs-card__body a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs-card__body span { flex: none; color: var(--muted); }
.xs-card__add { justify-content: center; height: 40px; }

/* Category cards, second pass: one clear image per card, taller, readable text */
.catrow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: min(100%, calc(1100px + var(--gutter) * 2)); padding-top: clamp(16px, 1.6vw, 28px); }
.catcard { height: clamp(96px, 7.6vw, 128px); border-radius: 18px; }
.catcard__art { opacity: 0.92; }
.catcard__art img { object-position: center 35%; }
.catcard::after { background: linear-gradient(0deg, rgba(8, 9, 14, 0.96) 0%, rgba(8, 9, 14, 0.7) 38%, rgba(8, 9, 14, 0) 72%); }
.catcard:hover .catcard__art { opacity: 1; transform: scale(1.05); }
.catcard__text { left: 16px; bottom: 13px; }
.catcard__name { font-size: clamp(16px, 1.25vw, 21px); }
.catcard__text small { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.catcard--subscription::after { background: linear-gradient(0deg, rgba(26, 18, 4, 0.97) 0%, rgba(26, 18, 4, 0.72) 40%, rgba(26, 18, 4, 0) 75%); }
.catcard--subscription { box-shadow: inset 0 0 0 1px rgba(242, 196, 90, 0.25); }

@media (max-width: 960px) {
    .catcard { width: 200px; height: 96px; }
    .catcard--subscription { width: 240px; }
}

/* Plan cards: big count and "everything in X, plus" */
.plan__big { display: flex; align-items: baseline; gap: 10px; margin: 12px 6px 0; }
.plan__big b { font-family: 'Big Shoulders Display', sans-serif; font-size: 64px; font-weight: 800; line-height: 0.9; color: var(--tone); }
.plan__big span { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan__groups--extras li span::before { content: "+"; }
.plan__more-extras span { color: var(--faint); }
.plan__more-extras span::before { content: "" !important; margin: 0 !important; }
.plan__billed b { color: var(--gold); }

/* Savings calculator */
.plus-calc { max-width: 1280px; margin-top: clamp(56px, 5vw, 96px); }
.plus-calc[hidden] { display: none; }
.plus-calc__text { max-width: 640px; margin: 12px 0 24px; color: var(--muted); line-height: 1.55; }
.plus-calc__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.plus-calc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.calc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.calc-item:has(input:checked) { border-color: var(--accent); background: rgba(167, 123, 255, 0.12); }
.calc-item input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.calc-item img { flex: none; width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
.calc-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
.calc-item b { flex: none; font-size: 14px; }

.plus-calc__result {
    position: sticky;
    top: 28px;
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(167, 123, 255, 0.45);
    border-radius: 24px;
    background: radial-gradient(100% 80% at 100% 0%, rgba(167, 123, 255, 0.2), transparent 60%), rgba(18, 19, 28, 0.8);
}

.calc-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.calc-row--plan b { color: var(--text); font-size: 18px; }
.calc-save { padding: 12px 14px; border-radius: 14px; background: rgba(62, 224, 143, 0.14); color: #3ee08f; font-size: 22px; font-weight: 800; text-align: center; }
.calc-hint, .calc-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.plus-calc__result .btn { justify-content: center; }

@media (max-width: 960px) {
    .plus-calc__body { grid-template-columns: 1fr; }
    .plus-calc__list { grid-template-columns: 1fr; }
    .plus-calc__result { position: static; }
}

.basket__row--save b { color: #3ee08f; }
.basket__coupon { display: grid; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.basket__coupon .code-chip { height: 42px; }
.basket__coupon .code-chip b { flex: 1; justify-content: center; }

.thanks { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; background: rgba(5, 6, 10, 0.82); backdrop-filter: blur(10px); }
.thanks[hidden] { display: none; }
.thanks__card { width: min(560px, 100%); padding: 36px; border: 1px solid rgba(62, 224, 143, 0.4); border-radius: 28px; background: rgba(18, 19, 28, 0.95); }
.thanks__card p { color: var(--muted); line-height: 1.6; }
.thanks__card p a { color: var(--accent); text-decoration: underline; }

@media (max-width: 960px) {
    .basket-item { grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 12px; }
    .basket-item__price { display: block; font-size: 15px; }
}

.tile__fw { margin-top: 6px; }

/* While the sale is in the hero, the thin sale strip in the top bar steps aside until the hero scrolls away. */
.hsale { transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease), margin-top 0.45s var(--ease); }
.sale-in-hero .hsale { opacity: 0; visibility: hidden; margin-top: calc(var(--hsale-h, 42px) * -1); } /* folds away, so the top bar moves up into its place */



/* ---------- Floating UI (after the hero) ---------- */

.float-ui { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.float-ui > * {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(18, 16, 30, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    filter: blur(8px);
    pointer-events: none;
    transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.float-ui.is-in > * { opacity: 1; filter: none; pointer-events: auto; }
.float-ui > *:hover { background: rgba(255, 255, 255, 0.14); transform: scale(1.06); }

/* Logo and basket: bare marks, no round backing, set in from the corner. */
.float-ui__logo,
.float-ui__basket {
    top: clamp(32px, 3.6vw, 68px);
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.float-ui__logo { left: clamp(32px, 3.6vw, 68px); }
.float-ui__logo img { display: block; width: auto; height: clamp(40px, 3vw, 54px); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }

.float-ui__basket { right: clamp(32px, 3.6vw, 68px); }
.float-ui__basket svg { width: clamp(32px, 2.3vw, 40px); height: clamp(32px, 2.3vw, 40px); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.float-ui__basket .badge { top: -4px; right: -6px; }

.float-ui > .float-ui__logo:hover,
.float-ui > .float-ui__basket:hover { background: none; transform: scale(1.08); }

/* Back to top: pastel purple button. */
.float-ui__top { bottom: clamp(24px, 2.6vw, 48px); right: clamp(24px, 2.6vw, 48px); width: 56px; height: 56px; background: #c4a6ff; border-color: transparent; color: #1a1030; }
.float-ui__top svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.float-ui > .float-ui__top:hover { background: #d6c1ff; }

/* ---------- Command palette (Ctrl+K) ---------- */

.palette {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 14vh 16px 16px;
}

.palette[hidden] { display: none; }

.palette__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 7, 12, 0.5);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 0.45s var(--ease);
}

.palette__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(560px, 76vh);
    border-radius: 14px;
    background: rgba(24, 26, 36, 0.72);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.97);
    transition: opacity 0.45s var(--ease), filter 0.45s var(--ease), transform 0.45s var(--ease);
}

.palette.is-open .palette__backdrop,
.palette.is-open .palette__panel { opacity: 1; filter: none; transform: none; }

.palette__search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none; /* don't let the result list squeeze it */
    padding: 0 22px;
    height: 74px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.palette__search svg { flex: none; width: 22px; height: 22px; color: var(--muted); }

.palette__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 19px;
}

.palette__search input::placeholder { color: var(--faint); }

.palette__list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.palette__list::-webkit-scrollbar { width: 8px; }
.palette__list::-webkit-scrollbar-track { background: transparent; }
.palette__list::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(255, 255, 255, 0.18); }

.palette__group {
    padding: 12px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.palette__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 10px;
    border-radius: 8px;
    cursor: pointer;
}

.palette__item.is-active { background: rgba(255, 255, 255, 0.08); }

.palette__thumb {
    flex: none;
    width: 52px;
    height: 30px;
    object-fit: cover;
    border-radius: 5px;
}

.palette__icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 30px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.palette__icon svg { width: 16px; height: 16px; }
.palette__icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.palette__text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.palette__text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__text small { font-size: 13px; color: var(--faint); white-space: nowrap; }

.palette__meta { flex: none; font-size: 12px; color: var(--muted); }

.palette__empty { margin: 0; padding: 36px 16px; text-align: center; font-size: 14px; color: var(--faint); }

.palette__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: none;
    height: 44px;
    padding: 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
    font-size: 12px;
    color: var(--muted);
}

.palette__footer > span { display: flex; align-items: center; gap: 5px; }
.palette__brand { margin-right: auto; font-weight: 600; color: var(--text); }
.palette__brand img { width: 16px; height: auto; }

@media (max-width: 560px) {
    .palette { padding-top: 10vh; }
    .palette__footer > span:not(.palette__brand):not(:nth-child(3)) { display: none; }
}

/* ---------- Small screens ---------- */

/* Short screens (1366x768, 1280x720): shrink tiles and cards so everything fits without scrolling. */
@media (max-height: 820px) and (min-width: 961px) {
    :root {
        --cat: clamp(48px, 4.2vw, 84px);
        --cat-focus: clamp(76px, 6.8vw, 132px);
        --card: clamp(90px, 8.4vw, 170px);
    }
    .info h1 { font-size: clamp(30px, 3.4vw, 60px); }
    .hsale { height: 34px; --hsale-h: 34px; }
    .topbar { padding-top: 8px; }
    .cats { padding-top: 10px; }
    .fw { margin-top: 12px; }
    .price { margin-top: 14px; }
    .deal { margin-top: 10px; }
    .actions { margin-top: 16px; }
}

@media (max-width: 960px) {
    .topbar { flex-wrap: wrap; row-gap: 14px; }
    .nav { order: 3; width: 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .hints { display: none; }
    .tabs > .key { display: none; }
    .hero-video {
        width: 100%;
        aspect-ratio: auto;
        height: 62%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .hero-layer .hero-layer__main {
        width: 100%;
        height: 62%;
        aspect-ratio: auto;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
}

@media (max-width: 560px) {
    .account__name { max-width: 80px; }
    .actions .btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
    .card::before, .card::after, .cat::before, .cat::after { animation: none !important; }
}

/* ---------- Page changes (nav.js: one app, no reloads) ----------
   Nothing is hidden: the new content is swapped in straight away and slides in (below), and the new
   background picture rises from nothing (nav-slowbg). The sale strip and the top bar never change. */
/* Right after a page change the home/script heroes skip their own entrance (the Scripts page keeps its own). */
/* Slide between pages (nav.js sets --nav-dir: 1 = going right, -1 = going left). The background,
   the top bar, the sale strip and the category tiles stay; only the content moves. */
html.nav-leave :is(body > *, .home > *, .cat-head > *):not(.home, .cat-head, .hsale, .topbar, .cats, .float-ui, .hero-bg, .hero-video, .hero-video-bg, .hero-shade) {
    transform: translateX(calc(var(--nav-dir, 1) * -70px));
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s cubic-bezier(0.4, 0, 1, 1);
}

html.nav-enter :is(body > *, .home > *, .cat-head > *):not(.home, .cat-head, .hsale, .topbar, .cats, .float-ui, .hero-bg, .hero-video, .hero-video-bg, .hero-shade) {
    animation: navSlideIn 0.6s var(--ease) both;
}

@keyframes navSlideIn { from { transform: translateX(calc(var(--nav-dir, 1) * 90px)); opacity: 0; } }

/* The sliding content must not make the page scroll sideways (clip keeps sticky sections working). */
html.nav-leave, html.nav-enter, html.nav-leave body, html.nav-enter body { overflow-x: clip; }

/* (duration 0 rather than animation: none, so the animation does not start again when nav-fresh goes) */
html.nav-fresh :is(.info > *, .card, .cat) { animation-duration: 0s !important; animation-delay: 0s !important; }
/* Pictures fade in as they arrive (nav.js adds .img-in once each has loaded), and the background picture
   cross-fades from the page you came from, so a page change never pops. */
:is(.tile, .more-tile__art, #cards .card, #pkgStage, .buy-card__art, .scatter__card) img { opacity: 0; transition: opacity 0.5s var(--ease), filter 0.35s var(--ease), transform 0.6s var(--ease); }
:is(.tile, .more-tile__art, #cards .card, #pkgStage, .buy-card__art, .scatter__card) img.img-in { opacity: 1; }

/* Logged out: no avatar mark, just "Login with FiveM". */
.account:not(.is-in) .account__avatar { display: none; }
.account:not(.is-in) { padding-left: 14px; }

/* ---------- Basket drawer (basket.js) ----------
   The panel is full height against the right edge and slides in over a dimmed page. Items come in blur to sharp one after another;
   a removed item folds away. The footer holds the coupon, the totals and Checkout. */
html.basket-open { overflow: hidden; }

.basket { position: fixed; inset: 0; z-index: 140; }
.basket[hidden] { display: none; }

.basket__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 10, 0.55);
    opacity: 0;
    transition: opacity 0.45s var(--ease);
}

.basket__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(620px, 100vw);
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(120% 40% at 100% 0%, rgba(167, 123, 255, 0.2), transparent 60%),
        radial-gradient(100% 30% at 0% 100%, rgba(167, 123, 255, 0.1), transparent 70%),
        #12111c;
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); /* keep in step with OPEN_MS in basket.js */
    overflow: hidden;
}

.basket.is-open .basket__backdrop { opacity: 1; }
.basket.is-open .basket__panel { transform: none; }

.basket__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 14px;
}

/* Whose cart this is (the Cfx.re account) with Logout, at the very top, in the Cfx Portal colours:
   slate card, cream title, dark red button with a red edge. */
.basket__account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 20px 20px 4px;
    padding: 20px 22px;
    border-radius: 12px;
    border: 1px solid #2c2f3d;
    background: #1e202d;
}

.basket__who { display: grid; gap: 4px; min-width: 0; }
.basket__owner { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #f2efe4; }
.basket__who small { font-size: 13px; color: #a3a8bd; }
.basket__who em { font-style: normal; font-weight: 700; color: #e37eab; }

.basket__logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    border: 1px solid #d33456;
    background: #66283d;
    color: #f2efe4;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.25s var(--ease);
}

.basket__logout svg { width: 16px; height: 16px; }
.basket__logout:hover { background: #7c2f4a; }

/* Currency picker beside the title (same list as the top bar). */
.basket__cur { position: relative; }
.basket__cur[hidden] { display: none; }

.basket__cur-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    transition: background 0.25s var(--ease);
}

.basket__cur-btn svg { width: 14px; height: 14px; color: var(--muted); transition: transform 0.25s var(--ease); }
.basket__cur-btn:hover { background: rgba(255, 255, 255, 0.12); }
.basket__cur-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.basket__cur-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    width: 260px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a1828;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.basket__cur-menu[hidden] { display: none; }

.basket__head h2 { margin: 0 auto 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.basket__head h2 span { color: var(--faint); font-weight: 700; }

.basket__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease);
}

.basket__close svg { width: 16px; height: 16px; }
.basket__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }

.basket__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 16px 16px;
    overflow-x: hidden; /* items slide in from the side: never a sideways scrollbar */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.basket__item {
    position: relative;
    display: grid;
    grid-template-columns: 104px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 8px 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.3s var(--ease);
}

/* Items come in one after another only when the drawer opens, not when the list is redrawn (currency, remove). */
.basket.is-entering .basket__item { animation: basketIn 0.5s var(--ease) backwards; animation-delay: calc(0.12s + var(--i) * 0.05s); }

.basket__item.is-leaving { opacity: 0; transform: translateX(30px); filter: blur(6px); }

@keyframes basketIn { from { opacity: 0; filter: blur(8px); transform: translateX(24px); } }

.basket__art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #1b1d25; }
/* The store pictures are large; shrunk this far the browser's sharp resampling makes them look grainy, so a hair of
   blur smooths them (scaled up a touch so the soft edge stays outside the rounded box). */
.basket__art img { width: 100%; height: 100%; object-fit: cover; filter: blur(0.45px); transform: scale(1.03); transition: transform 0.4s var(--ease); }
.basket__item:hover .basket__art img { transform: scale(1.08); }
.basket__art-logo { display: block; width: 100%; height: 100%; background: var(--logo) center / 34% no-repeat; opacity: 0.18; } /* picture not known yet */

.basket__info { display: grid; gap: 3px; min-width: 0; }
.basket__meta { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #c4a6ff; }
.basket__meta i { padding: 1px 6px; border-radius: 5px; background: rgba(62, 224, 143, 0.14); color: #7fe6a8; font-style: normal; letter-spacing: 0.04em; text-transform: none; }
.basket__meta i.is-gift { background: rgba(167, 123, 255, 0.18); color: #d4bfff; } /* "Gift for <username>" */
.basket__name { overflow: hidden; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.basket__name:hover { color: #d4bfff; }
.basket__price { display: flex; align-items: baseline; gap: 7px; }
.basket__price b { font-size: 15px; font-weight: 800; }
.basket__price s { font-size: 12px; color: var(--faint); }
.basket__free { padding: 1px 8px; border-radius: 6px; background: #a77bff; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; }

.basket__remove {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--faint);
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.basket__remove svg { width: 17px; height: 17px; }
.basket__remove:hover { background: rgba(255, 90, 110, 0.14); color: #ff8a9a; }

/* Empty: the logo mark, a line of text and a way to the scripts. */
.basket__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
    animation: basketIn 0.5s var(--ease) 0.12s backwards;
}

.basket__empty img { width: 64px; margin-bottom: 8px; opacity: 0.35; }
.basket__empty b { font-size: 18px; font-weight: 800; }
.basket__empty p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }

.basket__browse,
.basket__checkout {
    display: grid;
    place-items: center;
    height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: #fff;
    color: #0b0c12;
    font-size: 15px;
    font-weight: 800;
    transition: box-shadow 0.3s var(--ease);
}

.basket__browse:hover,
.basket__checkout:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16); }

.basket__foot { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(10, 10, 18, 0.5); }
.basket__foot:empty { display: none; }

.basket__coupon {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(242, 196, 90, 0.45);
    background: rgba(242, 196, 90, 0.07);
}

.basket__coupon span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.basket__coupon b { justify-self: end; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: var(--gold); }
.basket__coupon small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

.basket__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; color: var(--muted); }
.basket__row b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.basket__row--save b { font-size: 14px; color: #7fe6a8; }
.basket__checkout { margin-top: 4px; }
.basket__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: var(--faint); }
.basket__secure svg { width: 13px; height: 13px; }

/* The badge gives a small hop when something is added. */
.badge.is-bump { animation: badgeBump 0.5s var(--ease); }
@keyframes badgeBump { 40% { transform: scale(1.45); } }

/* ---------- Sign-in window (account.js) ----------
   A game scene behind a dark purple veil, "Sign in to / Your account", where purchases are delivered (the
   Rockstar | Cfx Portal logo) and the white Login with FiveM button at the bottom. Opens blur to sharp. */
html.login-open { overflow: hidden; }

.login-modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 16px; }
.login-modal[hidden] { display: none; }

.login-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 10, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}

.login-modal__panel {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(960px, 100%);
    padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 64px) clamp(36px, 4vw, 56px);
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #12111c;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    text-align: center;
    isolation: isolate;
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.96);
    transition: opacity 0.45s var(--ease), filter 0.45s var(--ease), transform 0.45s var(--ease);
}

.login-modal.is-open .login-modal__backdrop { opacity: 1; }
.login-modal.is-open .login-modal__panel { opacity: 1; filter: none; transform: none; }

/* The scene: dimmed and tinted purple, fading out towards the bottom where the button sits. */
.login-modal__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    filter: saturate(0.8);
}

.login-modal__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(95% 55% at 50% 100%, rgba(167, 123, 255, 0.3), transparent 72%),
        linear-gradient(180deg, rgba(18, 17, 28, 0.55) 0%, rgba(18, 17, 28, 0.85) 60%, #12111c 100%);
}

.login-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease);
}

.login-modal__close svg { width: 17px; height: 17px; }
.login-modal__close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; transform: rotate(90deg); }

.login-modal__logo { width: 44px; margin-bottom: 22px; opacity: 0.9; }

.login-modal__title {
    display: grid;
    margin: 0;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.login-modal__title small { font-size: 0.62em; color: rgba(255, 255, 255, 0.45); letter-spacing: -0.02em; }

.login-modal__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: #fff;
    color: #0b0c12;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: box-shadow 0.3s var(--ease);
}

.login-modal__btn svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.login-modal__btn:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16); }
.login-modal__btn:hover svg { transform: translateX(3px); }

/* "Purchases are delivered to" / the Rockstar | Cfx Portal logo / "account you sign in with." */
.login-modal__foot { display: grid; justify-items: center; gap: 10px; margin: 30px 0 34px; font-size: 14px; color: var(--faint); }
.login-modal__foot img { height: 26px; opacity: 0.9; }

/* "In Basket": every Add to Basket / Subscribe button that already has its item turns our purple with dark text
   (home hero, Scripts cards, script page, subscription tiers). Pressing it again opens the basket. */
.is-in-basket.is-in-basket {
    background: #a77bff !important;
    border-color: transparent !important;
    color: #0b0c12 !important;
    box-shadow: none;
}

.is-in-basket.is-in-basket:hover { box-shadow: 0 0 0 4px rgba(167, 123, 255, 0.25); }

/* Home: the hero picture sits a little left of the screen edge; its right side melts into the blurred copy over the
   last fifth, on the same eased steps as the left side, so there is no visible edge. */
@media (min-width: 961px) {
.home .hero-bg .hero-layer .hero-layer__main {
    right: 5vw;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%, #000 80%, rgba(0,0,0,0.95) 84%, rgba(0,0,0,0.8) 88%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0.28) 95.5%, rgba(0,0,0,0.08) 98.5%, transparent 100%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.28) 13%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.8) 27%, rgba(0,0,0,0.95) 33%, #000 38%, #000 80%, rgba(0,0,0,0.95) 84%, rgba(0,0,0,0.8) 88%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0.28) 95.5%, rgba(0,0,0,0.08) 98.5%, transparent 100%), linear-gradient(180deg, #000 58%, rgba(0,0,0,0.95) 65%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.28) 88%, rgba(0,0,0,0.08) 95%, transparent 100%);
}
}


/* Options window: the details Tebex asks for before a package goes in the basket (a gift card's e-mail).
   Same look as the script page's gift window. */
.opt-modal { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 16px; }
.opt-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 6, 10, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.35s var(--ease); }
.opt-modal__panel {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(520px, 100%);
    margin: 0;
    padding: 40px 32px 30px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(90% 45% at 50% 0%, rgba(167, 123, 255, 0.22), transparent 70%), #12111c;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    text-align: center;
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.96);
    transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.opt-modal.is-open .opt-modal__backdrop { opacity: 1; }
.opt-modal.is-open .opt-modal__panel { opacity: 1; filter: none; transform: none; }
.opt-modal__close {
    position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: var(--muted);
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.35s var(--ease);
}
.opt-modal__close svg { width: 16px; height: 16px; }
.opt-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); }
.opt-modal__panel h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.opt-modal__lead { margin: 8px 0 22px; max-width: 360px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.opt-modal__item {
    display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 14px; width: 100%;
    padding: 8px 16px 8px 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.04); text-align: left;
}
.opt-modal__item img { width: 84px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.opt-modal__item span { display: grid; gap: 2px; min-width: 0; }
.opt-modal__item small { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #c4a6ff; }
.opt-modal__item b { overflow: hidden; font-size: 15px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.opt-modal__field { display: grid; gap: 8px; width: 100%; margin-top: 20px; text-align: left; }
.opt-modal__field > span { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.opt-modal__field :is(input, select, textarea) {
    height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
    color: #fff; font: inherit; font-size: 16px; font-weight: 600; outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.opt-modal__field select option { background: #12111c; }
.opt-modal__field :is(input, select, textarea):focus { border-color: rgba(196, 166, 255, 0.7); box-shadow: 0 0 0 4px rgba(167, 123, 255, 0.16); }
.opt-modal__error { min-height: 16px; margin-top: 10px; font-size: 12px; color: #ff8a9a; }
.opt-modal__submit {
    width: 100%; height: 52px; margin-top: 6px; border-radius: 999px; background: #fff; color: #0b0c12;
    font-size: 15px; font-weight: 800; transition: box-shadow 0.3s var(--ease), opacity 0.3s var(--ease);
}
.opt-modal__submit:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16); }
.opt-modal form.is-busy .opt-modal__submit { opacity: 0.6; pointer-events: none; }