/* Nasty Developments — store redesign prebuild
   One accent drives everything: change --acc / --acc-2 / --acc-3 to re-skin. */

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --bg: #07060c;
  --bg-2: #0c0a14;
  --bg-3: #13101e;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --glass: rgba(20, 16, 32, .52);
  --ink: #f3f0fa;
  --ink-2: rgba(243, 240, 250, .64);
  --ink-3: rgba(243, 240, 250, .40);
  --ink-4: rgba(243, 240, 250, .18);

  --acc: #9b4dff;
  --acc-2: #e04dff;
  --acc-3: #5b6cff;
  --acc-ink: #cfa8ff;
  --acc-a12: rgba(155, 77, 255, .12);
  --acc-a25: rgba(155, 77, 255, .25);
  --acc-a45: rgba(155, 77, 255, .45);
  --good: #5be3a4;
  --danger: #ff5d7a;
  --warn: #ffb020;

  --display: 'Archivo', 'Arial Black', sans-serif;
  --body: 'Geist', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --label: 'Archivo', 'Arial', sans-serif; /* small caps labels: semi-expanded, bold, light tracking */

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r: 14px;
  --r-sm: 9px;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-intro { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--acc); color: #fff; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* grain over everything */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .03; mix-blend-mode: overlay; background-size: 240px 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 108;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .9;
  margin: 0;
}
.eyebrow {
  font: 700 semi-expanded 11.5px/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow b { color: var(--acc-ink); font-weight: 600; }
.grad {
  background: linear-gradient(100deg, #fff 10%, var(--acc-ink) 45%, var(--acc-2) 75%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 7s linear infinite;
}
@keyframes gradShift { to { background-position: -220% 0; } }

/* ---------- buttons ---------- */
.btn {
  --h: 52px;
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  height: var(--h); padding: 0 26px 0 8px;
  border-radius: 999px;
  font: 700 12px/1 var(--display);
  font-variation-settings: 'wdth' 110;
  letter-spacing: .08em; text-transform: uppercase;
  transition: transform .5s var(--ease-out), background .3s, box-shadow .4s, color .3s;
  will-change: transform;
}
.btn .ic {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .5s var(--ease-out);
}
.btn .ic svg { width: 16px; height: 16px; }
.btn:hover .ic { transform: rotate(-45deg); }
.btn--white { background: #fff; color: #0b0912; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
.btn--white .ic { background: #0b0912; color: #fff; }
.btn--white:hover { box-shadow: 0 10px 50px -10px rgba(255,255,255,.45), 0 0 0 6px rgba(255,255,255,.06); }
.btn--ghost { background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--ink); }
.btn--ghost .ic { background: rgba(255,255,255,.07); }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn--acc { background: linear-gradient(120deg, var(--acc), var(--acc-2)); color: #fff; overflow: hidden; }
.btn--acc .ic { background: rgba(0,0,0,.25); }
.btn--acc::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 3.6s var(--ease) infinite 1.2s;
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn--acc:hover { box-shadow: 0 14px 60px -12px var(--acc-a45); }
.btn--sm { --h: 40px; padding: 0 18px; font-size: 11px; }
.btn--sm.btn--white { padding: 0 20px; }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase;
}
/* announcement pill: gradient tag + sentence + arrow */
.newchip {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 6px 5px 5px; border-radius: 999px;
  background: linear-gradient(rgba(16, 12, 28, .7), rgba(16, 12, 28, .7)) padding-box,
              linear-gradient(110deg, rgba(207,168,255,.45), rgba(255,255,255,.08) 40%, rgba(224,77,255,.35)) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.newchip:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px var(--acc-a45); }
.newchip__tag {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: linear-gradient(120deg, var(--acc), var(--acc-2));
  font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  box-shadow: 0 0 18px -2px var(--acc-a45), inset 0 1px 0 rgba(255,255,255,.3);
}
.newchip__tag svg { width: 12px; height: 12px; animation: twinkle 2.4s ease-in-out infinite; }
.newchip__tag::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.2s var(--ease) infinite 1.5s; }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.75) rotate(45deg); } }
.newchip__txt { font: 500 14px/1 var(--body); color: var(--ink); letter-spacing: -.005em; }
.newchip__txt b { font-weight: 600; }
.newchip__go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); transition: background .3s, transform .5s var(--ease-out); }
.newchip__go svg { width: 13px; height: 13px; }
.newchip:hover .newchip__go { background: #fff; color: #0b0912; transform: translateX(3px); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(91,227,164,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(91,227,164,0); } 100% { box-shadow: 0 0 0 0 rgba(91,227,164,0); } }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #040308;
  transition: clip-path 1.1s var(--ease-out), opacity .3s 1s;
  clip-path: inset(0 0 0 0);
}
.intro.out { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.intro__in { display: grid; justify-items: center; gap: 26px; }
.intro__logo { width: 76px; opacity: 0; transform: scale(.6) rotate(-30deg); filter: drop-shadow(0 0 30px var(--acc-a45)); animation: introLogo 1s var(--ease-out) .15s forwards; }
@keyframes introLogo { to { opacity: 1; transform: none; } }
.intro__word {
  font: 900 clamp(18px, 5.2vw, 64px)/1 var(--display);
  font-variation-settings: 'wdth' 118;
  letter-spacing: .02em; white-space: nowrap;
}
.intro__word .g { color: var(--acc-ink); text-shadow: 0 0 18px var(--acc); font-family: var(--mono); font-weight: 400; }
.intro__bar { width: 220px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.intro__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc-2)); box-shadow: 0 0 12px var(--acc); animation: bar 1.9s var(--ease) forwards; }
@keyframes bar { to { width: 100%; } }
.intro__skip { position: absolute; bottom: 28px; right: 28px; font: 600 semi-expanded 11px var(--label); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.intro__skip:hover { color: var(--ink); }

/* ---------- announcement + nav ---------- */
.announce {
  position: relative; z-index: 20;
  height: 36px; overflow: hidden;
  background: linear-gradient(90deg, #1a0a2b, #2a0b33 50%, #1a0a2b);
  border-bottom: 1px solid rgba(224, 77, 255, .18);
  font: 500 12px/36px var(--body); color: rgba(255,255,255,.82);
}
.announce__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.announce__track span { padding: 0 34px; white-space: nowrap; }
.announce__track span::before { content: '✦'; color: var(--acc-2); margin-right: 34px; }
.announce a { color: #fff; text-decoration: underline; text-decoration-color: var(--acc-2); text-underline-offset: 3px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.nav {
  position: sticky; top: 0; z-index: 40;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(7, 6, 12, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 36px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 14px var(--acc-a45)); transition: transform .8s var(--ease-out); }
.brand:hover img { transform: rotate(-120deg); }
.brand b { display: block; font: 900 15px/1 var(--display); font-variation-settings: 'wdth' 120; letter-spacing: .04em; }
.brand small { display: block; margin-top: 4px; font: 600 semi-expanded 10px/1 var(--label); letter-spacing: .12em; color: var(--ink-3); }
.nav__links { display: flex; gap: 6px; margin-right: auto; }
.nav__links a {
  position: relative; padding: 10px 14px;
  font: 700 11px/1 var(--display); font-variation-settings: 'wdth' 112;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  transition: color .3s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--acc-2));
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.nav__links a:hover, .nav__links a.on { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.on::after { transform: scaleX(1); transform-origin: left; }
.nav__right { display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line);
  font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .04em; color: var(--ink-2);
  transition: background .3s, color .3s;
}
.pill:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.pill svg { width: 16px; height: 16px; }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); place-items: center; }
.burger svg { width: 18px; height: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - 36px); margin-top: -78px; padding-top: 78px; overflow: hidden; isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.hero__fade { position: absolute; inset: auto 0 0; height: 38%; z-index: -1; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero__ghost {
  position: absolute; right: -2vw; top: 50%; z-index: -2;
  transform: translateY(-46%);
  font: 900 clamp(160px, 26vw, 440px)/.8 var(--display);
  font-variation-settings: 'wdth' 125;
  letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(207, 168, 255, .13);
  pointer-events: none; user-select: none;
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; min-height: calc(100svh - 114px); }
.hero__copy { position: relative; z-index: 2; padding: 40px 0 120px; }
.hero__copy .newchip { margin-bottom: 30px; }
.hero h1 { font-size: clamp(40px, 5.5vw, 98px); }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
.hero h1 .ln > span { display: block; transform: translateY(105%); }
.hero__sub { max-width: 500px; margin: 28px 0 32px; font-size: 17px; color: var(--ink-2); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.meta {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .3s, transform .4s var(--ease-out);
}
.meta:hover { border-color: var(--acc-a45); transform: translateY(-2px); }
.meta__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.meta__ic svg { width: 18px; height: 18px; }
.meta b { display: block; font-size: 13px; font-weight: 600; }
.meta small { display: block; font: 600 semi-expanded 11px/1.5 var(--label); color: var(--ink-3); }
.meta small em { font-style: normal; color: var(--acc-ink); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__note {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.02); font-size: 12.5px; color: var(--ink-3);
}
.hero__note svg { width: 14px; height: 14px; flex: none; color: var(--acc-ink); }

.hero__art { position: relative; align-self: stretch; z-index: 1; }
.mascot {
  position: absolute; bottom: 0; right: 2%;
  height: min(88svh, 900px); aspect-ratio: 731 / 1400;
  opacity: 0;
}
.mascot__par { position: relative; width: 100%; height: 100%; will-change: transform; }
.tags { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.mascot__glow {
  position: absolute; left: 50%; top: 24%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -30%);
  background: radial-gradient(closest-side, rgba(155,77,255,.42), rgba(224,77,255,.12) 55%, transparent 72%);
  filter: blur(10px);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .65; transform: translate(-50%, -30%) scale(1.06); } }
/* the rim glow sits on a wrapper: on the img itself the fade mask would clip it into a visible box */
.mascot__fig { position: relative; width: 100%; height: 100%; filter: drop-shadow(-14px 0 26px rgba(224, 77, 255, .22)) drop-shadow(18px -6px 40px rgba(91, 108, 255, .18)); }
.mascot img {
  position: relative; width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%);
}
.mascot__visor {
  position: absolute; left: 31%; top: 13%; width: 33%; height: 9%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(224, 77, 255, .55), transparent);
  mix-blend-mode: screen; filter: blur(8px);
  animation: visor 4.2s ease-in-out infinite;
}
@keyframes visor { 0%, 100% { opacity: .35; } 45% { opacity: .9; } 50% { opacity: .5; } 55% { opacity: .95; } }

