/* Extras: dark theme, back-to-top, cookie banner, mobile bottom bar, bell, hearts, quick actions, skeletons, discover, calendar, quiz */

/* ---------- page fade ---------- */
@keyframes bcgIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
body { animation: bcgIn .35s ease both }
html.vt body { animation: none } html.vt body.page-out { opacity: 1; transition: none }
body.page-out { opacity: 0; transition: opacity .16s ease }
@media (prefers-reduced-motion: reduce) { body { animation: none } body.page-out { transition: none } }

/* ---------- skeletons ---------- */
@keyframes bcgShimmer { 0% { background-position: -240px 0 } 100% { background-position: 240px 0 } }
.skeleton, .sk { background: linear-gradient(90deg, #e9e6f6 0%, #f4f2fc 40%, #e9e6f6 80%); background-size: 480px 100%; animation: bcgShimmer 1.2s linear infinite; border-radius: 8px; color: transparent !important; min-height: 1em }
.sk-card { height: 260px; border-radius: 14px }
.sk-line { height: 14px; margin: .5rem 0; width: 70% }
.tile img { background: linear-gradient(90deg, #1f1833 0%, #2c2347 40%, #1f1833 80%); background-size: 480px 100%; animation: bcgShimmer 1.4s linear infinite }
.tile img[src] { animation-iteration-count: 3 }

/* ---------- toast ---------- */
.bcg-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: #0f0b1a; color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: .3s; z-index: 2147482000; max-width: 92vw; text-align: center }
.bcg-toast.on { opacity: 1; transform: translate(-50%, 0) }

/* ---------- back to top ---------- */
.to-top { position: fixed; right: 20px; bottom: 90px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #ff8a5b; color: #0f0b1a; cursor: pointer; box-shadow: 0 8px 22px rgba(15,11,26,.35); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .3s; z-index: 1900; display: flex; align-items: center; justify-content: center }
.to-top.on { opacity: 1; transform: none; pointer-events: auto }
.to-top:hover { transform: translateY(-2px) }
.to-top svg { width: 20px; height: 20px }

/* ---------- cookie banner ---------- */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; background: #0f0b1a; color: #e7e3f4; border: 1px solid rgba(255,138,91,.35); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 18px 50px rgba(0,0,0,.4); z-index: 2147482500; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .9rem; line-height: 1.5; transform: translateY(30px); opacity: 0; transition: .4s }
.cookie-bar.on { transform: none; opacity: 1 }
.cookie-bar p { margin: 0; flex: 1 1 320px }
.cookie-bar a { color: #ff8a5b; text-decoration: underline }
.cookie-bar button { border: 0; border-radius: 999px; padding: .55rem 1.3rem; font: inherit; font-weight: 700; cursor: pointer; background: #ff8a5b; color: #0f0b1a }

/* ---------- theme toggle ---------- */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer; margin: 0 .35rem }
.theme-btn:hover { background: rgba(255,255,255,.14) }
.theme-btn svg { width: 18px; height: 18px }
.theme-btn .moon { display: none }
html[data-theme="dark"] .theme-btn .sun { display: none }
html[data-theme="dark"] .theme-btn .moon { display: block }

/* ---------- bell ---------- */
.bell-wrap { position: relative; display: inline-flex; margin: 0 .35rem }
.bell-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.bell-btn:hover { background: rgba(255,255,255,.14) }
.bell-btn svg { width: 18px; height: 18px }
.bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #E5484D; color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center }
.bell-count[hidden] { display: none }
.bell-pop { position: absolute; right: 0; top: calc(100% + 14px); width: 330px; max-width: 92vw; background: #fff; color: #1b1530; border-radius: 14px; box-shadow: 0 18px 48px rgba(15,11,26,.3); z-index: 2000; overflow: hidden }
.bell-pop[hidden] { display: none }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid #ece9fa; font-weight: 700 }
.bell-head button { border: 0; background: none; color: #c2461f; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer }
.bell-list { max-height: 360px; overflow-y: auto }
.bell-item { display: block; padding: .75rem 1rem; border-bottom: 1px solid #F0F2F5; text-decoration: none; color: inherit }
.bell-item:hover { background: #fbfaff }
.bell-item.unread { background: #FFFBEB }
.bell-item b { display: block; font-size: .92rem }
.bell-item span { display: block; font-size: .83rem; color: #6b6585; margin-top: .1rem }
.bell-item time { display: block; font-size: .72rem; color: #8e88a8; margin-top: .25rem }
.bell-empty { padding: 1.4rem 1rem; text-align: center; color: #6b6585; font-size: .9rem }

/* ---------- hearts (favourite artists) ---------- */
.fav-wrap { position: relative }
.fav-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(15,11,26,.62); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: transform .2s, background .2s; backdrop-filter: blur(4px) }
.fav-btn:hover { transform: scale(1.12); background: rgba(15,11,26,.85) }
.fav-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2 }
.fav-btn.on { color: #FF5C7A }
.fav-btn.on svg { fill: currentColor }
.fav-btn.pop { animation: favPop .35s ease }
@keyframes favPop { 0% { transform: scale(1) } 50% { transform: scale(1.4) } 100% { transform: scale(1) } }
.fav-inline { position: static; display: inline-flex; vertical-align: middle; margin-left: .6rem; background: #0f0b1a }

/* ---------- mobile bottom bar ---------- */
.bottom-bar { display: none }
@media (max-width: 820px) {
  .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1950; display: grid; grid-template-columns: repeat(4, 1fr); background: #0f0b1a; border-top: 1px solid rgba(255,138,91,.35); padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom)) }
  .bottom-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 0; color: #a9a3c4; text-decoration: none; font-size: .68rem; font-weight: 600 }
  .bottom-bar a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
  .bottom-bar a.on { color: #ff8a5b }
  body.has-bottom-bar { padding-bottom: 72px }
  body.has-bottom-bar .bcgc-btn { bottom: 84px !important }
  body.has-bottom-bar .to-top { bottom: 150px }
  body.has-bottom-bar .cookie-bar { bottom: 82px }
  body.has-bottom-bar .bcg-toast { bottom: 140px }
}

/* ---------- quick actions under the header (dashboard) ---------- */

/* ---------- copy feedback ---------- */
[data-copy].copied-pulse { animation: copyPulse .6s ease }
@keyframes copyPulse { 0% { box-shadow: 0 0 0 0 rgba(30,142,90,.6) } 100% { box-shadow: 0 0 0 14px rgba(30,142,90,0) } }

/* ---------- saved addresses ---------- */
.saved-box { margin: .5rem 0 1rem; padding: .8rem 1rem; border: 1px dashed var(--line, #e3dff3); border-radius: 12px }
.saved-box .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center }
.saved-box select { flex: 1 1 220px; min-width: 0 }
.saved-box .btn { white-space: nowrap }
.saved-list { list-style: none; margin: .7rem 0 0; padding: 0; font-size: .85rem }
.saved-list li { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--line, #ece9fa) }
.saved-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.saved-list button { border: 0; background: none; color: #C0392B; cursor: pointer; font: inherit; font-weight: 700 }

/* ---------- discover (artist directory) ---------- */
.dir-tools { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: .7rem; margin: 1.2rem 0 1.4rem }
@media (max-width: 900px) { .dir-tools { grid-template-columns: 1fr 1fr } .dir-tools .dir-search { grid-column: 1 / -1 } }
.dir-count { color: var(--muted, #6b6585); font-size: .9rem; margin-bottom: .8rem }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem }
.dir-card { position: relative; background: var(--card-bg, #fff); border: 1px solid #ece9fa; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s }
.dir-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,11,26,.16) }
.dir-photo { aspect-ratio: 1 / 1; background: #0f0b1a; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.dir-photo .ini { font-family: var(--font-h, inherit); font-weight: 800; font-size: 2.4rem; color: #ff8a5b; letter-spacing: .04em }
.dir-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; flex: 1 }
.dir-body b { font-size: 1rem; line-height: 1.25 }
.dir-body small { color: var(--muted, #6b6585); font-size: .8rem }
.dir-body .chips-row { display: flex; gap: .3rem; flex-wrap: wrap; margin: .25rem 0 .35rem }
.tag { font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: #F1F4F7; color: #463d66; text-transform: uppercase; letter-spacing: .03em }
.dir-body a.listen { margin-top: auto; font-weight: 700; font-size: .85rem; color: #1a7f46; text-decoration: none }
.dir-body a.listen:hover { text-decoration: underline }
.dir-empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted, #6b6585) }

/* ---------- quiz ---------- */
.quiz-modal { position: fixed; inset: 0; background: rgba(15,11,26,.75); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 2147482600; overflow-y: auto }
.quiz-modal.on { display: flex }
.quiz-box { background: #fff; color: #1b1530; border-radius: 18px; max-width: 520px; width: 100%; padding: 1.8rem; position: relative; margin: auto }
.quiz-box h2 { margin: .2rem 0 1rem; font-size: 1.35rem }
.quiz-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #8e88a8 }
.quiz-prog { height: 6px; border-radius: 3px; background: #ece9fa; overflow: hidden; margin-bottom: 1.1rem }
.quiz-prog i { display: block; height: 100%; width: 0; background: #ff8a5b; transition: width .3s }
.quiz-opts { display: grid; gap: .6rem }
.quiz-opts button { text-align: left; padding: .9rem 1rem; border: 2px solid #ece9fa; border-radius: 12px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: #0f0b1a; transition: .15s }
.quiz-opts button:hover { border-color: #ff8a5b; background: #FFFBEB }
.quiz-res { text-align: center }
.quiz-res .ini { width: 110px; height: 110px; border-radius: 50%; background: #0f0b1a; color: #ff8a5b; font-weight: 800; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; overflow: hidden }
.quiz-res .ini img { width: 100%; height: 100%; object-fit: cover }
.quiz-alt { margin-top: 1rem; font-size: .88rem; color: #6b6585 }
.quiz-alt a { color: #1a7f46; font-weight: 700 }

/* ---------- calendar ---------- */
.cal-tabs { display: flex; gap: .5rem; margin: 1rem 0 1.2rem; flex-wrap: wrap }
.cal-tabs button { border: 1px solid var(--line, #e3dff3); background: #fff; border-radius: 999px; padding: .45rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; color: #0f0b1a }
.cal-tabs button.on { background: #0f0b1a; color: #fff; border-color: #0f0b1a }
.cal-month { margin: 1.4rem 0 .5rem; font-family: var(--font-h, inherit); font-size: 1.05rem; color: var(--gold-dark, #c2461f); text-transform: uppercase; letter-spacing: .06em }
.cal-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding: .8rem 1rem; background: #fff; border: 1px solid #ece9fa; border-radius: 12px; margin-bottom: .5rem }
.cal-date { text-align: center; line-height: 1.1 }
.cal-date b { display: block; font-size: 1.5rem; font-family: var(--font-h, inherit); color: #0f0b1a }
.cal-date span { font-size: .72rem; text-transform: uppercase; color: #6b6585; font-weight: 700 }
.cal-main b { display: block }
.cal-main small { color: #6b6585 }
.cal-row a { font-weight: 700; font-size: .85rem; color: #1a7f46; text-decoration: none; white-space: nowrap }
.cal-row.past { opacity: .6 }
.cal-src { color: #8e88a8; font-size: .8rem; margin-top: 1rem }

/* ---------- favourites page ---------- */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem }

/* =====================================================================
   DARK THEME
   ===================================================================== */
html[data-theme="dark"] { color-scheme: dark; --bg: #0f0b1a; --bg-alt: #130f21; --ink: #e8edf3; --muted: #a9a3c4; --line: #33294f; --card-bg: #130f21; --shadow: 0 6px 24px rgba(0,0,0,.45) }
html[data-theme="dark"] body { background: var(--bg); color: var(--ink) }
html[data-theme="dark"] .section:not(.section-dark), html[data-theme="dark"] .dash, html[data-theme="dark"] main { background: var(--bg); color: var(--ink) }
html[data-theme="dark"] .price, html[data-theme="dark"] blockquote, html[data-theme="dark"] .card .rate { color: #f4f2fc }
html[data-theme="dark"] .section-dark label, html[data-theme="dark"] .section-dark span, html[data-theme="dark"] .section-dark p { color: inherit }
html[data-theme="dark"] label, html[data-theme="dark"] .acc-btn, html[data-theme="dark"] .lead, html[data-theme="dark"] .pull, html[data-theme="dark"] .v,
html[data-theme="dark"] .check span, html[data-theme="dark"] .wallet b, html[data-theme="dark"] .sum-list dd, html[data-theme="dark"] .sum-list dt, html[data-theme="dark"] .tl-item h3 { color: var(--ink) }
html[data-theme="dark"] .acc-item, html[data-theme="dark"] .acc-panel { color: var(--ink) }
html[data-theme="dark"] .section-alt { background: var(--bg-alt) }
html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .form-card, html[data-theme="dark"] .modal-box, html[data-theme="dark"] .acc-item,
html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .wallet, html[data-theme="dark"] .partner, html[data-theme="dark"] .coin, html[data-theme="dark"] .amount-box,
html[data-theme="dark"] .dir-card, html[data-theme="dark"] .cal-row, html[data-theme="dark"] .compare .before { background: var(--card-bg); color: var(--ink); border-color: var(--line) }
html[data-theme="dark"] .plan-gray { background: #17122a }
html[data-theme="dark"] .callout, html[data-theme="dark"] td.hl, html[data-theme="dark"] .coin.on, html[data-theme="dark"] .steps li.on, html[data-theme="dark"] .chips button:hover { background: #2e1b26; color: var(--ink) }
html[data-theme="dark"] .chips button, html[data-theme="dark"] .seg button.on, html[data-theme="dark"] .xch-max, html[data-theme="dark"] .tabs button, html[data-theme="dark"] .cal-tabs button { background: var(--card-bg); color: var(--ink); border-color: var(--line) }
html[data-theme="dark"] .tabs button.on, html[data-theme="dark"] .cal-tabs button.on { background: #ff8a5b; color: #0f0b1a }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=password], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #110d1e; color: var(--ink); border-color: var(--line) }
html[data-theme="dark"] .amount-box input { background: transparent }
html[data-theme="dark"] table thead th { background: #0c0916; color: #d9e2ec }
html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: var(--line); color: var(--ink) }
html[data-theme="dark"] tbody tr:hover td { background: #17122a }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .h-section-title, html[data-theme="dark"] .h-page-title, html[data-theme="dark"] .cal-date b { color: #f4f2fc }
html[data-theme="dark"] .note, html[data-theme="dark"] .h-subtitle, html[data-theme="dark"] .dir-body small, html[data-theme="dark"] .cal-main small, html[data-theme="dark"] .cal-date span { color: var(--muted) }
html[data-theme="dark"] .tag { background: #271f40; color: #d3cfe6 }
html[data-theme="dark"] .dir-card { border-color: var(--line) }
html[data-theme="dark"] .skeleton, html[data-theme="dark"] .sk { background: linear-gradient(90deg, #17122a 0%, #2a2145 40%, #17122a 80%); background-size: 480px 100% }
html[data-theme="dark"] .bal-pop, html[data-theme="dark"] .bell-pop, html[data-theme="dark"] .quiz-box { background: #130f21; color: var(--ink) }
html[data-theme="dark"] .bal-pop::before { background: #130f21 }
html[data-theme="dark"] .bell-head { border-color: var(--line) }
html[data-theme="dark"] .bell-item { border-color: #251d3b }
html[data-theme="dark"] .bell-item:hover { background: #17122a }
html[data-theme="dark"] .bell-item.unread { background: #2e1b26 }
html[data-theme="dark"] .bell-item span, html[data-theme="dark"] .bell-empty { color: var(--muted) }
html[data-theme="dark"] .quiz-opts button { background: #130f21; color: var(--ink); border-color: var(--line) }
html[data-theme="dark"] .quiz-opts button:hover { background: #2e1b26; border-color: #ff8a5b }
html[data-theme="dark"] .quiz-prog { background: #2a2145 }
html[data-theme="dark"] .quiz-alt { color: var(--muted) }
html[data-theme="dark"] .form-status { color: var(--ink) }
html[data-theme="dark"] .form-status.err { background: #3a1d1d; color: #ff9c8f }
html[data-theme="dark"] .qr { background: #fff }
html[data-theme="dark"] img.photo { filter: brightness(.92) }
html[data-theme="dark"] .saved-box { border-color: var(--line) }
html[data-theme="dark"] .bcgc-panel { background: #130f21; color: var(--ink) }
html[data-theme="dark"] .bcgc-body { background: #110d1e }
html[data-theme="dark"] .bcgc-m.bot { background: #17122a; border-color: var(--line); color: var(--ink) }
html[data-theme="dark"] .bcgc-form { background: #130f21; border-color: var(--line) }
html[data-theme="dark"] .bcgc-form input { background: #110d1e; color: var(--ink); border-color: var(--line) }

/* ---------- running rates line (deposit page) ---------- */
.rates-wrap { overflow: hidden; flex: 1 1 260px; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) }
.rates-list.run { flex-wrap: nowrap; width: max-content; gap: 0; animation: ratesRun 34s linear infinite }
.rates-list.run .rate-item { margin-right: 1.8rem; white-space: nowrap }
.rates-list.run:hover { animation-play-state: paused }
@keyframes ratesRun { to { transform: translateX(-50%) } }
/* the page-wide reduced-motion reset would freeze the line: keep it moving, but slowly (it pauses on hover) */
@media (prefers-reduced-motion: reduce) { .rates-list.run { animation-duration: 90s !important; animation-iteration-count: infinite !important } }

/* ---------- dark theme: buttons, names, small fixes ---------- */
html[data-theme="dark"] .dir-body b, html[data-theme="dark"] .dir-body b a, html[data-theme="dark"] .cal-main b, html[data-theme="dark"] .quiz-box h2, html[data-theme="dark"] .quiz-box b { color: #f4f2fc !important }
html[data-theme="dark"] .btn-outline-dark { color: var(--ink); border-color: #756f95; background: transparent }
html[data-theme="dark"] .btn-outline-dark:hover { background: #231b3a; color: #fff; border-color: #ff8a5b }
html[data-theme="dark"] .btn-secondary { background: #312852; color: #fff }
html[data-theme="dark"] .dir-body a.listen { color: #5FD38D }
html[data-theme="dark"] .quiz-alt a { color: #5FD38D }
html[data-theme="dark"] .cal-row a { color: #5FD38D }
html[data-theme="dark"] .dir-photo { background: #0c0916 }
html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .page-hero p { color: #e7e3f4 }
html[data-theme="dark"] .prose a, html[data-theme="dark"] .note a, html[data-theme="dark"] footer a { color: #ff8a5b }
html[data-theme="dark"] .footer a { color: #bdb7d4 }

/* ---------- header: logo never wraps, the row fits on one line ---------- */
.logo { flex: none; white-space: nowrap }
.nav-inner { gap: clamp(.6rem, 1vw, 1.4rem) }
.nav-links { gap: clamp(.65rem, 1.05vw, 1.5rem) }
.nav-links a { font-size: clamp(.8rem, .75rem + .12vw, .9rem) }
@media (max-width: 1599px) { .nav-actions { gap: .6rem } }
@media (max-width: 1240px) { .nav-links a { font-size: .8rem } .bal-chip { font-size: .8rem } }

/* ---------- Deposit / Withdraw / Start Investing under the header ---------- */
.hero-actions { position: absolute; top: calc(var(--nav-h) + var(--banner-h) + 12px); left: 0; right: 0; z-index: 30; pointer-events: none }
.hero-actions .container { display: flex; gap: .6rem; flex-wrap: wrap }
.qa-btn { pointer-events: auto; display: inline-flex; align-items: center; padding: .5rem 1.15rem; border-radius: 8px; font-family: var(--font-h); font-weight: 700; font-size: .88rem; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: transform .15s, background .2s, color .2s }
.qa-btn:hover { transform: translateY(-1px); text-decoration: none }
.qa-gold { background: #ff8a5b; color: #0f0b1a }
.qa-gold:hover { background: #E3C257; color: #0f0b1a }
.qa-navy { background: #0f0b1a; color: #fff; border-color: #ff8a5b }
.qa-navy:hover { background: #1b1530; color: #fff }
.qa-white { background: #fff; color: #0f0b1a }
.qa-white:hover { background: #F2F4F7; color: #0f0b1a }
body.has-qa .hero, body.has-qa .page-hero { padding-top: calc(var(--nav-h) + var(--banner-h) + 5.8rem) }
@media (max-width: 899px) { .hero-actions { display: none } body.has-qa .hero, body.has-qa .page-hero { padding-top: calc(var(--nav-h) + var(--banner-h) + 3rem) } }

.dir-photo img { object-position: center 22% }

/* ---------- artist trading card (Discover) ---------- */
.dir-card { cursor: pointer }
.dir-card:focus-visible { outline: 2px solid #ff8a5b; outline-offset: 2px }
body.ac-lock { overflow: hidden }
.ac-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(9, 9, 11, .88); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; animation: acIn .2s ease }
.ac-overlay[hidden] { display: none }
@keyframes acIn { from { opacity: 0 } to { opacity: 1 } }
.ac-x { position: fixed; top: 14px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 2 }
.ac-x:hover { background: rgba(255,255,255,.2) }
.ac-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; z-index: 2 }
.ac-nav:hover { background: rgba(255,138,91,.35) }
.ac-prev { left: 14px } .ac-next { right: 14px }
.ac-stage { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 880px; width: 100%; margin: auto; padding: 3.2rem 0 1.5rem }
.ac-card { --rc: #ff8a5b; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%; position: relative; width: min(340px, 86vw); aspect-ratio: 5 / 7.4; border-radius: 22px; overflow: hidden; background: #0f0b1a; border: 3px solid var(--rc); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 70px rgba(0,0,0,.65), 0 0 46px color-mix(in srgb, var(--rc) 45%, transparent); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; flex: none; color: #fff }
.ac-card.flip-in { animation: acFlip .55s cubic-bezier(.2, .8, .2, 1) }
@keyframes acFlip { from { transform: perspective(900px) rotateY(-80deg) scale(.9); opacity: 0 } to { transform: perspective(900px) rotateY(0) scale(1); opacity: 1 } }
.ac-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0c0916 }
.ac-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20% }
.ac-photo .ini { font-family: var(--font-h, inherit); font-weight: 800; font-size: 5rem; color: #ff8a5b }
.ac-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 45%), linear-gradient(115deg, rgba(255,0,128,.18), rgba(0,200,255,.18) 40%, rgba(255,220,0,.18) 70%, rgba(255,0,128,.18)) }
.ac-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.1rem 1.1rem; background: linear-gradient(0deg, rgba(12,9,22,.97) 55%, rgba(12,9,22,.85) 75%, rgba(12,9,22,0)) }
.ac-top { position: absolute; top: -2.4rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: center }
.ac-rar { background: var(--rc); color: #0f0b1a; font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .7rem; border-radius: 999px }
.ac-ovr { font-family: var(--font-h, inherit); font-weight: 800; font-size: 2rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); line-height: 1 }
.ac-name { margin: 0; font-size: 1.55rem; color: #fff; line-height: 1.1 }
.ac-place { margin: .15rem 0 .5rem; color: #b8b2d0; font-size: .85rem }
.ac-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem }
.ac-tags .tag { background: rgba(255,255,255,.14); color: #fff }
.ac-stat { display: grid; grid-template-columns: 52px 1fr 28px; gap: .5rem; align-items: center; font-size: .78rem; margin: .22rem 0 }
.ac-stat b { color: #fff; font-weight: 700 } .ac-stat span { text-align: right; color: #fff; font-weight: 800 }
.ac-stat i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden }
.ac-stat u { display: block; height: 100%; background: var(--rc); border-radius: 4px; transition: width .7s cubic-bezier(.2, .8, .2, 1) }
.ac-side { width: min(320px, 90vw); color: #fff; display: flex; flex-direction: column; gap: 1rem }
.ac-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center }
.ac-actions .btn { color: #fff }
.ac-actions .btn-primary { color: #0f0b1a }
.ac-actions .btn-outline { border-color: rgba(255,255,255,.55); color: #fff }
.ac-fav { display: inline-flex; align-items: center; gap: .4rem } .ac-fav small { color: #b8b2d0 }
.ac-fav .fav-btn { position: static; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff }
.ac-battle { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 1rem }
.ac-battle h3 { margin: 0 0 .2rem; color: #ff8a5b; font-size: 1.05rem }
.ac-bnote { margin: 0 0 .7rem; color: #b8b2d0; font-size: .82rem }
.ac-bstats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem }
.ac-bbtn { display: flex; justify-content: space-between; align-items: center; padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font: inherit; font-size: .88rem }
.ac-bbtn b { color: #ff8a5b } .ac-bbtn:hover { background: rgba(255,138,91,.25); border-color: #ff8a5b }
.ac-score { margin: .7rem 0 0; color: #b8b2d0; font-size: .8rem } .ac-score b { color: #fff }
.ac-bres { display: flex; gap: .7rem; align-items: center; margin-top: .6rem }
.ac-bres:empty { display: none }
.ac-foe { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex: none; background: #0c0916; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.3) }
.ac-foe img { width: 100%; height: 100%; object-fit: cover; object-position: center 20% } .ac-foe .ini { color: #ff8a5b; font-weight: 800 }
.ac-btext { display: flex; flex-direction: column; font-size: .82rem; color: #b8b2d0 } .ac-btext b { font-size: 1.1rem }
.ac-bres.win .ac-btext b { color: #4ADE80 } .ac-bres.lose .ac-btext b { color: #FF6B6B } .ac-bres.draw .ac-btext b { color: #ff8a5b }
.ac-bres.win .ac-foe { animation: acShake .4s } .ac-bres.lose .ac-foe { border-color: #FF6B6B }
@keyframes acShake { 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
.ac-hint { margin: 0; color: #8e88a8; font-size: .76rem }
@media (max-width: 760px) { .ac-nav { top: auto; bottom: 14px; transform: none } .ac-stage { padding-top: 3.5rem; gap: 1.2rem } .ac-prev { left: 18px } .ac-next { right: 18px } }
@media (prefers-reduced-motion: reduce) { .ac-card, .ac-card.flip-in { animation: none; transition: none } .ac-stat u { transition: none } }


/* ================= site theme: neutral black, brass accent, Inter Tight ================= */
:root { --bone: #f4f1ff; --brass: #ff8a5b; --surface-a: #130f21; --surface-b: #1b1530 }
body { letter-spacing: -.003em }
.btn { border-radius: 12px; font-family: var(--font-h); font-weight: 600; letter-spacing: -.01em }
.btn-primary { background: var(--brass); color: #111; border-color: var(--brass); box-shadow: none }
.btn-primary:hover { background: #ff9f78; color: #111; border-color: #ff9f78; transform: translateY(-1px) }
.btn-secondary { background: #fff; color: #111; border-color: #fff }
.navbar.solid { background: rgba(15, 11, 26, .88); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) }

/* hero: clean black, one soft light, no stock photo */
.hero { background-image: none !important; background-color: #0f0b1a; min-height: 0; overflow: hidden }
.hero::before { background: radial-gradient(60% 80% at 85% 20%, rgba(255, 138, 91, .16), rgba(255, 138, 91, 0) 65%), radial-gradient(50% 60% at 0% 100%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%), #0f0b1a }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--brass); letter-spacing: .16em; font-size: .75rem; font-weight: 600 }
.hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass) }
.hero h1 { color: var(--bone); font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em; max-width: 880px; margin: .9rem 0 1.2rem }
.hero h2 { color: #a9a3c4; max-width: 560px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65 }
.hero .btn-outline { border-color: rgba(255, 255, 255, .28); color: var(--bone); background: transparent }
.hero .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06) }
.hero-stat { color: #a9a3c4 } .hero-stat strong { color: var(--bone) }

/* artist cards: one neutral grade and a smooth white outline */
.hero-roster .rt { position: relative; overflow: hidden; background: #130f21; border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 18px; transition: transform .25s, box-shadow .25s }
.hero-roster .rt img { filter: grayscale(1) contrast(1.06) brightness(.95); transition: filter .35s, transform .5s }
.hero-roster .rt:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0, 0, 0, .55) }
.hero-roster .rt:hover img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.04) }
.hero-roster .rt span { position: relative; z-index: 2 }
.dir-card { border-radius: 18px }
.dir-photo img { filter: grayscale(1) contrast(1.05); transition: filter .35s }
.dir-card:hover .dir-photo img { filter: none }

/* ticker: quiet, not a yellow bar */
.ticker { background: #0f0b1a; color: #a9a3c4; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 500; font-size: .8rem; letter-spacing: .02em }
.ticker-track > span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brass); opacity: .8; right: -.2rem; top: .55em }

/* quick buttons under the header */
.qa-gold { background: var(--brass); color: #111; box-shadow: none }
.qa-gold:hover { background: #ff9f78; color: #111 }
.qa-navy { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; backdrop-filter: blur(8px) }
.qa-navy:hover { background: rgba(255, 255, 255, .16); color: #fff }
.qa-white { background: transparent; border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: none }
.qa-white:hover { background: rgba(255, 255, 255, .1); color: #fff }


/* ---------- artist marquee (home hero): one seamless photo strip ---------- */
/* the layout never changes on hover: the hovered photo opens OVER its neighbours (--ex px on each side) */
.artist-marquee { --ex: 76px; position: relative; width: 100vw; margin: 2.6rem calc(50% - 50vw) 0; overflow: hidden; border-block: 1.5px solid rgba(255, 255, 255, .85);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) }
.am-track { display: flex; width: max-content }


.am-card { --mx: 50%; --my: 40%; position: relative; flex: 0 0 auto; width: 188px; height: 300px; display: block; color: #fff; text-decoration: none; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .55); transition: filter .4s }
.am-card:hover, .am-card:focus-visible { z-index: 5; color: #fff; outline: none; filter: none }
.am-ph { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; overflow: hidden; background: #130f21; transition: left .55s cubic-bezier(.2, .8, .2, 1), right .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s }
.am-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; filter: grayscale(1) contrast(1.08) brightness(.9); transform: scale(1.04); transition: filter .6s, transform 1.1s cubic-bezier(.2, .8, .2, 1) }
.am-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .82) 100%) }
.am-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; transition: opacity .35s, left .55s cubic-bezier(.2, .8, .2, 1), right .55s cubic-bezier(.2, .8, .2, 1);
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 236, 190, .85), rgba(255, 236, 190, 0) 62%) }
.am-card::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 3px; width: 0; z-index: 3; transform: translateX(-50%); background: linear-gradient(90deg, var(--brass), #ffd0b8); transition: width .6s cubic-bezier(.2, .8, .2, 1) }

.am-eq { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; align-items: flex-end; gap: 3px; height: 18px; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s, right .55s cubic-bezier(.2, .8, .2, 1) }
.am-eq s { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--brass); transform-origin: bottom; transform: scaleY(.25); text-decoration: none }

.am-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: block; transition: left .55s cubic-bezier(.2, .8, .2, 1), right .55s cubic-bezier(.2, .8, .2, 1) }
.am-cap small { display: block; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); font-weight: 600; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; white-space: nowrap }
.am-cap b { display: block; font-family: var(--font-h); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); white-space: nowrap; transition: font-size .4s }
.am-cap em { display: block; font-style: normal; font-size: .78rem; color: #ffc2a3; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px); transition: max-height .4s, opacity .4s, transform .4s; white-space: nowrap }

/* hover */
.am-track:hover .am-card:not(:hover) { filter: brightness(.55) }
.am-card:hover .am-ph, .am-card:focus-visible .am-ph { left: calc(var(--ex) * -1); right: calc(var(--ex) * -1); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 24px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(255, 138, 91, .3) }
.am-card:hover .am-ph img, .am-card:focus-visible .am-ph img { filter: grayscale(0) contrast(1.03) brightness(1.02); transform: scale(1) }
.am-card:hover::before, .am-card:focus-visible::before { opacity: 1; left: calc(var(--ex) * -1); right: calc(var(--ex) * -1) }
.am-card:hover::after, .am-card:focus-visible::after { width: calc(100% + var(--ex) * 2) }
.am-card:hover .am-cap, .am-card:focus-visible .am-cap { left: calc(16px - var(--ex)); right: calc(16px - var(--ex)) }
.am-card:hover .am-eq, .am-card:focus-visible .am-eq { opacity: 1; transform: none; right: calc(14px - var(--ex)) }
.am-card:hover .am-eq s, .am-card:focus-visible .am-eq s { animation: amBar .9s ease-in-out infinite }
.am-eq s:nth-child(2) { animation-delay: -.3s !important } .am-eq s:nth-child(3) { animation-delay: -.6s !important } .am-eq s:nth-child(4) { animation-delay: -.15s !important }
@keyframes amBar { 0%, 100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }
.am-card:hover .am-cap small, .am-card:focus-visible .am-cap small { max-height: 1.6em; opacity: 1; margin-bottom: 3px }
.am-card:hover .am-cap em, .am-card:focus-visible .am-cap em { max-height: 1.6em; opacity: 1; transform: none; margin-top: 4px }
.am-card:hover .am-cap b, .am-card:focus-visible .am-cap b { font-size: 1.35rem }

@media (max-width: 700px) { .artist-marquee { --ex: 40px; margin-top: 2rem } .am-card { width: 140px; height: 230px }  }
/* the page-wide reduced-motion reset would freeze the marquee: keep it, but very slow (it pauses on hover) */
@media (prefers-reduced-motion: reduce) { .am-card, .am-card *, .am-card::before, .am-card::after { transition: none !important } .am-eq s { animation: none !important } }

/* ================= palette v3: ink violet, lavender, violet-to-pink gradient, coral detail; smooth Plus Jakarta Sans ================= */
:root { --grad: linear-gradient(135deg, #6d4dff 0%, #c93fa8 100%); --grad-soft: linear-gradient(135deg, rgba(109, 77, 255, .22), rgba(201, 63, 168, .18)) }
body { text-rendering: optimizeLegibility; letter-spacing: 0 }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em }
.btn { font-weight: 700; letter-spacing: 0; border-radius: 14px }
.btn-primary, .qa-gold { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(109, 77, 255, .32) }
.btn-primary:hover, .qa-gold:hover { background: var(--grad); color: #fff; border-color: transparent; filter: brightness(1.1); transform: translateY(-1px) }
.btn-secondary { background: #fff; color: #1b1530; border-color: #fff }
.nav-links a { font-weight: 600 }
.navbar.solid { background: rgba(15, 11, 26, .86) }

.hero::before { background: radial-gradient(55% 75% at 88% 12%, rgba(124, 92, 255, .38), rgba(124, 92, 255, 0) 66%), radial-gradient(45% 60% at 8% 100%, rgba(255, 92, 168, .20), rgba(255, 92, 168, 0) 70%), #0f0b1a }
.hero h1 { font-weight: 700; letter-spacing: -.035em; color: #f4f1ff }
.hero h2 { color: #b9b2d8 }
.hero .btn-outline { border-color: rgba(244, 241, 255, .3); color: #f4f1ff }
.hero .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08) }
.hero .eyebrow { color: #ff9b72 }
.hero .eyebrow::before { background: #ff9b72 }

.ticker { background: #0f0b1a; color: #b9b2d8; border-color: rgba(244, 241, 255, .09) }
.ticker-track > span::after { background: var(--grad) }

.qa-navy { background: rgba(244, 241, 255, .08); border-color: rgba(244, 241, 255, .24) }
.qa-white { border-color: rgba(244, 241, 255, .24) }

.am-card::after { background: var(--grad) }
.am-cap small { color: #ff9b72 }
.am-cap em { color: #ffc2a3 }
.am-eq s { background: linear-gradient(180deg, #ff8a5b, #c93fa8) }
.am-card:hover .am-ph, .am-card:focus-visible .am-ph { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 24px 60px rgba(8, 5, 20, .75), 0 0 56px rgba(124, 92, 255, .38) }
.am-ph::after { background: linear-gradient(180deg, rgba(15, 11, 26, .2) 0, rgba(15, 11, 26, 0) 35%, rgba(15, 11, 26, .88) 100%) }
.am-card::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(190, 170, 255, .85), rgba(190, 170, 255, 0) 62%) }


/* ---------- hero: "Stream on" composition (right side): round glass logos on glowing orbits ---------- */
.hero .container { position: relative }
.hero h1 { max-width: min(880px, 60%) }
.hero h2 { max-width: min(560px, 58%) }
.hero-listen { position: absolute; right: 0; top: -66px; width: min(470px, 37%); z-index: 2 }
.ls-glow { position: absolute; inset: -30px -40px -20px -30px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(48% 46% at 62% 42%, rgba(124, 92, 255, .40), rgba(124, 92, 255, 0) 70%), radial-gradient(38% 38% at 28% 82%, rgba(255, 92, 168, .24), rgba(255, 92, 168, 0) 70%) }
.ls-head { margin: 0 0 6px 4px; position: relative; z-index: 2 }
.ls-head span { display: block; font-family: var(--font-h); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; color: #f4f1ff }
.ls-head small { display: block; font-size: .84rem; color: #b9b2d8; margin-top: 2px }

.ls-grid { position: relative; display: block; aspect-ratio: 1 / 1.16; margin-top: 4px }
.ls-grid::before, .ls-grid::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; border: 1px dashed rgba(244, 241, 255, .16) }
.ls-grid::before { inset: 4% 2% 6% 6% }
.ls-grid::after { inset: 24% 24% 24% 22%; border-color: rgba(255, 138, 91, .22) }

.ls-tile { --c: #fff; position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #f4f1ff; animation: lsFloat 9s ease-in-out infinite }
.ls-tile:nth-child(1) { width: 38%; left: 52%; top: 1%; animation-delay: 0s }
.ls-tile:nth-child(2) { width: 29%; left: 3%; top: 22%; animation-delay: -2.5s }
.ls-tile:nth-child(3) { width: 34%; left: 55%; top: 46%; animation-delay: -5s }
.ls-tile:nth-child(4) { width: 27%; left: 14%; top: 64%; animation-delay: -7s }
@keyframes lsFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }

.ls-logo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 58%), rgba(30, 22, 58, .55); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 22px 50px rgba(8, 5, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -18px 30px rgba(124, 92, 255, .12);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .45s }
.ls-logo::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: radial-gradient(circle at 50% 120%, var(--c), transparent 62%); opacity: 0; transition: opacity .45s }
.ls-logo img { grid-area: 1 / 1; width: 46%; height: 46%; position: relative; transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1) }
.ls-logo .c { opacity: 0 }
.ls-tile b { margin-top: 10px; font-family: var(--font-h); font-size: 1rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; white-space: nowrap }
.ls-tile em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .76rem; color: #b9b2d8; margin-top: 3px; transition: color .3s }
.ls-tile em i { font-style: normal; display: inline-block; transition: transform .35s }

.ls-tile:hover, .ls-tile:focus-visible { z-index: 3; outline: none; animation-play-state: paused }
.ls-tile:hover .ls-logo, .ls-tile:focus-visible .ls-logo { transform: scale(1.12); border-color: var(--c); box-shadow: 0 28px 64px rgba(8, 5, 20, .65), 0 0 0 1px var(--c), 0 0 56px color-mix(in srgb, var(--c) 55%, transparent) }
.ls-tile:hover .ls-logo::before, .ls-tile:focus-visible .ls-logo::before { opacity: .55 }
.ls-tile:hover .w, .ls-tile:focus-visible .w { opacity: 0 }
.ls-tile:hover .c, .ls-tile:focus-visible .c { opacity: 1; transform: scale(1.12) rotate(-5deg) }
.ls-tile:hover em, .ls-tile:focus-visible em { color: #fff }
.ls-tile:hover em i, .ls-tile:focus-visible em i { transform: translateX(5px) }
.ls-note { margin: 10px 4px 0; font-size: .7rem; line-height: 1.5; color: #8e88a8; position: relative; z-index: 2 }

@media (max-width: 1100px) { .hero-listen { width: min(400px, 40%) } }
@media (max-width: 899px) {
  .hero .container { display: flex; flex-direction: column; align-items: flex-start }
  .hero h1, .hero h2 { max-width: 100% }
  .hero-listen { position: relative; right: auto; top: auto; width: 100%; max-width: 520px; order: 5; margin-top: 1.8rem }
  .artist-marquee { order: 6; align-self: stretch }
  .ls-grid { aspect-ratio: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px }
  .ls-grid::before, .ls-grid::after { display: none }
  .ls-tile, .ls-tile:nth-child(n) { position: relative; width: auto; left: auto; top: auto }
  .ls-tile b { font-size: .8rem } .ls-tile em { display: none }
}
@media (prefers-reduced-motion: reduce) { .ls-tile { animation: none } }

/* ================= calculator on the home page ================= */
.calc-sec { background: #0f0b1a }
.calc-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center }
.calc-copy .h-section-title { color: #f4f1ff }
.calc-points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem }
.calc-points li { position: relative; padding-left: 1.7rem; color: #b9b2d8; font-size: .95rem }
.calc-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad) }
.calc-card { position: relative; padding: 1.6rem; border-radius: 28px; color: #f4f1ff; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(8, 5, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .1) }
.calc-card::before { content: ""; position: absolute; inset: -1px; border-radius: 28px; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(124, 92, 255, .7), rgba(255, 92, 168, 0) 40%, rgba(255, 138, 91, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude }
.calc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 5px; border-radius: 18px; background: rgba(8, 5, 20, .5); margin-bottom: 1.3rem }
.calc-plans button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .6rem .4rem; border: 0; border-radius: 13px; background: transparent; color: #b9b2d8; font: inherit; cursor: pointer; transition: background .3s, color .3s, transform .3s }
.calc-plans button b { font-family: var(--font-h); font-weight: 700; font-size: .98rem }
.calc-plans button small { font-size: .74rem; opacity: .8 }
.calc-plans button:hover { color: #fff }
.calc-plans button.on { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(109, 77, 255, .35) }
.calc-field { margin-bottom: 1.1rem }
.calc-field label, .calc-row label { font-size: .82rem; color: #b9b2d8; font-weight: 600 }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem }
.calc-row b { font-family: var(--font-h); font-size: 1.1rem; color: #fff } .calc-row small { color: #8e88a8 }
.calc-money { display: flex; align-items: center; gap: .3rem; padding: .35rem .9rem; margin: .4rem 0 .8rem; border-radius: 16px; background: rgba(8, 5, 20, .55); border: 1px solid rgba(255, 255, 255, .12) }
.calc-money:focus-within { border-color: #8b6cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .25) }
.calc-money span { font-family: var(--font-h); font-size: 1.7rem; font-weight: 700; color: #ff9b72 }
.calc-money input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: 700 1.9rem var(--font-h); padding: .2rem 0; outline: none; letter-spacing: -.02em; -moz-appearance: textfield }
.calc-money input::-webkit-outer-spin-button, .calc-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.calc-min { min-height: 1.1em; margin-top: .4rem; font-size: .8rem; color: #ff9b72 }
.calc-card input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0 }
.calc-card input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #7c5cff, #ff5ca8) 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, .14) }
.calc-card input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14) }
.calc-card input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #7c5cff, #ff5ca8) }
.calc-card input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid #8b6cff; box-shadow: 0 4px 14px rgba(8, 5, 20, .6) }
.calc-card input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid #8b6cff }
.calc-card input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(124, 92, 255, .4) }
.calc-check { display: inline-flex; align-items: center; gap: .6rem; margin: .2rem 0 1.2rem; font-size: .9rem; color: #d3cfe6; cursor: pointer }
.calc-check input { width: 18px; height: 18px; accent-color: #ff5ca8 }
.calc-out { display: grid; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: 20px; background: rgba(8, 5, 20, .5); border: 1px solid rgba(255, 255, 255, .08) }
.calc-out small { display: block; font-size: .74rem; color: #8e88a8; letter-spacing: .04em }
.calc-out strong { display: block; font-family: var(--font-h); font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.2rem); letter-spacing: -.035em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums }
.calc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem }
.calc-stats b { display: block; font-family: var(--font-h); font-size: 1.02rem; color: #ffb08a; font-variant-numeric: tabular-nums }
#calc-chart { display: block; width: 100%; height: 190px; margin-top: 1rem; touch-action: pan-y; cursor: ew-resize }
.calc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1rem }
.calc-foot p { flex: 1 1 220px; margin: 0; font-size: .72rem; line-height: 1.5; color: #8e88a8 }
@media (max-width: 960px) { .calc-wrap { grid-template-columns: 1fr; gap: 2rem } }
@media (max-width: 520px) { .calc-card { padding: 1.1rem; border-radius: 22px } .calc-stats { grid-template-columns: 1fr 1fr } .calc-stats span:last-child { grid-column: 1 / -1 } }

/* ================= how it works: pinned picture + steps (wide screens) ================= */
@media (min-width: 900px) {
  .how-frame { position: relative; width: 100%; height: calc(100% - 26px); border-radius: 28px; overflow: hidden; background: #130f21; box-shadow: 0 30px 80px rgba(8, 5, 20, .5), 0 0 0 1px rgba(255, 255, 255, .14) }
  .how-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1) }
  .how-frame img.on { opacity: 1; transform: scale(1) }
  .how-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 11, 26, 0) 55%, rgba(15, 11, 26, .55)) }
  .how-dots { display: flex; gap: 8px; margin-top: 16px; justify-content: center }
  .how-dots i { width: 34px; height: 4px; border-radius: 4px; background: rgba(15, 11, 26, .18); transition: background .4s, width .4s }
  .how-dots i.on { background: var(--grad); width: 54px }
}
@media (max-width: 899px) { .how-stage { display: none } }
html[data-theme="dark"] .how-dots i { background: rgba(255, 255, 255, .18) }
html[data-theme="dark"] .how-dots i.on { background: var(--grad) }

/* ================= every inner page header: the same violet look as the home page ================= */
.page-hero { background-image: none !important; background-color: #0f0b1a; overflow: hidden }
.page-hero::before { background: radial-gradient(55% 90% at 90% 0%, rgba(124, 92, 255, .34), rgba(124, 92, 255, 0) 65%), radial-gradient(45% 80% at 0% 100%, rgba(255, 92, 168, .16), rgba(255, 92, 168, 0) 70%), #0f0b1a }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 420%22 fill=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%236d4dff%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23c93fa8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ff8a5b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke=%22url(%23g)%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 330C180 330 230 120 420 150S690 330 1000 90%22 stroke-width=%222%22 opacity=%22.9%22/%3E%3Cpath d=%22M0 360C200 360 260 170 450 190S720 350 1000 140%22 stroke-width=%221.5%22 opacity=%22.6%22/%3E%3Cpath d=%22M0 300C160 300 210 80 400 110S660 300 1000 40%22 stroke-width=%221.2%22 opacity=%22.45%22/%3E%3Cpath d=%22M0 390C220 390 290 220 480 235S750 380 1000 190%22 stroke-width=%221%22 opacity=%22.35%22/%3E%3Cpath d=%22M0 270C140 270 190 40 380 70S630 270 1000 -10%22 stroke-width=%221%22 opacity=%22.28%22/%3E%3C/g%3E%3C/svg%3E") right center / auto 130% no-repeat }
@media (max-width: 700px) { .page-hero::after { opacity: .4; background-position: 70% center } }

/* ================= night map of the USA (Discover): sharp lights, no glow, no fading ================= */
.dir-map-wrap { margin: 1.2rem 0 1.6rem }
.dir-map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem }
.dir-map-head b { display: block; font-family: var(--font-h); font-size: 1.15rem }
.dir-map-head small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px }
.us-map { position: relative; border-radius: 22px; background: #08060f; border: 1px solid rgba(124, 92, 255, .25); padding: .6rem; overflow: hidden }
.us-map svg { display: block; width: 100%; height: auto }
.us-pin { cursor: pointer; outline: none }
.us-pin .us-hit { fill: transparent }
.us-pin .us-dot { fill: #ff8a5b; stroke: #08060f; stroke-width: 1.5 }
.us-pin:hover .us-dot, .us-pin:focus-visible .us-dot { fill: #fff }
.us-pin.on .us-dot { fill: #fff; stroke: #ff5ca8; stroke-width: 3 }
.us-pin.off .us-dot { fill: #6a5f9a }
.us-tip { position: absolute; z-index: 5; width: 220px; padding: .7rem .85rem; border-radius: 12px; background: #17122a; border: 1px solid rgba(255, 255, 255, .22); color: #f4f1ff; pointer-events: none }
.us-tip[hidden] { display: none }
.us-tip b { display: block; font-family: var(--font-h); font-size: .98rem }
.us-tip span { display: block; color: #ffb08a; font-size: .8rem; margin: 1px 0 4px }
.us-tip small { display: block; color: #b9b2d8; font-size: .76rem; line-height: 1.4 }

/* ================= plan cards: 3D tilt with a glare ================= */
.plan { transform-style: preserve-3d }
.plan.tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); transition: transform .12s ease-out; position: relative; z-index: 2 }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%); transition: opacity .25s }
.plan.tilting::after { opacity: 1 }

/* ================= aurora: slow drifting light behind the dark hero blocks ================= */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none }
.aurora i { position: absolute; display: block; width: 62vmax; height: 62vmax; border-radius: 50%; background: radial-gradient(circle, var(--a) 0, rgba(0, 0, 0, 0) 64%); animation: aurDrift 46s ease-in-out infinite alternate }
.aurora i:nth-child(1) { --a: rgba(124, 92, 255, .42); left: -16vmax; top: -30vmax }
.aurora i:nth-child(2) { --a: rgba(255, 92, 168, .26); right: -22vmax; top: -6vmax; animation-duration: 58s; animation-delay: -14s }
.aurora i:nth-child(3) { --a: rgba(255, 138, 91, .18); left: 22%; bottom: -42vmax; animation-duration: 67s; animation-delay: -28s }
.aurora::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
@keyframes aurDrift { 0% { transform: translate3d(0, 0, 0) scale(1) } 100% { transform: translate3d(9vmax, 7vmax, 0) scale(1.18) } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none !important } }

/* ================= dashboard milestones: small, one line ================= */
.ms { margin: .9rem 0 1.1rem; padding: .7rem .9rem; border-radius: 16px; background: var(--bg); border: 1px solid var(--line) }
.ms-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem }
.ms-head b { font: 700 .92rem var(--font-h) } .ms-head small { color: var(--muted); font-size: .78rem }
.ms-bar { flex: 1; max-width: 220px; height: 4px; border-radius: 4px; background: rgba(124, 92, 255, .15); overflow: hidden; margin-left: auto }
.ms-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad) }
.ms-grid { display: flex; flex-wrap: nowrap; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
.ms-grid::-webkit-scrollbar { display: none }
.ms-b { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .75rem .28rem .3rem; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); cursor: default }
.ms-b b { font: 600 .78rem var(--font-h); color: inherit; white-space: nowrap }
.ms-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(124, 92, 255, .1); color: inherit; flex: none }
.ms-ic svg { width: 14px; height: 14px }
.ms-b.on { border-style: solid; border-color: rgba(124, 92, 255, .4); background: linear-gradient(160deg, rgba(124, 92, 255, .1), rgba(255, 92, 168, .06)); color: var(--ink) }
.ms-b.on .ms-ic { background: var(--grad); color: #fff }
.ms-b.new { animation: msPop .9s cubic-bezier(.2, 1.4, .3, 1) 2 }
@keyframes msPop { 0% { transform: scale(.85) } 50% { transform: scale(1.08) } 100% { transform: scale(1) } }

/* ================= Daily page ================= */
.dl-chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem }
.dl-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .88rem }
.dl-chip svg { width: 20px; height: 20px; fill: none; stroke: #ff8a5b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.dl-chip b { font-family: var(--font-h); font-size: 1.05rem } .dl-chip span { color: var(--muted) }
.dl-chip.link:hover { border-color: #8b6cff }
.dl-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.4rem; align-items: stretch }
.dl-card { padding: 1.7rem; border-radius: 26px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem }
.dl-card h2 { font-size: 1.35rem; margin: .2rem 0 .2rem }
.dl-sub { color: var(--muted); margin: 0 0 .8rem; max-width: 34em }
.dl-note { color: var(--muted); font-size: .84rem; margin: .5rem 0 0 }
.dl-link { margin-top: auto; padding-top: 1rem; font-weight: 600; text-decoration: none; color: #6d4dff }
.dl-timer { font: 700 2rem var(--font-h); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink) }
.dl-packcard { background: linear-gradient(160deg, rgba(109, 77, 255, .12), rgba(255, 92, 168, .08)); border-color: rgba(124, 92, 255, .35) }
.dl-pack { position: relative; align-self: center; width: 150px; height: 210px; margin: .4rem 0 1rem; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem; padding: 1rem .6rem; background: linear-gradient(180deg, rgba(10, 6, 24, .05) 35%, rgba(10, 6, 24, .88)), linear-gradient(150deg, rgba(109, 77, 255, .3), rgba(255, 138, 91, .15)), none center / cover; overflow: hidden; color: #fff; box-shadow: 0 24px 50px rgba(109, 77, 255, .35); filter: saturate(.55) brightness(.8) }
.dl-pack.ready { filter: none }
.dl-pack b { font: 700 .72rem var(--font-h); letter-spacing: .16em; text-align: center }
.dl-pack-logo { position: absolute; top: 14px; left: 50%; width: 40px; transform: translateX(-50%) } .dl-pack-logo svg { width: 100%; display: block }
.dl-pack-ring { position: absolute; inset: 10px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .45); pointer-events: none }
.dl-pack.ready { animation: dlBob 3.4s ease-in-out infinite }
@keyframes dlBob { 0%, 100% { translate: 0 0; rotate: -1.5deg } 50% { translate: 0 -8px; rotate: 1.5deg } }
.dl-pack.shake { animation: dlShake .65s ease-in-out }
@keyframes dlShake { 0%, 100% { translate: 0 0; rotate: 0 } 15% { translate: -7px 0; rotate: -6deg } 30% { translate: 7px 0; rotate: 6deg } 45% { translate: -6px 0; rotate: -5deg } 60% { translate: 6px 0; rotate: 5deg } 80% { translate: 0 0; rotate: 0; scale: 1.12 } }
.dl-tag { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: rgba(124, 92, 255, .14); color: #6d4dff; font: 700 .72rem var(--font-h); letter-spacing: .08em; text-transform: uppercase }
.dl-opts { display: grid; gap: .6rem; width: 100%; margin: .9rem 0 .4rem }
.dl-opt { text-align: left; padding: .85rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .98rem var(--font); cursor: pointer; transition: border-color .2s, background .2s, transform .2s }
.dl-opt:hover:not(:disabled) { border-color: #8b6cff; transform: translateX(3px) }
.dl-opt:disabled { cursor: default }
.dl-opt.right { border-color: #1e8e5a; background: rgba(30, 142, 90, .12) }
.dl-opt.wrong { border-color: #c0392b; background: rgba(192, 57, 43, .1) }
.dl-fb { width: 100%; margin-top: .4rem }
.dl-fb > b { font-family: var(--font-h); font-size: 1.1rem } .dl-fb .ok { color: #1e8e5a } .dl-fb .no { color: #c0392b }
.dl-fb p { color: var(--muted); margin: .3rem 0 .7rem }
.dl-fb-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .4rem }
.dl-reward { padding: .25rem .7rem; border-radius: 999px; background: var(--grad); color: #fff; font: 700 .78rem var(--font-h) }
.dl-badge { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 .85rem var(--font-h) }
.dl-badge.new { background: var(--grad) }
.dl-sync { margin-top: 1.4rem }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr } .dl-card { padding: 1.3rem } }

/* ================= Collection album ================= */
.col-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.2rem }
.col-sum { flex: 1 1 320px }
.col-big { display: flex; align-items: baseline; gap: .6rem } .col-big b { font: 700 2.4rem var(--font-h); letter-spacing: -.03em } .col-big span { color: var(--muted) }
.col-bar { height: 8px; border-radius: 8px; background: rgba(124, 92, 255, .14); overflow: hidden; margin: .6rem 0 .8rem; max-width: 520px } .col-bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad) }
.col-rars { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .85rem; color: var(--muted) }
.col-rars span { display: inline-flex; align-items: center; gap: .4rem } .col-rars i { width: 10px; height: 10px; border-radius: 50%; background: var(--c) } .col-rars b { color: var(--ink) }
.col-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem }
.col-f { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .85rem var(--font-h); cursor: pointer }
.col-f.on { background: var(--grad); color: #fff; border-color: transparent }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem }
.col-tile { position: relative; display: flex; flex-direction: column; text-align: left; padding: .5rem .5rem .8rem; border-radius: 18px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: default }
.col-tile.own { cursor: pointer; border-color: var(--c); transition: transform .25s }
.col-tile.own:hover { transform: translateY(-5px) }
.col-ph { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 13px; overflow: hidden; background: rgba(124, 92, 255, .1); margin-bottom: .55rem }
.col-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 18% }
.col-ph i { font: 700 2.2rem var(--font-h); color: rgba(124, 92, 255, .4); font-style: normal }
.col-tile b { font-family: var(--font-h); font-size: .9rem; padding: 0 .3rem } .col-tile small { color: var(--c); padding: 0 .3rem; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase }
.col-tile:not(.own) b, .col-tile:not(.own) small { color: var(--muted) }
.col-x { position: absolute; top: 14px; right: 14px; padding: .1rem .5rem; border-radius: 999px; background: rgba(15, 11, 26, .85); color: #fff; font: 700 .75rem var(--font-h); font-style: normal }

/* ================= dashboard: goal and release radar ================= */
.gl, .rd { margin: 1.2rem 0 1.4rem; padding: 1.3rem 1.4rem; border-radius: 22px; background: var(--bg); border: 1px solid var(--line) }
.gl { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center }
.gl-main { min-width: 0 }
.gl-title b { display: block; font: 700 1.1rem var(--font-h) } .gl-title small { color: var(--muted); font-size: .85rem }
.gl-form { display: flex; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 .4rem }
.gl-form input { flex: 1 1 180px; min-width: 0; padding: .7rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 1rem var(--font) }
.gl-err { min-height: 1.1em; font-size: .82rem; color: #c0392b }
.gl-sug { display: flex; flex-wrap: wrap; gap: .5rem }
.gl-chip { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .85rem var(--font-h); cursor: pointer } .gl-chip:hover { border-color: #8b6cff }
.gl-ringwrap { position: relative; width: 120px; height: 120px }
.gl-ring { width: 120px; height: 120px; display: block }
.gl-track { fill: none; stroke: rgba(124, 92, 255, .14); stroke-width: 10 }
.gl-arc { fill: none; stroke: url(#glg); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(.2, .8, .2, 1); stroke: #8b6cff }
.gl-pct { position: absolute; inset: 0; display: grid; place-items: center } .gl-pct b { font: 700 1.5rem var(--font-h) }
.gl-eta { margin: .5rem 0 .2rem; color: var(--ink) } .gl-ok { color: #1e8e5a; font-weight: 700 }
.gl-note { display: block; color: var(--muted); font-size: .76rem }
.gl-acts { margin-top: .7rem }
.rd-head b { display: block; font: 700 1.1rem var(--font-h) } .rd-head small { color: var(--muted); font-size: .85rem } .rd-fresh { color: #ff8a5b; font-weight: 700 }
.rd-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem }
.rd-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: .9rem; align-items: center; padding: .6rem .8rem; border-radius: 14px; background: rgba(124, 92, 255, .06) }
.rd-row.live { background: rgba(255, 138, 91, .08) }
.rd-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .7rem; color: var(--muted); text-transform: uppercase; line-height: 1.1 } .rd-date b { font: 700 1.2rem var(--font-h); color: var(--ink) }
.rd-txt b { display: block; font-size: .95rem } .rd-txt small { color: var(--muted); font-size: .8rem }
.rd-new { padding: .08rem .45rem; border-radius: 999px; background: var(--grad); color: #fff; font: 700 .65rem var(--font-h); font-style: normal; vertical-align: middle }
.rd-when { color: var(--muted); font-size: .8rem; white-space: nowrap }
.rd-go { padding: .35rem .9rem; border-radius: 999px; border: 1px solid #8b6cff; color: #6d4dff; font: 700 .78rem var(--font-h); text-decoration: none; white-space: nowrap } .rd-go:hover { background: rgba(124, 92, 255, .1) }
.rd-empty { margin: .8rem 0 0; color: var(--muted) }
@media (max-width: 640px) { .gl { grid-template-columns: 1fr; justify-items: start } .rd-row { grid-template-columns: 52px 1fr; } .rd-when, .rd-go { grid-column: 2 } }
html[data-theme="dark"] .dl-link, html[data-theme="dark"] .dl-tag, html[data-theme="dark"] .rd-go { color: #b7a6ff }
.qa-dot { position: relative } .qa-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff8a5b; margin-left: .5rem; display: inline-block }


/* ================= Game zone on Discover ================= */
.game { margin: 1.4rem 0 2rem; padding: 1.5rem; border-radius: 28px; border: 1px solid rgba(124, 92, 255, .3); background: linear-gradient(165deg, rgba(109, 77, 255, .08), rgba(255, 92, 168, .05)) }
.game-head { margin-bottom: 1rem } .game-head b { display: block; font: 700 1.4rem var(--font-h); letter-spacing: -.02em } .game-head small { display: block; color: var(--muted); margin-top: 2px }
.game .dl-card { background: var(--bg) }
.col-det { margin-top: 1.4rem; border-radius: 22px; border: 1px solid var(--line); background: var(--bg) }
.col-det summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; cursor: pointer; font: 700 1.05rem var(--font-h); list-style: none }
.col-det summary::-webkit-details-marker { display: none }
.col-det summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 700 1.2rem var(--font-h); margin-left: auto; transition: transform .3s }
.col-det[open] summary::after { content: "\2212" }
.col-det summary em { font-style: normal; font-weight: 600; color: var(--muted); font-size: .88rem }
.col-det > :not(summary) { margin-left: 1.3rem; margin-right: 1.3rem }
.col-det > .col-grid { margin-bottom: 1.3rem } .col-det > .col-top { margin-top: .4rem }
@media (max-width: 600px) { .game { padding: 1rem; border-radius: 22px } .col-det > :not(summary) { margin-left: .9rem; margin-right: .9rem } }

/* ================= cross-page transitions (Chrome and Edge): the clicked artist photo flies into the artist page ================= */
@view-transition { navigation: auto }
.navbar { view-transition-name: site-nav }
::view-transition-old(root) { animation: vtOut .26s ease both }
::view-transition-new(root) { animation: vtIn .45s cubic-bezier(.2, .8, .2, 1) both }
@keyframes vtOut { to { opacity: 0; transform: scale(.985) } }
@keyframes vtIn { from { opacity: 0; transform: translateY(16px) } }
::view-transition-group(artist-photo) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 9 }
::view-transition-old(artist-photo), ::view-transition-new(artist-photo) { height: 100%; object-fit: cover; overflow: clip; border-radius: 18px }
::view-transition-old(artist-photo) { animation: none }
::view-transition-new(artist-photo) { animation: none }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important } }


/* ---------- header: the same space on the left and on the right, also for a signed-in visitor ---------- */
.navbar > .container.nav-inner, .hero-actions .container { max-width: 1380px }
@media (max-width: 1499px) { .nav-actions .nav-login.is-user { display: none } .bal-chip { padding-right: .7rem; font-size: .82rem } }
@media (max-width: 1239px) { .nav-links { gap: .8rem } .nav-links a { font-size: .8rem } }

/* ---------- pages that have no big header block: the quick buttons must not sit on the content ---------- */
body.qa-nohero main { padding-top: 54px }

/* ---------- dark theme: text that was set to the dark navy colour (coin list, order, payment page) ---------- */
html[data-theme="dark"] .coin-txt strong, html[data-theme="dark"] .coin-ico, html[data-theme="dark"] .amount-sym, html[data-theme="dark"] .pay-timer, html[data-theme="dark"] .pay-field,
html[data-theme="dark"] .steps li, html[data-theme="dark"] .steps li.done, html[data-theme="dark"] .xch-out b, html[data-theme="dark"] .bal-big, html[data-theme="dark"] .bal-pair b,
html[data-theme="dark"] .balance, html[data-theme="dark"] .press-logo, html[data-theme="dark"] .modal-close:hover, html[data-theme="dark"] .kpi .v, html[data-theme="dark"] .seg button { color: var(--ink) }
html[data-theme="dark"] .coin-txt small { color: var(--muted) }
html[data-theme="dark"] :where(a:not([class*="btn"]):hover) { color: #ff9b72 }

/* ---------- artist strip in the style of the site: a rounded glass frame in the content width, violet duotone photos ---------- */
.artist-marquee { width: auto; margin: 2.8rem 0 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 30px; background: rgba(255, 255, 255, .04); box-shadow: 0 26px 64px rgba(8, 5, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-mask-image: none; mask-image: none }
.am-card { height: 280px }
.am-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(140deg, #6d4dff 0%, #c93fa8 100%); mix-blend-mode: color; opacity: .62; transition: opacity .5s }
.am-ph::after { z-index: 2 }
.am-card:hover .am-ph::before, .am-card:focus-visible .am-ph::before { opacity: 0 }
.am-cap { z-index: 4 }
.am-card { box-shadow: inset -1px 0 0 rgba(15, 11, 26, .55) }
@media (max-width: 700px) { .artist-marquee { margin-top: 2rem; border-radius: 22px } .am-card { height: 220px } }

/* the opened card: rounded like everything else, a soft outline instead of the sharp white frame */
.am-card:hover .am-ph, .am-card:focus-visible .am-ph { border-radius: 20px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5), 0 20px 44px rgba(8, 5, 20, .65) }
.am-card:hover .am-ph::after, .am-card:focus-visible .am-ph::after { border-radius: 20px }

/* the strip spans the page with a small margin on both sides, so there is no empty space beside it on wide screens */
.artist-marquee { width: calc(100vw - 3rem); margin-left: calc(50% - 50vw + 1.5rem); margin-right: 0 }
@media (max-width: 899px) { .artist-marquee { width: auto; margin-left: 0 } }

/* ================= home calculator: half the size ================= */
.calc-sec { padding-top: 3rem; padding-bottom: 3rem }
.calc-wrap { grid-template-columns: 1fr minmax(0, 430px); gap: 2.4rem }
.calc-copy { max-width: 480px }
.calc-copy .h-section-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem) }
.calc-points { margin-top: .9rem; gap: .45rem } .calc-points li { font-size: .85rem; padding-left: 1.3rem }
.calc-card { padding: .95rem; border-radius: 20px }
.calc-card::before { border-radius: 20px }
.calc-plans { gap: 5px; padding: 4px; border-radius: 13px; margin-bottom: .8rem }
.calc-plans button { padding: .38rem .3rem; border-radius: 10px }
.calc-plans button b { font-size: .8rem } .calc-plans button small { font-size: .64rem }
.calc-field { margin-bottom: .6rem }
.calc-field label, .calc-row label { font-size: .72rem }
.calc-row { margin-bottom: .2rem } .calc-row b { font-size: .9rem } .calc-row small { font-size: .7rem }
.calc-money { padding: .12rem .7rem; margin: .25rem 0 .4rem; border-radius: 12px }
.calc-money span { font-size: 1.1rem } .calc-money input { font-size: 1.3rem; padding: .15rem 0 }
.calc-min { min-height: .9em; margin-top: .15rem; font-size: .7rem }
.calc-card input[type=range] { height: 18px }
.calc-card input[type=range]::-webkit-slider-runnable-track { height: 4px }
.calc-card input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border-width: 3px }
.calc-card input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-width: 3px }
.calc-check { margin: 0 0 .6rem; font-size: .78rem; gap: .45rem } .calc-check input { width: 15px; height: 15px }
.calc-out { gap: .4rem; padding: .6rem .75rem; border-radius: 14px }
.calc-out small { font-size: .64rem }
.calc-out strong { font-size: clamp(1.45rem, 2.2vw, 1.8rem) }
.calc-stats { gap: .4rem } .calc-stats b { font-size: .82rem }
#calc-chart { height: 96px; margin-top: .55rem }
.calc-foot { gap: .6rem 1rem; margin-top: .6rem }
.calc-foot .btn { padding: .45rem 1rem; font-size: .82rem }
.calc-foot p { font-size: .62rem; flex-basis: 150px }
@media (max-width: 960px) { .calc-wrap { grid-template-columns: 1fr } .calc-card { max-width: 460px } }

/* ================= the line of figures under the hero: soft edges, so the text does not get cut off ================= */
.ticker { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%) }

/* calculator, second pass: about half of the original size */
.calc-wrap { grid-template-columns: 1fr minmax(0, 370px); gap: 2rem }
.calc-card { padding: .75rem .8rem; border-radius: 18px }
.calc-plans { margin-bottom: .55rem } .calc-plans button { padding: .28rem .2rem } .calc-plans button b { font-size: .74rem } .calc-plans button small { font-size: .6rem }
.calc-field { margin-bottom: .4rem } .calc-field label, .calc-row label { font-size: .68rem }
.calc-row { margin-bottom: 0 } .calc-row b { font-size: .8rem } .calc-row small { font-size: .64rem }
.calc-money { padding: .05rem .6rem; margin: .15rem 0 .25rem; border-radius: 10px } .calc-money span { font-size: .95rem } .calc-money input { font-size: 1.1rem; padding: .1rem 0 }
.calc-min { min-height: .5em; margin-top: 0; font-size: .64rem }
.calc-card input[type=range] { height: 14px }
.calc-check { margin: 0 0 .4rem; font-size: .72rem } .calc-check input { width: 13px; height: 13px }
.calc-out { gap: .25rem; padding: .45rem .6rem; border-radius: 12px } .calc-out small { font-size: .58rem }
.calc-out strong { font-size: 1.45rem } .calc-stats b { font-size: .74rem }
#calc-chart { height: 74px; margin-top: .4rem }
.calc-foot { gap: .4rem .7rem; margin-top: .4rem } .calc-foot .btn { padding: .35rem .8rem; font-size: .74rem } .calc-foot p { font-size: .56rem; flex-basis: 120px; line-height: 1.35 }
.calc-sec { padding-top: 2.4rem; padding-bottom: 2.4rem }

/* calculator, third pass: between the first two sizes */
.calc-wrap { grid-template-columns: 1fr minmax(0, 480px); gap: 2.2rem }
.calc-card { padding: .95rem 1rem; border-radius: 20px }
.calc-plans { margin-bottom: .75rem } .calc-plans button { padding: .36rem .25rem } .calc-plans button b { font-size: .84rem } .calc-plans button small { font-size: .66rem }
.calc-field { margin-bottom: .55rem } .calc-field label, .calc-row label { font-size: .75rem }
.calc-row b { font-size: .92rem } .calc-row small { font-size: .72rem }
.calc-money { padding: .1rem .75rem; margin: .22rem 0 .35rem; border-radius: 12px } .calc-money span { font-size: 1.1rem } .calc-money input { font-size: 1.3rem }
.calc-min { min-height: .7em; font-size: .72rem }
.calc-card input[type=range] { height: 18px }
.calc-check { margin: 0 0 .6rem; font-size: .8rem } .calc-check input { width: 15px; height: 15px }
.calc-out { gap: .35rem; padding: .6rem .8rem; border-radius: 14px } .calc-out small { font-size: .66rem }
.calc-out strong { font-size: 1.8rem } .calc-stats b { font-size: .88rem }
#calc-chart { height: 130px; margin-top: .55rem; cursor: ew-resize }
.calc-foot { margin-top: .6rem } .calc-foot .btn { padding: .45rem 1rem; font-size: .84rem } .calc-foot p { font-size: .66rem; flex-basis: 160px }
@media (max-width: 960px) { .calc-wrap { grid-template-columns: 1fr } .calc-card { max-width: 520px } }

/* ================= dashboard: demonstration portfolio (fictional data, labelled everywhere inside it) ================= */
.mp-topnote { margin: 0 0 1rem; padding: .55rem .9rem; border-radius: 12px; border: 1px dashed rgba(255, 138, 91, .6); background: rgba(255, 138, 91, .1); font-size: .85rem }
.mp-demo { margin: 0 0 1.5rem; padding: 1.1rem; border-radius: 22px; border: 1px solid rgba(150, 140, 190, .28); background: rgba(150, 140, 190, .07) }
.mp-banner { display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem; padding: .65rem .9rem; border-radius: 14px; background: linear-gradient(90deg, #ff8a5b, #ff5ca8); color: #1a0f1f; font-weight: 600; font-size: .88rem }
.mp-banner strong { flex: none; padding: .15rem .55rem; border-radius: 999px; background: #1a0f1f; color: #fff; letter-spacing: .08em; font-size: .75rem }
.mp-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem }
.mp-head h2 { margin: .2rem 0 0; font-size: 1.4rem }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-bottom: 1.2rem }
.mp-card { position: relative; display: flex; gap: .85rem; padding: .85rem; border-radius: 18px; border: 1px solid rgba(150, 140, 190, .3); background: rgba(150, 140, 190, .08); overflow: hidden }
.mp-ribbon { position: absolute; top: 8px; right: -26px; transform: rotate(35deg); padding: .1rem 1.9rem; background: #ff8a5b; color: #1a0f1f; font-size: .62rem; font-weight: 800; letter-spacing: .1em }
.mp-cover { flex: none; width: 92px; height: 92px; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 24px rgba(10, 8, 20, .4) }
.mp-cover svg { display: block; width: 100%; height: 100% }
.mp-body { min-width: 0; flex: 1 }
.mp-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap }
.mp-top h3 { margin: 0; font-size: 1.02rem }
.mp-badge { padding: .12rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; border: 1px solid currentColor }
.mp-b-trending { color: #ff8a5b } .mp-b-released { color: #47d18c } .mp-b-presale { color: #8b9cff }
.mp-artist { margin: .15rem 0 .5rem; font-size: .78rem; opacity: .75 }
.mp-bar { height: 6px; border-radius: 99px; background: rgba(150, 140, 190, .25); overflow: hidden }
.mp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8b6cff, #ff5ca8) }
.mp-pop, .mp-earn { margin: .35rem 0 0; font-size: .78rem }
.mp-earn strong { color: #47d18c }
.mp-nums { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .55rem 0 0 }
.mp-nums div { min-width: 0 } .mp-nums dt { font-size: .62rem; opacity: .7 } .mp-nums dd { margin: 0; font-size: .84rem; font-weight: 700; white-space: nowrap }
.mp-fc { padding: 1rem; border-radius: 18px; border: 1px solid rgba(150, 140, 190, .3); background: rgba(150, 140, 190, .06) }
.mp-fc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem } .mp-fc-head h3 { margin: 0; font-size: 1.05rem }
.mp-tag { padding: .12rem .6rem; border-radius: 999px; background: #ff8a5b; color: #1a0f1f; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.mp-pick { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem }
.mp-pill { padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(150, 140, 190, .4); background: none; color: inherit; font: inherit; font-size: .8rem; cursor: pointer }
.mp-pill[aria-selected="true"] { background: linear-gradient(90deg, #6d4dff, #c93fa8); border-color: transparent; color: #fff }
.mp-chart { display: block; width: 100%; height: 190px }
.mp-fc-note { margin: .4rem 0 .3rem; font-size: .88rem }
@media (max-width: 560px) { .mp-card { flex-direction: column } .mp-cover { width: 100%; height: 120px } }
/* ================= demo plan window (opened from every "Become a Partner" button; deducts nothing) ================= */
body.di-lock { overflow: hidden }
.di-back { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; background: rgba(10, 7, 22, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.di-box { position: relative; width: 100%; max-width: 480px; margin: auto; padding: 1.6rem 1.5rem 1.4rem; border-radius: 24px; background: #17122b; color: #f4f1ff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .55) }
.di-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; opacity: .7 }
.di-note { display: flex; gap: .6rem; align-items: center; margin: 0 1.6rem 1rem 0; padding: .55rem .75rem; border-radius: 12px; background: linear-gradient(90deg, #ff8a5b, #ff5ca8); color: #1a0f1f; font-size: .76rem; font-weight: 600; line-height: 1.35 }
.di-note strong { flex: none; padding: .12rem .5rem; border-radius: 999px; background: #1a0f1f; color: #fff; font-size: .68rem; letter-spacing: .08em }
.di-eyebrow { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ff8a5b; font-weight: 700 }
.di-bal { margin: .2rem 0 .3rem; font-size: 2rem; font-weight: 800; letter-spacing: -.01em }
.di-box h2 { margin: .3rem 0 .7rem; font-size: 1.15rem; color: #fff }
.di-plans { display: grid; gap: .5rem; margin-bottom: 1rem }
.di-plan { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; text-align: left; padding: .75rem .95rem; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; cursor: pointer }
.di-plan b { font-size: .98rem } .di-plan span { grid-column: 1; font-size: .78rem; opacity: .8 } .di-plan small { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: .78rem; opacity: .75 }
.di-plan[aria-pressed="true"] { border-color: #ff8a5b; background: rgba(255, 138, 91, .14) }
.di-l { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600 }
.di-in { width: 100%; box-sizing: border-box; padding: .8rem .95rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; font-size: 1rem; margin-bottom: .8rem }
.di-err { margin-bottom: .7rem; color: #ff8c8c; font-size: .85rem }
.di-skip { margin-top: .5rem }
.mp-pos { margin: 0 0 1.2rem; padding: .85rem 1rem; border-radius: 16px; border: 1px dashed rgba(255, 138, 91, .6); background: rgba(255, 138, 91, .07) }
.mp-pos h3 { margin: 0 0 .5rem; font-size: 1rem } .mp-pos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem } .mp-pos li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem } .mp-pos li strong { min-width: 5.5rem }.di-box .di-l { color: #f4f1ff }
.di-box .di-in { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25) }
.di-box .di-in::placeholder { color: rgba(244, 241, 255, .5) }
.mp-cover img { display: block; width: 100%; height: 100%; object-fit: cover }
.mp-card .mp-earn a { color: inherit; font-weight: 700; text-decoration: underline }

/* release tiles: only the cover, the title, the artist and a blinking green LIVE lamp */
.mp-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: #47d18c }
.mp-live i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #47d18c; box-shadow: 0 0 8px 2px rgba(71, 209, 140, .75); animation: mp-blink 1.3s ease-in-out infinite !important }
@keyframes mp-blink { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .25; transform: scale(.8) } }
/* tiles: the corner ribbon is replaced by a plain "Demo" line at the bottom */
.mp-ribbon { display: none }
.mp-demo-tx { margin: .55rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff8a5b }
.di-box .di-topup { margin-top: .5rem }
/* demo plan window: button colours of the site */
.di-box .di-go { background: linear-gradient(90deg, #1fa866, #47d18c); border: 0; color: #04140b; font-weight: 700 }
.di-box .di-go.di-off { background: transparent; border: 2px solid rgba(255, 255, 255, .35); color: #f4f1ff; font-weight: 600 }
.di-box .di-topup { background: linear-gradient(90deg, #6d4dff, #8b6cff); border: 0; color: #fff; font-weight: 700 }
.di-box .di-skip { background: #ff8a5b; border: 0; color: #1a0f1f; font-weight: 700 }
.di-box .di-go:hover, .di-box .di-topup:hover, .di-box .di-skip:hover { filter: brightness(1.08) }
/* the plan window buttons keep the site colours in the dark theme too */
html .di-box .di-go, html[data-theme="dark"] .di-box .di-go { background: linear-gradient(90deg, #1fa866, #47d18c) !important; border: 0 !important; color: #04140b !important; font-weight: 700 }
html .di-box .di-go.di-off, html[data-theme="dark"] .di-box .di-go.di-off { background: transparent !important; border: 2px solid rgba(255, 255, 255, .35) !important; color: #f4f1ff !important; font-weight: 600 }
html .di-box .di-topup, html[data-theme="dark"] .di-box .di-topup { background: linear-gradient(90deg, #6d4dff, #8b6cff) !important; border: 0 !important; color: #fff !important; font-weight: 700 }
html .di-box .di-skip, html[data-theme="dark"] .di-box .di-skip { background: #ff8a5b !important; border: 0 !important; color: #1a0f1f !important; font-weight: 700 }
/* plan window buttons, final palette: site violet gradient, wine-raspberry gradient, salad-green gradient */
html .di-box .di-go, html[data-theme="dark"] .di-box .di-go, html .di-box .di-go.di-off, html[data-theme="dark"] .di-box .di-go.di-off { background: linear-gradient(135deg, #2fbf71 0%, #a8e063 100%) !important; border: 0 !important; color: #0b2412 !important; font-weight: 800; box-shadow: 0 10px 26px rgba(80, 200, 110, .28) }
html .di-box .di-topup, html[data-theme="dark"] .di-box .di-topup { background: linear-gradient(135deg, #6d4dff 0%, #c93fa8 100%) !important; border: 0 !important; color: #fff !important; font-weight: 700; box-shadow: 0 10px 28px rgba(109, 77, 255, .32) }
html .di-box .di-skip, html[data-theme="dark"] .di-box .di-skip { background: linear-gradient(135deg, #7d1235 0%, #e0245e 100%) !important; border: 0 !important; color: #fff !important; font-weight: 700; box-shadow: 0 10px 26px rgba(224, 36, 94, .28) }

/* ================= artist card: turns on open, turns over on click, rarity frames, rate and quiz panels ================= */
.ac-3d { --rx: 0deg; --ry: 0deg; --flip: 0deg; position: relative; width: min(340px, 86vw); aspect-ratio: 5 / 7.4; flex: none; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition: transform .12s ease-out; cursor: pointer }
.ac-3d.turning { transition: transform .85s cubic-bezier(.2, .8, .2, 1) !important }
.ac-3d.spin { animation: acSpin 1.1s cubic-bezier(.2, .8, .2, 1) !important }
@keyframes acSpin { 0% { transform: perspective(900px) rotateY(-360deg) scale(.82); opacity: 0 } 20% { opacity: 1 } 100% { transform: perspective(900px) rotateY(0) scale(1); opacity: 1 } }
.ac-3d .ac-card { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; transform: none !important; transition: none; animation: none !important }
.ac-back { --rc: #ff8a5b; --mx: 50%; --my: 40%; position: absolute; inset: 0; display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border-radius: 22px; overflow: hidden; color: #fff; background: linear-gradient(160deg, #1a1430, #0c0916); border: 3px solid var(--rc); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 70px rgba(0, 0, 0, .65), 0 0 46px color-mix(in srgb, var(--rc) 45%, transparent); transform: rotateY(180deg) }
.ac-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 45%) }
.ab-top { display: flex; justify-content: space-between; align-items: center }
.ab-hint { font-size: .68rem; color: #8e88a8 }
.ab-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin: .3rem 0 }
.ab-facts dt { font-size: .64rem; color: #8e88a8; text-transform: uppercase; letter-spacing: .08em } .ab-facts dd { margin: 0; font-weight: 700; font-size: .92rem }
.ac-back h4 { margin: .5rem 0 .15rem; font-size: .76rem; color: var(--rc); text-transform: uppercase; letter-spacing: .1em }
.ab-tracks { margin: 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.5 } .ab-tracks a { color: #fff; text-decoration: none } .ab-tracks a:hover { text-decoration: underline }
.ab-latest { display: flex; gap: .7rem; align-items: center; padding: .5rem; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none }
.ab-latest img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex: none } .ab-latest b { display: block; font-size: .9rem } .ab-latest small { color: #a9a3c4 }
.ab-empty { color: #8e88a8; font-size: .85rem; margin: 0 }
/* rarity frames */
.ac-card.r-legendary, .ac-back.r-legendary { border-color: #f5c542; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .65), 0 0 64px rgba(245, 197, 66, .55) }
.ac-card.r-legendary::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(115deg, transparent 28%, rgba(255, 236, 160, .55) 45%, rgba(255, 200, 80, .28) 52%, transparent 66%); background-size: 260% 100%; animation: acGold 3.4s linear infinite !important }
@keyframes acGold { from { background-position: 160% 0 } to { background-position: -160% 0 } }
.ac-card.r-epic, .ac-back.r-epic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .65), 0 0 56px rgba(167, 123, 255, .55) }
.ac-card.r-rare, .ac-back.r-rare { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 70px rgba(0, 0, 0, .65), 0 0 52px rgba(77, 178, 255, .5) }
.ac-expert { background: #f5c542; color: #1a0f1f; border-color: transparent }
/* the panel next to the card */
.ac-tabs { display: flex; gap: .4rem; margin-bottom: .7rem }
.ac-tab { flex: 1; padding: .45rem .6rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .85rem; cursor: pointer }
.ac-tab[aria-pressed="true"] { background: linear-gradient(135deg, #6d4dff, #c93fa8); border-color: transparent; font-weight: 700 }
.ac-rrow { display: grid; grid-template-columns: 54px 1fr 30px; gap: .5rem; align-items: center; margin: .35rem 0; font-size: .85rem; color: #fff }
.ac-rrow input { width: 100%; accent-color: #ff8a5b } .ac-rrow b { text-align: right }
.ac-rres { margin-top: .7rem } .ac-rres:empty { display: none }
.ac-cmp { display: grid; grid-template-columns: 54px 1fr auto; gap: .5rem; margin: .2rem 0; font-size: .8rem; color: #b8b2d0 } .ac-cmp b { color: #fff } .ac-cmp b.up { color: #4ADE80 } .ac-cmp b.down { color: #FF6B6B }
.ac-verdict { margin: .5rem 0 0; font-size: .85rem; color: #fff }
.ac-q { margin: .2rem 0 .6rem; font-size: .98rem; color: #fff; line-height: 1.3 }
.ac-opts { display: grid; gap: .4rem }
.ac-opt { text-align: left; padding: .55rem .75rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .88rem; cursor: pointer }
.ac-opt:hover:not(:disabled) { background: rgba(255, 138, 91, .25); border-color: #ff8a5b }
.ac-opt.right { background: rgba(74, 222, 128, .25); border-color: #4ADE80 } .ac-opt.wrong { background: rgba(255, 107, 107, .25); border-color: #FF6B6B }
.ac-qres { margin: .6rem 0 .3rem; font-size: .88rem } .ac-qres.win { color: #4ADE80 } .ac-qres.lose { color: #FF6B6B }
.ac-pane .btn { margin-top: .4rem }

.ac-q { text-transform: none; letter-spacing: 0 }

/* ================= On this day, hip-hop timeline,  ================= */
.otd { margin: 1.4rem 0; padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid rgba(150, 140, 190, .3); background: linear-gradient(135deg, rgba(109, 77, 255, .13), rgba(201, 63, 168, .09)) }
.otd-head b { font-size: 1.15rem } .otd-head small { display: block; margin-top: .1rem; opacity: .75 }
.otd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; margin-top: .8rem; align-items: stretch }
.otd-card { display: flex; gap: .7rem; align-items: center; padding: .55rem; border-radius: 14px; background: rgba(150, 140, 190, .1); border: 1px solid rgba(150, 140, 190, .22); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s }
.otd-card:hover { transform: translateY(-2px); border-color: #ff8a5b }
.otd-card img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none }
.otd-tx { display: flex; flex-direction: column; min-width: 0 } .otd-tx b { font-size: .92rem; line-height: 1.2 } .otd-tx small { opacity: .75 }
.otd-tx em { font-style: normal; font-size: .76rem; margin-top: .15rem; opacity: .85 } .otd-tx em.round { color: #f5c542; font-weight: 700; opacity: 1 }
.otd-note { margin: .7rem 0 0; font-size: .74rem; opacity: .65 }
.tl-eras { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem }
.tl-chip { padding: .4rem .95rem; border-radius: 999px; border: 1px solid rgba(150, 140, 190, .4); background: none; color: inherit; font: inherit; font-size: .88rem; cursor: pointer }
.tl-chip[aria-pressed="true"] { background: linear-gradient(135deg, #6d4dff, #c93fa8); border-color: transparent; color: #fff; font-weight: 700 }
.tl-list { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid rgba(150, 140, 190, .35); display: grid; gap: 1.2rem; max-width: 760px }
.tl-list .tl-item { position: relative; padding-left: 1.2rem; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--d, 0ms), transform .5s var(--d, 0ms) } .tl-list .tl-item.in { opacity: 1; transform: none }
.tl-list .tl-item::before { content: ""; position: absolute; left: -1.62rem; top: .55rem; width: 14px; height: 14px; border-radius: 50%; background: #ff8a5b; box-shadow: 0 0 0 4px rgba(255, 138, 91, .22) }
.tl-list .tl-year { display: block; font-size: 1.9rem; font-weight: 800; background: linear-gradient(135deg, #6d4dff, #ff5ca8); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1 }
.tl-card { margin-top: .3rem; padding: .85rem 1rem; border-radius: 16px; border: 1px solid rgba(150, 140, 190, .28); background: rgba(150, 140, 190, .08) }
.tl-card h3 { margin: 0 0 .3rem; font-size: 1.08rem } .tl-card p { margin: 0 0 .7rem; font-size: .93rem; line-height: 1.5; opacity: .9 }


/* ================= phones: shorter pages (smaller gaps, plans in a swipe row, lower pictures) ================= */
@media (max-width: 700px) {
  .section, .section-dark, .section-alt { padding-top: 32px; padding-bottom: 32px }
  .section-head { margin-bottom: 1rem }
  .section-head .h-section-title, .h-section-title { margin-bottom: .5rem }
  .h-subtitle, .section-head p { font-size: .95rem; margin-bottom: 0 }
  .stats-strip { padding-top: 32px }
  .card, .panel { padding: 1rem }
  .hero { padding-bottom: 32px }
  .hero-actions + * .hero, body.has-qa .hero, .page-hero { padding-bottom: 1.6rem }
  .page-hero { padding-top: calc(var(--nav-h, 64px) + var(--banner-h, 0px) + 4.6rem) }
  .photo-tall { max-height: 250px; width: 100%; object-fit: cover }
  .grid.grid-3:has(> .plan), .grid:has(> article.plan) { display: flex; overflow-x: auto; gap: .8rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: -1rem; padding: .3rem 1rem 1rem }
  .grid:has(> article.plan) > .plan { flex: 0 0 84%; scroll-snap-align: center; margin: 0 }
  .grid { gap: 1rem }
  .mt-2 { margin-top: 1rem } .mt-1 { margin-top: .6rem }
  .calc-points { display: none }
  .calc-copy { margin-bottom: .6rem }
  .footer { padding-top: 2rem } .footer-grid { gap: 1.2rem }
}

/* phones, second pass */
@media (max-width: 700px) {
  .hero h1 { font-size: 2.1rem; line-height: 1.12; margin-bottom: .7rem }
  .hero .hero-sub, .hero h2 { margin-bottom: 1rem; font-size: 1rem }
  .hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem }
  .hero-cta .btn { padding: .65rem 1.1rem; font-size: .92rem }
  .hero-stat { margin-bottom: 1.2rem }
  .section-head { margin-bottom: .8rem }
}
/* phones, third pass: artist list in two compact columns, team cards in a row, lower artist strip */
@media (max-width: 700px) {
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem }
  .dir-body { padding: .55rem .6rem .7rem }
  .dir-body b { font-size: .9rem }
  .dir-body small[data-stat], .dir-body .chips-row { display: none }
  .dir-body a.listen { font-size: .78rem }
  .dir-more { display: block; margin: 1rem auto 0 }
  .card.card-plain:has(> img):has(> .body) { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem }
  .card.card-plain:has(> img):has(> .body) > img { width: 92px; height: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 12px }
  .card.card-plain:has(> img):has(> .body) .body { padding: 0 }
  .am-card { height: 150px }
}

/* ================= home "How it works": a text block and the Earth with its orbits ================= */
#how { padding-top: 44px; padding-bottom: 48px; overflow-x: clip }
#how .section-head { margin-bottom: 1.4rem }
.how2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 2rem; align-items: stretch }
.how2-text { position: relative; overflow: hidden; min-height: 470px; padding: 1.9rem 2.1rem; border-radius: 24px; border: 1px solid rgba(150, 140, 190, .28); background: rgba(150, 140, 190, .07); font-size: 1.1rem; line-height: 1.75 }
.how2-text p { position: relative; z-index: 1; margin: 0 0 1.1rem } .how2-text p:last-child { margin-bottom: 0 }
.how2-art { width: 100%; max-width: 480px; justify-self: end; display: flex; flex-direction: column; justify-content: center }
.earth { position: relative; width: 460px; height: 460px; max-width: 100%; margin: 0 auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none }
.earth:active { cursor: grabbing }
.earth canvas { position: absolute; left: 30px; top: 30px; width: 400px; height: 400px; z-index: 1; opacity: .0; transition: opacity .9s !important }
.earth.ready canvas { opacity: 1 }
.e-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 7px rgba(120, 190, 255, .75)) }
.e-ring.back { z-index: 0 } .e-ring.front { z-index: 2 }
.e-sat { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px rgba(120, 190, 255, .9)) }
/* the words of the text gather out of sparkles: a short transition set by a timer, so the text always ends up visible */
.hw { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.6); color: #ffb347; transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1), color 1.1s !important }
.hw.on { opacity: 1; transform: none; color: inherit }
.hs { position: absolute; z-index: 0; width: 10px; height: 10px; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 18%, #ffd36b 24%, rgba(255, 138, 208, 0) 70%); border-radius: 50%; animation: howSpark 2.4s ease-in-out 3 !important; animation-delay: var(--d, 0s) !important }
@keyframes howSpark { 0%, 100% { opacity: 0; transform: scale(.2) } 45% { opacity: .95; transform: scale(1.3) } 75% { opacity: .3; transform: scale(.7) translateY(-8px) } }
@media (max-width: 860px) { .how2 { grid-template-columns: 1fr } .how2-text { min-height: 220px } .how2-art { justify-self: center } .earth { width: 380px; height: 380px } .earth canvas { left: 25px; top: 25px; width: 330px; height: 330px } }

/* the two faces swap at the middle of the turn, so a mirrored front can never show through */
.ac-3d .ac-card { visibility: visible } .ac-3d .ac-back { visibility: hidden }
.ac-3d.flipped .ac-card { visibility: hidden } .ac-3d.flipped .ac-back { visibility: visible }

.ac-3d .ac-card, .ac-3d .ac-back { transition: none !important; animation: none !important }

/* dashboard: Stop / Continue next to the balance */
.bal-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap } .tick-ctl { display: flex; gap: .5rem } .tick-ctl[hidden] { display: none } .tick-ctl .btn:disabled { opacity: .4; cursor: default }

.tick-ctl { flex-wrap: wrap } .tick-ctl .btn[hidden] { display: none } .si-msg { display: block; margin: .3rem 0 0 }

.bal-row .si-msg { flex: 1 0 100%; margin: 0 }