.tag {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 12px;
  background: rgba(14, 11, 24, .62); border: 1px solid var(--line-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font: 600 12.5px/1 var(--body); white-space: nowrap;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
  opacity: 0;
}
.tag i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--acc-a25); color: var(--acc-ink); }
.tag i svg { width: 12px; height: 12px; }
.tag .float { display: contents; }
.tag--1 { top: 22%; right: 0; }
.tag--2 { top: 50%; right: -2%; }
.tag--3 { top: 64%; left: 2%; }
.tag--4 { top: 34%; left: 6%; }
.is-ready .tag { animation: tagIn .9s var(--ease-out) forwards, bob 7s ease-in-out infinite; }
.is-ready .tag--1 { animation-delay: .9s, 1.8s; }
.is-ready .tag--2 { animation-delay: 1.05s, 2.4s; }
.is-ready .tag--3 { animation-delay: 1.2s, 1.2s; }
.is-ready .tag--4 { animation-delay: 1.35s, 3s; }
@keyframes tagIn { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 0 -9px; rotate: .8deg; } 66% { translate: 0 5px; rotate: -.8deg; } }

/* entrance choreography after intro */
.is-ready .hero h1 .ln > span { animation: lineUp 1.1s var(--ease-out) forwards; }
.is-ready .hero h1 .ln:nth-child(2) > span { animation-delay: .08s; }
.is-ready .hero h1 .ln:nth-child(3) > span { animation-delay: .16s; }
@keyframes lineUp { to { transform: none; } }
.rise { opacity: 0; transform: translateY(22px); }
.is-ready .hero .rise { animation: rise 1s var(--ease-out) forwards; animation-delay: calc(.25s + var(--d, 0) * .08s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.is-ready .mascot { animation: mascotIn 1.6s var(--ease-out) .1s forwards; }
@keyframes mascotIn { from { opacity: 0; transform: translateX(60px) scale(1.04); filter: blur(14px) brightness(2); } to { opacity: 1; transform: none; filter: none; } }

/* promo popup: slides in after the hero settles, collapses to a pill when closed */
.promo {
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: min(380px, calc(100vw - 24px));
  display: grid; grid-template-columns: 104px 1fr;
  border-radius: 22px; overflow: hidden;
  background: rgba(14, 11, 24, .9);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(155,77,255,.08), 0 0 60px -30px var(--acc);
  transform: translateY(calc(100% + 40px)) scale(.94); opacity: 0;
  transition: transform .9s var(--spring), opacity .4s;
  pointer-events: none;
}
.promo.on { transform: none; opacity: 1; pointer-events: auto; }
.promo__art { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, rgba(155,77,255,.55), rgba(224,77,255,.15) 50%, transparent 75%), var(--bg-3); }
.promo__art img { position: absolute; left: 50%; top: 6px; width: 190%; max-width: none; transform: translateX(-46%); filter: drop-shadow(0 0 16px rgba(224,77,255,.35)); transition: transform 1.2s var(--ease-out) .2s; }
.promo:not(.on) .promo__art img { transform: translateX(-46%) translateY(30px) scale(1.1); }
.promo__body { position: relative; padding: 18px 18px 18px 16px; }
.promo__lbl { display: inline-flex; align-items: center; gap: 7px; font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-ink); }
.promo__lbl .dot { background: var(--acc-2); animation-name: pingAcc; }
@keyframes pingAcc { 70% { box-shadow: 0 0 0 8px rgba(224,77,255,0); } 100% { box-shadow: 0 0 0 0 rgba(224,77,255,0); } }
.promo h4 { margin: 10px 0 6px; font: 900 21px/1.02 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; letter-spacing: -.01em; }
.promo h4 em { font-style: normal; background: linear-gradient(90deg, var(--acc-ink), var(--acc-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo p { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.promo__code {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0 6px 0 14px; height: 44px; border-radius: 12px;
  border: 1px dashed rgba(224,77,255,.55); background: rgba(224,77,255,.07);
  cursor: copy; transition: background .3s, border-color .3s;
}
.promo__code:hover { background: rgba(224,77,255,.14); }
.promo__code b { font: 900 17px/1 var(--display); font-variation-settings: 'wdth' 115; letter-spacing: .08em; }
.promo__code span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: #fff; color: #0b0912; font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .04em; text-transform: uppercase; transition: background .3s, color .3s; }
.promo__code span svg { width: 13px; height: 13px; }
.promo__code.done { border-style: solid; border-color: rgba(91,227,164,.6); background: rgba(91,227,164,.08); }
.promo__code.done span { background: var(--good); color: #062014; }
.promo__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: background .3s, color .3s, transform .4s var(--ease-out); }
.promo__x:hover { background: rgba(255,255,255,.08); color: var(--ink); transform: rotate(90deg); }
.promo__x svg { width: 14px; height: 14px; }

.promo-pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 79;
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px;
  background: linear-gradient(120deg, var(--acc), var(--acc-2)); color: #fff;
  font: 800 semi-expanded 12px/1 var(--label); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 16px 40px -14px var(--acc), inset 0 1px 0 rgba(255,255,255,.3);
  transform: translateY(calc(100% + 60px)); transition: transform .7s cubic-bezier(.34, 1.4, .64, 1);
}
.promo-pill.on { transform: none; }
.promo-pill i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.25); font: 900 14px/1 var(--display); font-style: normal; }
.promo-pill:hover { filter: brightness(1.1); }

.scrollcue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 600 semi-expanded 10px/1 var(--label); letter-spacing: .12em; color: var(--ink-3); opacity: 0; }
.is-ready .scrollcue { animation: rise 1s var(--ease-out) 1.8s forwards; }
.scrollcue i { width: 1px; height: 38px; background: linear-gradient(var(--acc-ink), transparent); transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- generic section ---------- */
.sec { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.sec__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 48px; flex-wrap: wrap; }
.sec__head h2 { font-size: clamp(40px, 5.6vw, 84px); margin-top: 16px; }
.sec__head p { max-width: 380px; margin: 0; color: var(--ink-2); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .05em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.split.in .w > span { transform: none; }

/* ---------- stats ---------- */
.stats { position: relative; z-index: 2; margin-top: -40px; }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); backdrop-filter: blur(10px); overflow: hidden; }
.stat { position: relative; padding: 30px 30px 26px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font: 900 clamp(34px, 4vw, 56px)/1 var(--display); font-variation-settings: 'wdth' 110; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: .45em; color: var(--acc-ink); vertical-align: .9em; margin-left: 2px; }
/* The pulse rings out to 9px, so the label needs more than the row's
   own gap to stay clear of it. */
.stat > span .dot { flex: 0 0 7px; margin-right: 6px; }
.stat > span { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- spotlight (HUD v2) ---------- */
.spot {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
  border-radius: 26px; overflow: hidden;
  background: var(--bg-2);
  isolation: isolate;
}
.spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 60%, var(--acc) 75%, var(--acc-2) 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }
/* screenshots keep their native 16:9 — nothing cropped, nothing faded */
.spot__media {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: clamp(22px, 3vw, 40px);
  background: radial-gradient(70% 60% at 45% 50%, rgba(155,77,255,.22), transparent 70%), linear-gradient(135deg, rgba(255,255,255,.02), transparent);
  border-right: 1px solid var(--line);
  perspective: 1600px;
}
.spot__frame {
  --rx: 0deg; --ry: 0deg;
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 80px -30px var(--acc);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .8s var(--ease-out);
}
.spot__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease-out), transform 1.4s var(--ease-out); }
.spot__frame img.on { opacity: 1; transform: none; }
.spot__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.1), transparent 35%); }
.spot__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spot__dots { display: flex; gap: 6px; }
.spot__dots button { position: relative; width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden; transition: width .5s var(--ease-out); }
.spot__dots button.on { width: 56px; }
.spot__dots button.on::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--acc-ink), #fff); transform-origin: left; animation: thumbTimer 3.8s linear forwards; }
@keyframes thumbTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.spot__cap { font: 700 semi-expanded 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.spot__cap b { color: var(--acc-ink); margin-right: 8px; font-weight: 800; }
.spot__body { position: relative; z-index: 2; padding: 50px 48px; display: flex; flex-direction: column; }
.spot__body h3 { font-size: clamp(34px, 3.6vw, 54px); margin: 18px 0 14px; }
.spot__body p { color: var(--ink-2); margin: 0 0 24px; }
.ticks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); }
.ticks li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acc-ink); }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; margin-bottom: 20px; }
.price b { font: 900 40px/1 var(--display); font-variation-settings: 'wdth' 108; letter-spacing: -.02em; }
.price s { color: var(--ink-3); font-size: 15px; }
.price em { font-style: normal; font: 600 semi-expanded 10.5px/1 var(--label); letter-spacing: .08em; padding: 6px 9px; border-radius: 6px; background: rgba(91,227,164,.12); color: var(--good); }
.badge {
  display: inline-flex; align-items: center; gap: 9px; align-self: start;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: linear-gradient(var(--bg-3), var(--bg-3)) padding-box, linear-gradient(120deg, var(--acc), var(--acc-2), var(--acc-3)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 24px -8px var(--acc-a45);
  font: 800 semi-expanded 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase;
}
.badge svg { width: 14px; height: 14px; color: var(--acc-2); filter: drop-shadow(0 0 6px var(--acc-2)); animation: twinkle 2.4s ease-in-out infinite; }
.badge span { background: linear-gradient(90deg, #fff, var(--acc-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge small { font: 500 12px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-3); padding-left: 9px; border-left: 1px solid var(--line-2); }

/* ---------- product cards ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button {
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  transition: color .3s, background .3s, border-color .3s;
}
.filters button:hover { color: var(--ink); border-color: var(--line-2); }
.filters button.on { background: #fff; color: #0b0912; border-color: #fff; }

.nd-site .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column;
  border-radius: 20px; padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transition: transform .6s var(--ease-out), border-color .4s, opacity .5s, box-shadow .6s;
  isolation: isolate;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--acc-a25), transparent 45%);
}
.card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx) var(--my), var(--acc-ink), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(155, 77, 255, .5); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card.hide { display: none; }
.card__img { position: relative; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: var(--bg-3); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card__img img { transform: scale(1.06); }
.card__img .flag { position: absolute; top: 10px; left: 10px; }
.flag { padding: 6px 9px; border-radius: 7px; font: 700 semi-expanded 10.5px/1 var(--label); letter-spacing: .12em; background: rgba(8,6,14,.78); backdrop-filter: blur(8px); border: 1px solid var(--line-2); }
.flag--new { background: linear-gradient(120deg, var(--acc), var(--acc-2)); border-color: transparent; }
.flag--free { background: var(--good); color: #062014; border-color: transparent; }
.flag--deal { background: #fff; color: #0b0912; border-color: transparent; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 10px 8px; }
.card__fw { display: flex; gap: 6px; margin-bottom: 12px; }
.card__fw span { font: 600 semi-expanded 10.5px/1 var(--label); letter-spacing: .08em; padding: 5px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-3); }
.card h3 { margin: 0 0 6px; font: 800 19px/1.15 var(--display); font-variation-settings: 'wdth' 104; letter-spacing: -.01em; text-transform: uppercase; }
.card p { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-3); }
.card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.card__price { font: 900 22px/1 var(--display); font-variation-settings: 'wdth' 108; }
.card__price s { margin-left: 8px; font: 400 13px var(--body); color: var(--ink-3); }
.card__go {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  font: 700 10.5px/1 var(--display); font-variation-settings: 'wdth' 110; letter-spacing: .1em; text-transform: uppercase;
  transition: background .35s, color .35s, border-color .35s;
}
.card__go i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.08); transition: transform .5s var(--ease-out), background .35s; }
.card__go i svg { width: 12px; height: 12px; }
.card:hover .card__go { background: #fff; color: #0b0912; border-color: #fff; }
.card:hover .card__go i { background: #0b0912; color: #fff; transform: rotate(-45deg); }
.grid__more { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- bundle ---------- */
.bundle {
  position: relative; overflow: hidden; border-radius: 26px; padding: clamp(36px, 5vw, 64px);
  background: radial-gradient(800px 400px at 85% 20%, rgba(224,77,255,.22), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(91,108,255,.18), transparent 60%), var(--bg-2);
  border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center;
}
.bundle h2 { font-size: clamp(38px, 5vw, 76px); margin: 18px 0 18px; }
.bundle p { color: var(--ink-2); max-width: 460px; margin: 0 0 28px; }
.stack { position: relative; height: 400px; perspective: 1400px; }
.stack img {
  position: absolute; width: 74%; border-radius: 14px; border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  transition: transform 1s var(--ease-out);
}
.stack img:nth-child(1) { left: 0; top: 8%; transform: rotateY(18deg) rotateZ(-4deg) translateZ(-60px); }
.stack img:nth-child(2) { left: 14%; top: 26%; transform: rotateY(18deg) rotateZ(-1deg) translateZ(0); }
.stack img:nth-child(3) { left: 28%; top: 44%; transform: rotateY(18deg) rotateZ(2deg) translateZ(60px); }
.bundle:hover .stack img:nth-child(1) { transform: rotateY(8deg) rotateZ(-7deg) translate(-20px, -20px); }
.bundle:hover .stack img:nth-child(3) { transform: rotateY(8deg) rotateZ(5deg) translate(24px, 20px) translateZ(60px); }
.includes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.includes span { padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; }

/* ---------- customers marquee ---------- */
.marq { display: grid; gap: 14px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marq__row { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; }
.marq__row:nth-child(2) { animation-direction: reverse; animation-duration: 75s; }
.marq:hover .marq__row { animation-play-state: paused; }
.who { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.who i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--display); font-style: normal; color: #fff; }

/* ---------- why ---------- */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.why__item { position: relative; padding: 34px 28px 30px; background: var(--bg); transition: background .4s; overflow: hidden; }
.why__item:hover { background: var(--bg-2); }
.why__item .n { font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .12em; color: var(--ink-4); }
.why__item .ico { width: 52px; height: 52px; margin: 38px 0 24px; border-radius: 14px; display: grid; place-items: center; background: var(--acc-a12); border: 1px solid var(--acc-a25); color: var(--acc-ink); transition: transform .6s var(--ease-out); }
.why__item:hover .ico { transform: translateY(-4px) rotate(-8deg); }
.why__item .ico svg { width: 24px; height: 24px; }
.why__item h4 { margin: 0 0 10px; font: 800 18px/1.2 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; }
.why__item p { margin: 0; font-size: 14px; color: var(--ink-3); }
.why__item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.why__item:hover::after { transform: scaleX(1); }

/* ---------- videos ---------- */
.vids { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.vid { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; background: var(--bg-3); border: 1px solid var(--line); }
.vid:first-child { grid-row: span 2; aspect-ratio: auto; }
.vid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; filter: saturate(.9) brightness(.8); }
.vid:hover img { transform: scale(1.05); filter: saturate(1.05) brightness(.95); }
.vid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,6,12,.92), transparent 60%); }
.vid__play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; transition: transform .5s var(--ease-out), background .3s; }
.vid__play svg { width: 20px; height: 20px; margin-left: 3px; }
.vid:hover .vid__play { transform: scale(1.12); background: var(--acc); }
.vid__t { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; font: 700 15px/1.25 var(--display); font-variation-settings: 'wdth' 104; text-transform: uppercase; }
.vid__t small { display: block; margin-bottom: 8px; font: 600 semi-expanded 10px/1 var(--label); letter-spacing: .12em; color: var(--acc-ink); }
.vid:first-child .vid__t { font-size: 24px; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* ---------- big CTA ---------- */
.cta { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(50px, 8vw, 110px) clamp(28px, 6vw, 80px); text-align: center; border: 1px solid var(--line); background: var(--bg-2); isolation: isolate; }
.cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.cta h2 { font-size: clamp(44px, 8vw, 132px); }
.cta h2 .o { color: transparent; -webkit-text-stroke: 1.5px var(--acc-ink); }
.cta p { max-width: 520px; margin: 26px auto 34px; color: var(--ink-2); font-size: 17px; }
.cta .hero__ctas { justify-content: center; }

/* ---------- footer ---------- */

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 95; transform: translate(-50%, 30px); opacity: 0; padding: 12px 18px; border-radius: 12px; background: #fff; color: #0b0912; font-weight: 600; font-size: 13.5px; transition: transform .5s var(--ease-out), opacity .4s; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nd-site .grid { grid-template-columns: repeat(2, 1fr); }
  .why { grid-template-columns: repeat(2, 1fr); }
  .spot { grid-template-columns: 1fr; }
  .spot__media { border-right: 0; border-bottom: 1px solid var(--line); }
  .bundle { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding: 30px 0 40px; }
  .hero__art { height: 70svh; min-height: 460px; margin-top: -10px; }
  .mascot { right: 50%; transform: translateX(50%); height: 100%; }
  .is-ready .mascot { animation-name: mascotInM; }
  @keyframes mascotInM { from { opacity: 0; transform: translateX(50%) translateY(30px); filter: blur(10px); } to { opacity: 1; transform: translateX(50%); filter: none; } }
  .hero__ghost { top: auto; bottom: 8%; transform: none; }
  .promo { right: 12px; bottom: 12px; }
  .promo-pill { right: 12px; bottom: 12px; }
  .scrollcue { display: none; }
  .stats { margin-top: 0; }
  .stats__row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vids { grid-template-columns: 1fr; }
  .vid:first-child { grid-row: auto; aspect-ratio: 16/9; }
  .nav__right .pill--cur, .nav__right .pill--dc { display: none; }
}
@media (max-width: 600px) {
  .nd-site .grid { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .tag--2, .tag--4 { display: none; }
  .tag--1 { right: 4%; top: 10%; }
  .tag--3 { left: 4%; top: 58%; }
  .stack { height: 260px; }
  .spot__body { padding: 32px 24px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero h1 .ln { white-space: normal; }
  .hero__meta .meta { flex: 1 1 100%; }
  .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- footer ---------- */
.foot { position: relative; margin-top: 60px; padding: 0 0 28px; overflow: hidden; isolation: isolate; }
.foot::before { content: ''; position: absolute; left: 50%; bottom: -30%; z-index: -1; width: 90%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(155,77,255,.16), transparent); pointer-events: none; }

/* community band */
.foot__band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px;
  padding: clamp(28px, 4vw, 48px); border-radius: 24px;
  background: radial-gradient(600px 300px at 100% 0%, rgba(88,101,242,.28), transparent 65%), radial-gradient(500px 300px at 0% 100%, rgba(155,77,255,.22), transparent 65%), var(--bg-2);
  border: 1px solid var(--line);
}
.foot__band::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.foot__band h3 { font-size: clamp(30px, 3.6vw, 52px); margin: 14px 0 10px; }
.foot__band p { margin: 0; color: var(--ink-2); max-width: 440px; }
.foot__band-r { display: grid; justify-items: end; gap: 16px; }
.foot__live { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font: 700 semi-expanded 12px/1 var(--label); letter-spacing: .04em; color: var(--ink-2); }
.foot__live b { color: var(--ink); font-size: 14px; }
.btn--dc { background: #5865f2; color: #fff; }
.btn--dc .ic { background: rgba(0,0,0,.22); }
.btn--dc:hover { box-shadow: 0 14px 50px -12px rgba(88,101,242,.8); }

/* link grid */
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; padding: 70px 0 10px; }
.foot__brand .brand { display: inline-flex; }
.foot__brand p { margin: 20px 0 22px; max-width: 300px; font-size: 14px; color: var(--ink-3); }
.foot__social { display: flex; gap: 8px; }
.foot__social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-2); transition: background .3s, color .3s, transform .4s var(--ease-out), border-color .3s; }
.foot__social a:hover { color: #fff; transform: translateY(-3px); border-color: transparent; }
.foot__social a[data-net="discord"]:hover { background: #5865f2; }
.foot__social a[data-net="youtube"]:hover { background: #ff0033; }
.foot__social svg { width: 18px; height: 18px; }
.foot__col h5 { margin: 6px 0 20px; font: 800 semi-expanded 11.5px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.foot__col a { position: relative; display: flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 0; font-size: 14px; color: var(--ink-3); transition: color .3s; }
.foot__col a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: linear-gradient(90deg, var(--acc-ink), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.foot__col a:hover { color: var(--ink); }
.foot__col a:hover::after { transform: scaleX(1); }
.foot__col a em { font-style: normal; padding: 3px 6px; border-radius: 5px; background: linear-gradient(120deg, var(--acc), var(--acc-2)); font: 800 semi-expanded 9.5px/1 var(--label); letter-spacing: .06em; color: #fff; }

/* giant wordmark: outline that lights up under the cursor */
/* vector, so edges stay sharp at any size or DPI; the viewBox is fitted to the glyphs in JS */
.foot__word {
  display: block; width: 100%; height: auto; margin: 40px 0 0; overflow: visible; user-select: none;
  clip-path: inset(0 0 100% 0); transform: translateY(24px);
  transition: clip-path 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}
.foot__word.in { clip-path: inset(-20% -5% -20% -5%); transform: none; }
.foot__word text { font: 900 200px/1 var(--display); font-variation-settings: 'wdth' 125; letter-spacing: -.045em; }
.fw-spot { opacity: .45; transition: opacity .6s var(--ease-out); }
.foot:hover .fw-spot { opacity: 1; }

/* base */
.foot__base { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__copy { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.foot__copy small { display: block; font-size: 11.5px; color: var(--ink-4); }
.tebex {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  transition: border-color .3s, background .3s, transform .4s var(--ease-out);
}
.tebex small { font: 700 semi-expanded 10px/1.15 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tebex img { height: 34px; width: auto; opacity: .85; transition: opacity .3s; }
.tebex:hover { border-color: var(--line-2); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.tebex:hover img { opacity: 1; }
.totop { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink-2); transition: background .3s, color .3s, transform .5s var(--ease-out); }
.totop svg { width: 18px; height: 18px; }
.totop:hover { background: #fff; color: #0b0912; transform: translateY(-3px); }

@media (max-width: 1000px) {
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
  .foot__band { grid-template-columns: 1fr; }
  .foot__band-r { justify-items: start; }
}
@media (max-width: 600px) {
  .foot__base { grid-template-columns: 1fr auto; }
  .foot__copy { grid-column: 1 / -1; }
}
body.at-foot .promo-pill, body.at-foot .promo { bottom: 104px; }
.promo-pill, .promo { transition-property: transform, opacity, bottom; transition-duration: .7s, .4s, .5s; }

/* ---------- phone menu ---------- */
.burger { position: relative; z-index: 60; }
.burger i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.burger i:first-child { top: 14px; } .burger i:last-child { top: 22px; }
.mnav-open .burger i:first-child { top: 18px; transform: rotate(45deg); }
.mnav-open .burger i:last-child { top: 18px; transform: rotate(-45deg); }
.mnav {
  position: fixed; inset: 0; z-index: 39; display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px var(--gutter) 34px;
  background: radial-gradient(600px 400px at 100% 0%, rgba(155,77,255,.25), transparent 70%), rgba(7, 6, 12, .97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s .7s;
}
.mnav-open .mnav { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
.mnav-open { overflow: hidden; }
.mnav-open .nav { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mnav__links { display: grid; }
.mnav__links a {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
  font: 900 clamp(32px, 9vw, 54px)/1 var(--display); font-variation-settings: 'wdth' 110; text-transform: uppercase; letter-spacing: -.02em;
  opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease-out), color .3s;
}
.mnav__links a span { font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .08em; color: var(--acc-ink); }
.mnav__links a.on { color: var(--acc-ink); }
.mnav-open .mnav__links a { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i) * 50ms); }
.mnav__foot { display: grid; gap: 10px; opacity: 0; transition: opacity .5s .4s; }
.mnav-open .mnav__foot { opacity: 1; }
.mnav__foot .btn { justify-content: center; }
@media (min-width: 1101px) { .mnav { display: none; } }

/* =====================================================================
   Building blocks for new pages (tickets, account, legal, forms...).
   Use these instead of inventing styles. Demonstrated in template.html.
   ===================================================================== */

/* page header for every page that isn't the homepage */
.pagehead { position: relative; margin-top: -78px; padding: 150px 0 50px; overflow: hidden; isolation: isolate; }
.pagehead canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .8; }
.pagehead::after { content: ''; position: absolute; inset: auto 0 0; height: 60%; z-index: -1; background: linear-gradient(transparent, var(--bg)); }
.pagehead h1 { font-size: clamp(40px, 6vw, 96px); margin-top: 16px; }
.pagehead p { max-width: 620px; margin: 22px 0 0; font-size: 17px; color: var(--ink-2); }
.pagehead .crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; font: 600 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pagehead .crumbs a:hover { color: var(--ink); }

/* panel: the generic content box */
.panel { border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); padding: clamp(20px, 3vw, 32px); }
.panel + .panel { margin-top: 18px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.panel__head h3 { margin: 0; font: 800 20px/1.15 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* forms */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.field__label { font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.field__hint { font-size: 12.5px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink);
  font: 400 15px/1.4 var(--body); outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
.select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cfa8ff'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
.select option { background: var(--bg-3); }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-2); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--acc-ink); box-shadow: 0 0 0 4px var(--acc-a25); background: rgba(255,255,255,.05); }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field--error .field__hint { color: var(--danger); }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check input:checked { background: var(--acc); border-color: var(--acc); }
.check input:checked::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 14px 18px; text-align: left; white-space: nowrap; font: 800 semi-expanded 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); }
.table td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table td b { color: var(--ink); font-weight: 600; }

/* status tags + alerts + empty state */
.status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font: 800 semi-expanded 10.5px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ok { color: var(--good); background: rgba(91,227,164,.08); border-color: rgba(91,227,164,.25); }
.status--warn { color: var(--warn); background: rgba(255,176,32,.08); border-color: rgba(255,176,32,.25); }
.status--bad { color: var(--danger); background: rgba(255,93,122,.08); border-color: rgba(255,93,122,.25); }
.status--acc { color: var(--acc-ink); background: var(--acc-a12); border-color: var(--acc-a25); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 14px; color: var(--ink-2); }
.alert svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.alert--ok { border-color: rgba(91,227,164,.3); background: rgba(91,227,164,.06); }
.alert--ok svg { color: var(--good); }
.alert--bad { border-color: rgba(255,93,122,.3); background: rgba(255,93,122,.06); }
.alert--bad svg { color: var(--danger); }
.alert--info svg { color: var(--acc-ink); }
.empty { display: grid; justify-items: center; gap: 12px; padding: 50px 20px; text-align: center; color: var(--ink-3); }
.empty svg { width: 40px; height: 40px; color: var(--acc-ink); opacity: .7; }
.empty b { font: 800 18px/1.2 var(--display); text-transform: uppercase; color: var(--ink); }

/* modal: open with modal() from js/site.js */
.modal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px; background: rgba(4,3,8,.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.modal.on { opacity: 1; }
.modal__box { position: relative; width: min(520px, 100%); max-height: calc(100svh - 40px); overflow: auto; border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 28px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 80px -40px var(--acc); transform: translateY(20px) scale(.97); transition: transform .5s var(--ease-out); }
.modal.on .modal__box { transform: none; }
.modal__box h3 { margin: 0 0 12px; padding-right: 30px; font: 900 24px/1.1 var(--display); font-variation-settings: 'wdth' 108; text-transform: uppercase; }
.modal__body { color: var(--ink-2); margin-bottom: 22px; }
.modal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: background .3s, color .3s; }
.modal__x:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.modal__x svg { width: 16px; height: 16px; }
.modal__acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* prose: legal pages, docs, long text */
.prose { max-width: 760px; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.prose h2 { margin: 44px 0 14px; font: 800 26px/1.15 var(--display); font-variation-settings: 'wdth' 106; text-transform: uppercase; color: var(--ink); }
.prose h3 { margin: 30px 0 10px; font: 700 18px/1.3 var(--display); color: var(--ink); }
.prose a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }

@media (max-width: 860px) {
  .cols, .form__row { grid-template-columns: minmax(0, 1fr); }
  .pagehead { padding-top: 130px; }
}

/* ---- header dropdowns and the account chip ---------------------------
   The bar holds five entries; Store opens a menu and everything personal
   sits behind the chip, so nothing has to wrap onto a second line. */
.nav__links a, .nav__trig { white-space: nowrap; }
.nav__has { position: relative; display: inline-flex; }
.nav__trig {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: 700 11px/1 var(--display); font-variation-settings: 'wdth' 112;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  transition: color .3s;
}
.nav__trig:hover, .nav__trig.on, .nav__has.open .nav__trig { color: var(--ink); }
.nav__caret { width: 11px; height: 11px; flex: none; transition: transform .25s var(--ease); }
.nav__has.open .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 70;
  min-width: 196px; padding: 7px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(12, 10, 20, .96); backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55);
  display: grid; gap: 2px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav__menu--right { left: auto; right: 0; }
.nav__has.open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
.nav__menu a, .nav__menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-sm); color: var(--ink-2);
  font: 600 13.5px/1.2 var(--body); white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav__menu a:hover, .nav__menu button:hover { color: var(--ink); background: var(--acc-a12); }
.nav__out { color: #ff8c9f !important; border-top: 1px solid var(--line) !important; border-radius: 0 0 var(--r-sm) var(--r-sm) !important; margin-top: 4px; padding-top: 11px !important; }
.nav__out:hover { background: rgba(255, 93, 122, .12) !important; }

.nav__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 5px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: var(--ink);
  font: 600 13px/1 var(--body); max-width: 190px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.nav__chip:hover, .nav__user.open .nav__chip { border-color: var(--acc-a45); background: var(--acc-a12); }
.nav__chip img, .nav__chip i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--bg-3);
  display: grid; place-items: center; font-style: normal;
  font: 700 12px/1 var(--display); color: var(--acc-ink);
}
.nav__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the account block in the phone menu ----------------------------- */
.mnav__links a.sub { opacity: .68; padding-left: 34px; }
.mnav__links a.sub span { opacity: .4; }
.mnav__me { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.mnav__who { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.mnav__who img, .mnav__who i {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--bg-3); display: grid; place-items: center;
  font-style: normal; font: 700 15px/1 var(--display); color: var(--acc-ink);
}
.mnav__who b { font: 700 16px/1 var(--display); }
.mnav__mine { display: grid; gap: 2px; }
.mnav__mine a, .mnav__mine button {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; background: rgba(255, 255, 255, .03);
  border-radius: var(--r-sm); color: var(--ink-2);
  font: 600 14.5px/1 var(--body); cursor: pointer;
}
.mnav__mine a:hover, .mnav__mine button:hover { color: var(--ink); background: var(--acc-a12); }
.mnav__mine button { color: #ff8c9f; }

@media (max-width: 1340px) { .nav__links a, .nav__trig { padding: 10px 10px; letter-spacing: .09em; } }

/* On a phone the bar only has room for the logo, the account and the burger,
   so the chip drops to its avatar and the menu moves into the burger. */
@media (max-width: 1100px) {
  .nav__chip { padding: 4px; max-width: none; }
  .nav__chip span, .nav__chip .nav__caret { display: none; }
  .nav__user .nav__menu { display: none; }
}

/* ---- first paint -----------------------------------------------------
   The animated headings are plain text in the HTML until the runtime
   splits them into words. Without this they were briefly readable and then
   snapped back to their hidden starting state. The class is set by an inline
   script in <head>, so it applies before anything is painted, and removed
   once the runtime has run (or after its failsafe). */
html.nd-boot .split { opacity: 0; }
html.nd-boot .intro { opacity: 1; }

/* Someone who asked the system for less movement gets the finished page
   straight away, with no gate and no sliding. */
@media (prefers-reduced-motion: reduce) {
  html.nd-boot .split { opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .split .w > span { transform: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ---- page loader -----------------------------------------------------
   The full intro with the scrambling wordmark plays once per visit. Moving
   between pages shows this shorter version instead: the same mark and bar,
   on screen only while the page is getting ready, so a switch never shows a
   half-built page. It is driven purely by the nd-boot class, so it is up
   from the very first paint. */
.pload {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}
html.nd-boot .pload {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s var(--ease), visibility 0s;
}
.pload__logo {
  width: 72px;
  filter: drop-shadow(0 0 30px var(--acc-a45));
  animation: ploadPulse 1.4s var(--ease) infinite;
}
.pload__bar {
  width: 220px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.pload__bar i {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--acc), var(--acc-2));
  box-shadow: 0 0 12px var(--acc);
  animation: ploadSlide 1.1s var(--ease) infinite;
}
@keyframes ploadPulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.07); opacity: 1; }
}
@keyframes ploadSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* The opening intro owns the screen on the first page; no second overlay. */
body.is-intro .pload { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pload { display: none; }
}

/* Library cards reuse the catalogue card; these two bits it does not have:
   a placeholder when Tebex has no image, and the "owned" flag. */
.card__none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-4); font-size: 13px; }
.flag--owned { background: rgba(91, 227, 164, .92); color: #04120c; display: inline-flex; align-items: center; gap: 5px; }
.flag--owned svg { width: 11px; height: 11px; }

/* ---------- breadcrumb, shared by the account-side pages ---------- */
.crumb {
  display: flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font: 600 semi-expanded 11px/1 var(--label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.crumb a { color: var(--ink-3); text-decoration: none; transition: color .25s; }
.crumb a:hover { color: var(--ink); }
.crumb b { color: var(--ink-2); font-weight: 600; }