/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE REFINEMENT — 2026-09-08

   Background: Codex was asked to make the homepage beautiful. It wrote a
   violet/teal "premium" theme into ~/apex-refactor, wired the <link> into the
   live index.html, created an EMPTY homepage-premium.css, and was rate-limited
   before writing the bytes. The live page loaded a 0-byte stylesheet for two
   days. Its markup (hero badge, trust row, claim token list incl. DRC) HAD
   already been applied and was sitting unstyled.

   Why this file is monochrome and not Codex's violet: black-2026.css is a
   deliberate decision ("make everything black and white and extremely simple"),
   it loads last, and it is ~156 !important rules deep. Dropping a violet
   gradient theme on top would have fought that decision rather than fixed the
   page. The ugliness was never the absence of colour — it was scale, rhythm
   and unstyled components. So: keep the black, fix the layout.

   Loads AFTER black-2026.css, uses its tokens, adds no colour, no glow, no
   decorative motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────────────
   Was: clamp(...,8vw,7rem) title running edge-to-edge at 112px, ~200px of top
   padding and a 650px ring, which left a screen-height hole under the fold. */
.homepage-hero {
    position: relative;
    isolation: isolate;
    max-width: 980px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(3.5rem, 7vw, 5.5rem) 1.5rem clamp(2.5rem, 5vw, 4rem) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* The perspective grid and the big ring are decorative glow — off, per black-2026. */
.hero-grid,
.homepage-hero::after { display: none !important; }

.hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem !important;
    border: 1px solid var(--ink-4) !important;
    border-radius: 999px !important;
    background: var(--ground-2) !important;
    box-shadow: none !important;
    color: var(--ink-2) !important;
    font-size: .68rem !important;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.hero-title {
    max-width: 800px;
    margin: 1.25rem auto .9rem !important;
    font-size: clamp(2.4rem, 5.2vw, 4.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance;
    /* black-2026 strips gradient text; state the plain colour outright. */
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    color: var(--ink) !important;
}

.hero-subtitle {
    max-width: 560px !important;
    margin: 0 auto !important;
    color: var(--ink-2) !important;
    font-size: clamp(.95rem, 1.15vw, 1.05rem) !important;
    line-height: 1.65 !important;
    text-wrap: balance;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.6rem;
}
.hero-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.15rem;
    border-radius: 10px;
    font-size: .87rem;
    font-weight: 650;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}
.hero-primary-action {
    color: var(--ground) !important;
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
}
.hero-primary-action:hover { background: var(--ink-2) !important; border-color: var(--ink-2) !important; }
.hero-secondary-action {
    color: var(--ink) !important;
    border: 1px solid var(--ink-4) !important;
    background: transparent !important;
}
.hero-secondary-action:hover { border-color: var(--ink-3) !important; background: var(--ground-2) !important; }

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.6rem;
    color: var(--ink-3) !important;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.hero-trust i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* ── Shared column ──────────────────────────────────────────────────────── */
.stats-section,
.metrics-section,
.claim-section {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.stats-section  { margin-top: 0 !important; }
.metrics-section { margin-top: 2.25rem !important; }
/* Was clamp(3.5rem,8vw,6.5rem) top and bottom — the hole under the hero. */
.claim-section  { padding-top: 2.5rem !important; padding-bottom: 3rem !important; }

.stats-grid { gap: .6rem !important; }
.stat-card {
    min-height: 96px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--ink-4) !important;
    border-radius: 12px !important;
    background: var(--ground-2) !important;
    box-shadow: none !important;
    transition: border-color .18s ease;
}
.stat-card:hover { border-color: var(--ink-3) !important; }
.stat-card--featured { border-color: var(--ink-3) !important; }
.stat-value {
    color: var(--ink) !important;
    font-size: clamp(1.3rem, 1.9vw, 1.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.03em;
}
.stat-label {
    margin-top: .3rem;
    color: var(--ink-3) !important;
    font-size: .64rem !important;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.metrics-title {
    margin-bottom: .9rem !important;
    color: var(--ink-2) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.metric-card {
    border: 1px solid var(--ink-4) !important;
    border-radius: 12px !important;
    background: var(--ground-2) !important;
    box-shadow: none !important;
}
.metric-card-header { color: var(--ink-2) !important; font-weight: 650; }

/* ── Claim card ─────────────────────────────────────────────────────────── */
.claim-card.claim-card--premium {
    max-width: 640px;
    overflow: hidden;
    border: 1px solid var(--ink-4) !important;
    border-radius: 16px !important;
    background: var(--ground-2) !important;
    box-shadow: none !important;
}
.claim-card--premium::before { display: none !important; }

.claim-card-kicker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: var(--ink-3) !important;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.claim-card-kicker span {
    width: 5px; height: 5px;
    background: var(--ink-2) !important;
    border-radius: 50%;
    box-shadow: none !important;
}
.claim-card-title {
    color: var(--ink) !important;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem) !important;
    font-weight: 750 !important;
    letter-spacing: -.035em;
}
.claim-card-desc {
    max-width: 420px;
    margin: 0 auto;
    color: var(--ink-2) !important;
    line-height: 1.55;
}

/* ── Reward token list (APEX / XNT / DRC) ───────────────────────────────────
   This is the block Martin asked for: the tokens a claim can pay, stated above
   the wallet field instead of only after a claim. DRC is a real on-chain drip
   (xemojidracula, added 2026-09-01), so listing it is accurate.
   Monochrome, so the three are told apart by the mark's weight, not by hue. */
.claim-rewards-summary {
    position: relative;
    margin: 1.4rem 0;
    padding: .9rem;
    border: 1px solid var(--ink-4);
    border-radius: 12px;
    background: var(--ground);
}
.claim-rewards-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin: 0 .1rem .7rem;
    color: var(--ink) !important;
    font-size: .78rem;
    font-weight: 700;
}
.claim-rewards-heading span {
    color: var(--ink-3) !important;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.claim-token-list { display: grid; gap: .45rem; }
.claim-token {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border: 1px solid var(--ink-4);
    border-radius: 10px;
    background: var(--ground-2);
}
.claim-token-mark {
    display: grid;
    flex: 0 0 32px;
    width: 32px; height: 32px;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--ink-4);
    background: var(--ground-3) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8rem;
    font-weight: 700;
}
/* APEX is the base reward on every claim — the only one given solid emphasis. */
.claim-token--apex .claim-token-mark {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--ground) !important;
}
.claim-token--xnt .claim-token-mark { border-color: var(--ink-3) !important; }
.claim-token--drc .claim-token-mark { border-color: var(--ink-3) !important; }

.claim-token strong,
.claim-token small { display: block; }
.claim-token strong {
    color: var(--ink) !important;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .02em;
}
.claim-token small {
    margin-top: .1rem;
    color: var(--ink-3) !important;
    font-size: .69rem;
    line-height: 1.35;
}
.claim-reward-note {
    margin: .8rem .1rem .05rem;
    color: var(--ink-3) !important;
    font-size: .68rem;
    line-height: 1.45;
}

/* ── Wallet field + submit ──────────────────────────────────────────────── */
.claim-input {
    box-sizing: border-box;
    min-height: 48px;
    border: 1px solid var(--ink-4) !important;
    border-radius: 10px !important;
    background: var(--ground) !important;
    color: var(--ink) !important;
}
.claim-input:focus {
    border-color: var(--ink-2) !important;
    box-shadow: none !important;
    outline: 2px solid var(--ink-4);
    outline-offset: 1px;
}
.claim-submit {
    min-height: 50px;
    border: 1px solid var(--ink) !important;
    border-radius: 10px !important;
    background: var(--ink) !important;
    color: var(--ground) !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    box-shadow: none !important;
}
.claim-submit:hover { background: var(--ink-2) !important; border-color: var(--ink-2) !important; }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .homepage-hero { padding: 2.75rem 1.1rem 2rem !important; }
    .hero-title { font-size: clamp(2.1rem, 9.5vw, 2.9rem) !important; }
    .hero-actions { width: 100%; flex-direction: column; }
    .hero-actions a { width: min(100%, 300px); }
    .hero-trust { gap: .4rem; font-size: .58rem; }
    .stats-section, .metrics-section, .claim-section { padding-left: 1rem !important; padding-right: 1rem !important; }
    .stat-card { min-height: 86px; }
    .claim-card.claim-card--premium { padding: 1.15rem !important; }
    .claim-rewards-heading { flex-direction: column; align-items: flex-start; gap: .15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card, .hero-actions a, .claim-submit { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 2 — 2026-09-08, from Martin's mobile screenshots
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The right-edge clipping ─────────────────────────────────────────────
   Every "text runs off the right" case traced to one thing: these sections
   compute as box-sizing:content-box, so a width of 100% ADDS the horizontal
   padding on top. Measured at 390px wide: .stats-section was 402px + 16px
   padding each side = 434px of content in a 390px viewport; .claim-card was
   370 + 18.4 + 18.4. html{overflow-x:hidden} then hid the symptom by simply
   cutting the text off at the edge — which is exactly what it looked like. */
.homepage-hero, .homepage-hero *,
.stats-section, .stats-section *,
.metrics-section, .metrics-section *,
.claim-section, .claim-section *,
.p21-section, .p21-section *,
.claim-card, .claim-card * {
    box-sizing: border-box !important;
}
.homepage-hero, .stats-section, .metrics-section, .claim-section, .p21-section {
    width: 100% !important;
    max-width: min(1120px, 100%) !important;
}
.hero-title, .hero-subtitle {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}
/* The 16:9 holo stage also overhung its column. */
.holo-stage { max-width: 100% !important; box-sizing: border-box !important; }

/* ── 2. The sponsor bar sitting on top of the headline ──────────────────────
   #sp-banner is position:fixed, z-index:60, occupying y=62..152. The hero
   starts at y=32, so the banner covered the first line of "Free APEX Every 8
   Hours". Reserve that strip on small screens instead of painting over it. */
@media (max-width: 780px) {
    .homepage-hero { padding-top: 8.5rem !important; }
}

/* ── 3. The P21 mark was a black dot ────────────────────────────────────────
   black-2026 desaturates every image (img{filter:grayscale(1)}). Deliberate —
   but the P21 mark is a dark violet tile, and grayscale drops it to near-black,
   so on a black card it read as an unexplained dot rather than a logo. A brand
   mark is identity, not decoration: hand these two back their colour. */
.p21-logo,
img[src*="p21-logo"],
img[src*="apex-token-logo"] {
    filter: none !important;
}
.p21-logo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px var(--ink-4);
}

/* ── 4. The wallet claim field ──────────────────────────────────────────────
   The one thing every visitor actually touches, so it gets the most care.
   A wallet address is a machine string: give it a mono face, room to breathe,
   and an unmistakable focus state. */
.claim-form, .claim-card form { width: 100%; }

.claim-input {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 1rem !important;
    border: 1px solid var(--ink-4) !important;
    border-radius: 12px !important;
    background: var(--ground) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace) !important;
    font-size: .92rem !important;
    letter-spacing: .01em;
    text-align: center;
    transition: border-color .16s ease, background .16s ease;
}
.claim-input::placeholder {
    color: var(--ink-3) !important;
    font-family: inherit;
    letter-spacing: .02em;
    opacity: 1;
}
.claim-input:hover { border-color: var(--ink-3) !important; }
.claim-input:focus,
.claim-input:focus-visible {
    border-color: var(--ink) !important;
    background: var(--ground-2) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
}

.claim-submit {
    width: 100% !important;
    min-height: 56px !important;
    margin-top: .6rem;
    border: 1px solid var(--ink) !important;
    border-radius: 12px !important;
    background: var(--ink) !important;
    color: var(--ground) !important;
    font-size: .95rem !important;
    font-weight: 750 !important;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.claim-submit:hover:not(:disabled) { background: var(--ink-2) !important; border-color: var(--ink-2) !important; }
.claim-submit:active:not(:disabled) { background: var(--ink-3) !important; }
.claim-submit:disabled { background: var(--ink-4) !important; border-color: var(--ink-4) !important; color: var(--ink-3) !important; cursor: not-allowed; }
.claim-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 5. Arrow spacing on the hero CTA ("Claim rewards→") ────────────────── */
.hero-primary-action span, .hero-actions a span { margin-left: .55rem; }

/* ── 6. Kill the leftover decorative glow inside the claim area ────────────
   design-2026.css paints a violet/gold gradient ring on the claim card via the
   two-gradient border trick, which survives border-color overrides. */
.claim-card.claim-holo,
.claim-card.claim-holo.claim-card--premium {
    background: var(--ground-2) !important;
    background-image: none !important;
    border: 1px solid var(--ink-4) !important;
    box-shadow: none !important;
}

/* ── 7. Remaining right-edge clipping, page-wide ────────────────────────────
   Round 2 fixed the named sections, but the content blocks further down
   ("Built for agents" and friends) are unclassed <section>/<div> wrappers that
   are still content-box with 20px padding: width:100% resolved to 370 + 40 =
   410 inside a 370px column, so every one of them ran ~30px past the screen.
   Layout containers have no business being content-box; canvases and media are
   left alone so game surfaces and aspect-ratio boxes keep their sizing. */
section, article,
section > div, article > div,
section > p, section > h1, section > h2, section > h3, section > ul {
    box-sizing: border-box !important;
}

/* ── 8. Hero buttons were top-aligning their label ──────────────────────────
   .hero-actions a computed to display:block, so align-items/justify-content
   were inert and the text sat against the top edge of a 44px box instead of
   centred in it. Force the flex box the centring assumes. */
.hero-actions a,
.hero-primary-action,
.hero-secondary-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: .85rem 1.15rem !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* ── 9. Tighten the gap under the hero ─────────────────────────────────────
   ~75px of empty black between the trust row and the first content card. */
.homepage-hero { padding-bottom: 1.5rem !important; }

/* ── 10. Last overflow: the EXPLORE block ──────────────────────────────────
   A direct child of <main> carrying inline max-width:1100px + padding:0 20px
   while still content-box, so it measured 410px in a 370px column. */
main#main-content > div,
main > div, main > section {
    box-sizing: border-box !important;
}

/* ── 11. Claim card width on large screens ─────────────────────────────────
   Measured 1072px wide from iPad Pro upward: the card was filling the whole
   1120px content column, so the wallet input — a single short string — was
   stretched across the full width of a desktop monitor. A form this small
   should sit in a readable column and stay centred. */
.claim-card.claim-card--premium,
.claim-card.claim-holo.claim-card--premium {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* The P21 card sits directly under it — keep the two the same width so the
   claim area reads as one column instead of two mismatched slabs. */
.p21-card { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }

/* ── 12. "CLAIM // X1 MAINNET" tag vs the reset countdown ───────────────────
   index.html already hid this tag below 560px, with the right reasoning in its
   own comment: "The tag is decoration; the countdown is information." That
   collision was width-dependent — and capping the claim card at 640px (fix 11)
   makes the card that narrow on EVERY screen, so the same overlap now happens
   on desktop too. Same call, applied at all widths. */
.claim-holo .claim-tag,
.claim-card .claim-tag { display: none !important; }

/* Keep the pot summary's countdown readable now that it owns that corner. */
.claim-card .pot-summary, .claim-card #tp-reset { position: relative; z-index: 1; }

/* ── 13. Wallet field text was clipping on phones ──────────────────────────
   Mono at .92rem overran a 331px field — the placeholder visibly cut off at
   "…wallet addres", and a real X1 address is ~44 base58 characters, which is
   longer still. Scale the face with the viewport so the whole address stays
   inside the box on a phone without shrinking it on desktop. */
.claim-input { text-overflow: ellipsis; }
/* NOT shrunk below 16px: iOS Safari auto-zooms the whole page when a focused
   input is under 16px, which is a far worse bug than a scrolling field. A
   44-character base58 address cannot fit a ~250px field at any legible size,
   and scrolling-while-typing is the normal behaviour everywhere — so the fix
   is the placeholder ("Enter your X1 wallet address..." -> "X1 wallet
   address"), not the type size. */
@media (max-width: 560px) {
    .claim-input { font-size: 16px !important; padding: 0 .7rem !important; letter-spacing: 0 !important; }
}

/* ── 14. Claim receipt ──────────────────────────────────────────────────────
   The success state was a random animal emoji (🦁/🐸/🦊) over a jokey line.
   It is a receipt now: one steady mark, a plain statement, then the numbers.
   The reward badges below it already carry the real amounts and the explorer
   link, which is the part a claimer can actually verify. */
#result-animal {
    display: block;
    margin: 0 auto .55rem;
    font-size: 1.9rem !important;
    line-height: 1;
    color: var(--ink) !important;
}
#result-message {
    color: var(--ink) !important;
    font-size: 1.02rem !important;
    font-weight: 650 !important;
    letter-spacing: -.01em;
    line-height: 1.45;
}
.claim-receipt-sub {
    display: block;
    margin-top: .3rem;
    color: var(--ink-3) !important;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
}
#result-rewards { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
#result-rewards .reward-badge {
    display: inline-flex; align-items: center;
    padding: .34rem .6rem;
    border: 1px solid var(--ink-4) !important;
    border-radius: 8px;
    background: var(--ground) !important;
    color: var(--ink-2) !important;
    font-size: .74rem; font-weight: 600;
    text-decoration: none;
}
/* The APEX badge is the thing they actually came for. */
#result-rewards .reward-badge.apex {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: var(--ground) !important;
}
#result-rewards a.reward-badge:hover { border-color: var(--ink-2) !important; color: var(--ink) !important; }

/* CAPY mark, matching the other three. */
.claim-token--capy .claim-token-mark { border-color: var(--ink-3) !important; }

/* ── 15. The P21 pictogram ─────────────────────────────────────────────────
   p21-announcement.html is injected into #p21-announce-wrapper and brings its
   own styles, written for the old colourful theme. Under black-2026 it broke
   three ways at once:
     • .p21-announce-close (absolute, top/right 12px) landed ON the P21 logo,
       so the mark read as "a weird symbol" sitting where the token should be;
     • the 3D dice face was clipped by its container, cutting the die off;
     • the token glow layer covered the logo it was supposed to sit behind.
   Injected <style> lands after this file in document order, so these need
   !important to win. */

/* Give the close button its own corner and push the artwork clear of it. */
.p21-announce-close {
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--ink-4) !important;
    border-radius: 50% !important;
    background: var(--ground-2) !important;
    color: var(--ink-2) !important;
    font-size: 17px !important;
    z-index: 30 !important;
}
.p21-announce-close:hover { background: var(--ground-3) !important; color: var(--ink) !important; transform: none !important; }

.p21-visual-group {
    margin-top: 2.6rem !important;   /* clears the close button */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
}

/* Flatten the 3D die so nothing clips it. */
.p21-dice-container, .p21-dice-3d, .dice-face {
    transform: none !important;
    perspective: none !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    animation: none !important;
}
.dice-face span { font-size: 2.1rem !important; line-height: 1 !important; }

.p21-arrow-bounce {
    color: var(--ink-3) !important;
    font-size: 1.3rem !important;
    animation: none !important;
}

/* The token mark: visible, sized, and never underneath its own glow. */
.p21-token-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important; height: 52px !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
}
.p21-token-glow { display: none !important; }
.p21-token-img {
    position: relative !important;
    z-index: 2 !important;
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px var(--ink-4) !important;
}

/* ── 16. Stray leftovers in the P21 pictogram ──────────────────────────────
   Flattening the 3D die (fix 15) left two orphans visible: the die's empty
   container header rendered as a blank rounded box in the top-left of the
   panel, and a second die + down-arrow sat below the bonus row with nothing
   to point at. Both are remnants of the old animated layout. */
.p21-dice-container::before, .p21-dice-container::after,
.p21-dice-3d::before, .p21-dice-3d::after,
.dice-face::before, .dice-face::after { display: none !important; content: none !important; }
.p21-announce .dice-face:not(:first-child) { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS — homepage design system, dark mode. 2026-09-13.

   Brief: "one cohesive, premium product ... futuristic but clean, transparent
   and layered, elegant rather than flashy, dark cinematic atmosphere ...
   premium means restraint."

   Everything below is SCOPED TO DARK MODE (html:not([data-theme="light"])).
   The light theme is a separate ivory/gold system finished earlier today and
   must not be touched by this.

   Nothing here changes markup or behaviour. No element is hidden, no link
   moved, no script touched: the claim flow, wallet connect and the live
   counters (#al-spots / #al-buildings / #al-plots) are the same nodes, only
   dressed differently.

   THREE GLASS TIERS, because the old page gave every card the same box and so
   said everything was equally important:
     tier 1  the claim action        — most presence, warmest, real depth
     tier 2  city + product cards    — quieter glass, reads as a set
     tier 3  the live counters       — barely there, part of the surface
   ═══════════════════════════════════════════════════════════════════════════ */

html:not([data-theme="light"]) {
  /* glass tiers */
  --gl-1-bg:     rgba(255,255,255,.055);
  --gl-2-bg:     rgba(255,255,255,.032);
  --gl-3-bg:     rgba(255,255,255,.018);
  --gl-1-line:   rgba(255,255,255,.115);
  --gl-2-line:   rgba(255,255,255,.075);
  --gl-3-line:   rgba(255,255,255,.05);
  --gl-hi:       rgba(255,255,255,.10);   /* the 1px top highlight on glass */
  /* atmosphere */
  --atm-indigo:  rgba(74,86,190,.16);
  --atm-violet:  rgba(126,86,196,.12);
  --atm-cyan:    rgba(60,150,190,.09);
  /* value + action */
  --gold:        #E8C25A;
  --gold-deep:   #C99B2E;
  --gold-ink:    #1B1405;
  --ink-hi:      #F3F5FA;
  --ink-mid:     rgba(225,232,245,.72);
  --ink-low:     rgba(190,200,220,.46);
}

/* ── ATMOSPHERE ────────────────────────────────────────────────────────────
   Not a flat colour: a midnight base with two very soft light sources, fixed
   to the viewport so scrolling costs nothing to repaint. Opacities are low on
   purpose — this should read as depth, never as a coloured page. */
html:not([data-theme="light"]) body[data-page="landing"] {
  background-color: #06070D !important;
}
html:not([data-theme="light"]) body[data-page="landing"]::before {
  content: "";
  position: fixed; inset: -20vh -10vw;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(58vw 42vh at 18% 8%,  var(--atm-indigo), transparent 62%),
    radial-gradient(52vw 40vh at 88% 34%, var(--atm-violet), transparent 60%),
    radial-gradient(64vw 46vh at 50% 104%, var(--atm-cyan),  transparent 58%);
  filter: blur(12px);
  animation: gl-drift 34s ease-in-out infinite alternate;
}
/* a faint grain so the large flat areas do not band on OLED phones */
html:not([data-theme="light"]) body[data-page="landing"]::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes gl-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) body[data-page="landing"]::before { animation: none; }
}

/* ── THE LAUNCHER ──────────────────────────────────────────────────────────
   Was a hard-edged block with its own cyan/mint gradient. Now it sits on the
   page atmosphere and carries the composition's rhythm. */
html:not([data-theme="light"]) #apex-launcher {
  background: none !important;
  /* padding-top is NOT set here on purpose. The sponsor bar is position:fixed
     and its height depends on how long the current ad text is, so a script
     measures it and writes an inline padding-top. An !important shorthand here
     overrode that measurement and the headline disappeared underneath the bar. */
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 18px !important;
}
html:not([data-theme="light"]) #apex-launcher .al-inner {
  display: flex; flex-direction: column; gap: 14px;
}

/* headline: one strong line, not a wall of bold.
   The old .al-tag was 600-weight body copy doing a headline's job. */
html:not([data-theme="light"]) #apex-launcher .al-tag {
  margin: 0 0 2px !important;
  font: 600 clamp(19px, 5.6vw, 30px)/1.18 'Inter', system-ui, sans-serif !important;
  letter-spacing: -.022em !important;
  color: var(--ink-hi) !important;
  -webkit-text-fill-color: var(--ink-hi) !important;
  text-wrap: balance;
}

/* ── TIER 1 · the claim action ─────────────────────────────────────────────
   The one thing the page is for. It keeps the gold — gold is reserved on this
   page for value and the primary action, nothing else — but gets real depth
   instead of a flat swatch: a warm gradient, an inner top highlight, and a
   shadow that is a lit surface rather than a drop shadow. */
html:not([data-theme="light"]) #apex-launcher .al-main {
  grid-template-columns: 1.25fr 1fr !important;
  gap: 10px !important;
}
html:not([data-theme="light"]) #apex-launcher .al-btn {
  min-height: 76px !important;
  padding: 13px 15px !important;
  border-radius: 18px !important;
  gap: 4px !important;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}
html:not([data-theme="light"]) #apex-launcher .al-claim {
  background-color: #E8C25A !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, #F2D179 0%, #E0B44C 52%, #C99B2E 100%) !important;
  border: 1px solid rgba(255,232,166,.5) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.42) inset,
    0 10px 26px -8px rgba(201,155,46,.5),
    0 2px 8px rgba(0,0,0,.4) !important;
}
html:not([data-theme="light"]) #apex-launcher .al-claim b {
  color: var(--gold-ink) !important; -webkit-text-fill-color: var(--gold-ink) !important;
  font-weight: 800 !important; letter-spacing: -.012em !important;
}
html:not([data-theme="light"]) #apex-launcher .al-claim small {
  color: rgba(50,37,7,.78) !important; -webkit-text-fill-color: rgba(50,37,7,.78) !important;
  opacity: 1 !important; font-weight: 500 !important;
}

/* ── TIER 2 · the city, and every product card ─────────────────────────────
   Glass, not colour. The old mint/cyan tint made "Enter the city" shout as
   loudly as the claim button; as a glass panel it reads clearly as the second
   choice while staying obviously tappable. */
html:not([data-theme="light"]) #apex-launcher .al-city {
  background-color: rgba(255,255,255,.032) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%) !important;
  border: 1px solid var(--gl-1-line) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 var(--gl-hi) inset, 0 8px 24px -12px rgba(0,0,0,.8) !important;
}
html:not([data-theme="light"]) #apex-launcher .al-city b {
  color: var(--ink-hi) !important; -webkit-text-fill-color: var(--ink-hi) !important;
  font-weight: 700 !important; letter-spacing: -.012em !important;
}
html:not([data-theme="light"]) #apex-launcher .al-city small {
  color: var(--ink-low) !important; -webkit-text-fill-color: var(--ink-low) !important;
  opacity: 1 !important; font-weight: 450 !important;
}
@media (hover: hover) {
  html:not([data-theme="light"]) #apex-launcher .al-btn:hover {
    transform: translateY(-2px); filter: none !important;
  }
  html:not([data-theme="light"]) #apex-launcher .al-claim:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
                0 14px 32px -8px rgba(201,155,46,.62),
                0 2px 10px rgba(0,0,0,.45) !important;
  }
  html:not([data-theme="light"]) #apex-launcher .al-city:hover {
    border-color: rgba(255,255,255,.2) !important;
    background-color: rgba(255,255,255,.05) !important;
  }
}
html:not([data-theme="light"]) #apex-launcher .al-btn:active { transform: translateY(0) scale(.985); }

/* ── TIER 3 · the live counters ────────────────────────────────────────────
   Three separate bordered boxes read as a generic dashboard. One glass strip
   divided by hairlines reads as part of the page — and the numbers, which are
   real on-chain figures, are what carries the gold. */
html:not([data-theme="light"]) #apex-launcher .al-figs {
  margin: 0 !important;
  gap: 0 !important;
  background: var(--gl-3-bg) !important;
  border: 1px solid var(--gl-3-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
html:not([data-theme="light"]) #apex-launcher .al-fig {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 11px 6px !important;
  position: relative;
  transition: background .18s ease;
}
html:not([data-theme="light"]) #apex-launcher .al-fig + .al-fig::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--gl-2-line);
}
html:not([data-theme="light"]) #apex-launcher .al-fig:active { background: rgba(255,255,255,.045) !important; }
html:not([data-theme="light"]) #apex-launcher .al-fig b {
  color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important;
  font: 700 clamp(17px,4.8vw,22px)/1.05 'Inter', sans-serif !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums;
}
html:not([data-theme="light"]) #apex-launcher .al-fig span {
  color: var(--ink-low) !important; -webkit-text-fill-color: var(--ink-low) !important;
  font-size: 9px !important; letter-spacing: .09em !important; margin-top: 4px !important;
}

/* ── the product grid ──────────────────────────────────────────────────────
   Six products that should read as one ecosystem. Same glass, consistent
   rhythm, and the icon gets its own small recessed chip so the eye lands on
   the name rather than the emoji. */
html:not([data-theme="light"]) #apex-launcher .al-grid { gap: 9px !important; }
html:not([data-theme="light"]) #apex-launcher .al-card {
  padding: 11px 11px 12px !important;
  border-radius: 15px !important;
  background-color: rgba(255,255,255,.028) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 58%) !important;
  border: 1px solid var(--gl-2-line) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.055) inset;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) {
  html:not([data-theme="light"]) #apex-launcher .al-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232,194,90,.34) !important;
    background-color: rgba(255,255,255,.045) !important;
  }
}
html:not([data-theme="light"]) #apex-launcher .al-card:active { transform: translateY(0) scale(.98); }
html:not([data-theme="light"]) #apex-launcher .al-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 9px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px !important;
}
html:not([data-theme="light"]) #apex-launcher .al-t {
  margin-top: 8px !important;
  font: 650 13px/1.2 'Inter', sans-serif !important;
  letter-spacing: -.01em !important;
  color: var(--ink-hi) !important; -webkit-text-fill-color: var(--ink-hi) !important;
}
html:not([data-theme="light"]) #apex-launcher .al-d {
  margin-top: 2px !important;
  font-size: 10.5px !important; font-weight: 450 !important;
  color: var(--ink-low) !important; -webkit-text-fill-color: var(--ink-low) !important;
}

/* ── "everything else" ─────────────────────────────────────────────────────
   A quiet doorway, not a button competing with the two CTAs. */
html:not([data-theme="light"]) #apex-launcher #al-more {
  margin-top: 2px !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  background: var(--gl-3-bg) !important;
  border: 1px solid var(--gl-3-line) !important;
  color: var(--ink-mid) !important; -webkit-text-fill-color: var(--ink-mid) !important;
  font-weight: 550 !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
html:not([data-theme="light"]) #apex-launcher #al-more:hover {
  color: var(--ink-hi) !important; border-color: rgba(255,255,255,.16) !important;
}

/* ── THE AD SLOT ───────────────────────────────────────────────────────────
   It was a full-width tinted banner with a bright gradient, sitting above the
   product and reading louder than the claim button. It stays, it stays
   clickable, it keeps its text and its chip — but as a slim piece of the
   platform's own furniture: one hairline rule, quiet glass, small caps label.
   The revenue does not need to shout to be counted. */
html:not([data-theme="light"]) #sp-banner {
  background: rgba(255,255,255,.026) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gl-3-line) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: none !important;
  padding: 7px 14px !important;
  min-height: 0 !important;
  font-size: 12px !important;
  color: var(--ink-mid) !important;
}
html:not([data-theme="light"]) #sp-banner .sp-tag {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--ink-low) !important; -webkit-text-fill-color: var(--ink-low) !important;
  font-size: 8.5px !important; letter-spacing: .11em !important;
  padding: 3px 7px !important; border-radius: 6px !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) #sp-banner-text {
  color: var(--ink-mid) !important; -webkit-text-fill-color: var(--ink-mid) !important;
  font-weight: 450 !important;
}

/* ── HEADER ────────────────────────────────────────────────────────────────
   Compact, and the four controls read as one cluster instead of four floating
   slabs. Same buttons, same handlers — only lighter. */
html:not([data-theme="light"]) .apex-modern-nav {
  background: rgba(8,9,16,.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--gl-3-line) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) .apex-nav-wallet,
html:not([data-theme="light"]) .apex-nav-wallet-mobile {
  background-color: rgba(232,194,90,.1) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0)) !important;
  border: 1px solid rgba(232,194,90,.34) !important;
  color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset !important;
  font-weight: 600 !important;
}
html:not([data-theme="light"]) .apex-mobile-toggle,
html:not([data-theme="light"]) .apex-mobile-theme-btn,
html:not([data-theme="light"]) .apex-nav-search-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--gl-2-line) !important;
  box-shadow: none !important;
  color: var(--ink-mid) !important;
}

/* ── rhythm ────────────────────────────────────────────────────────────────
   The launcher ended and left a screen of nothing before the next section.
   Close the gap rather than pad it. */
html:not([data-theme="light"]) body[data-page="landing"] #apex-launcher + * { margin-top: 0 !important; }

/* Small phones: the sublines go before the layout does. */
@media (max-width: 360px) {
  html:not([data-theme="light"]) #apex-launcher .al-grid { gap: 7px !important; }
  html:not([data-theme="light"]) #apex-launcher .al-card { padding: 9px !important; }
}

/* ── the dead zone under the launcher ──────────────────────────────────────
   The launcher is a flex row with justify-content:center inside a block that
   the old hero sized, which left roughly a third of a screen of nothing
   between "Everything else" and the next section. The launcher should be
   exactly as tall as its content. */
html:not([data-theme="light"]) body[data-page="landing"] #apex-launcher {
  align-items: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
}
html:not([data-theme="light"]) body[data-page="landing"] #apex-launcher .al-inner {
  margin-bottom: 0 !important;
}

/* "Enter the city" broke across two lines while the gold button beside it sat
   on one, so the pair looked misaligned. Balance the columns and let the label
   size itself to fit. */
html:not([data-theme="light"]) #apex-launcher .al-main {
  grid-template-columns: 1.12fr 1fr !important;
  align-items: stretch !important;
}
html:not([data-theme="light"]) #apex-launcher .al-btn b {
  font-size: clamp(13.5px, 3.9vw, 16px) !important;
  text-wrap: balance;
}
html:not([data-theme="light"]) #apex-launcher .al-btn small { text-wrap: balance; }

/* The product cards inherit the global link colour, which showed as cyan on
   the card behind the labels. */
html:not([data-theme="light"]) #apex-launcher .al-card { color: var(--ink-mid) !important; }

/* ── closing the gap below the launcher ────────────────────────────────────
   Measured at 390x844: the launcher ends at y=669 and <main> begins at 669 —
   there is no gap in the DOM. The empty third of a screen is the long-form
   hero's own top padding (clamp(3.5rem,7vw,5.5rem)) plus main's 20px, opening
   with ~100px of nothing directly under "Everything else".
   That padding was written for a page whose hero was the first thing seen. It
   is not any more: the launcher introduces the product, and the hero is what
   you arrive at after choosing to go further. So on a phone it starts close,
   and keeps its air on wider screens where there is room for it. */
@media (max-width: 760px) {
  html:not([data-theme="light"]) body[data-page="landing"] main { padding-top: 0 !important; }
  html:not([data-theme="light"]) body[data-page="landing"] .homepage-hero {
    padding-top: 18px !important;
    padding-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
  }
  /* The hero repeats what the launcher just said in a much bigger voice. Keep
     the words — they are the page's SEO and its long-form introduction — but
     stop them shouting over the launcher directly above. */
  html:not([data-theme="light"]) body[data-page="landing"] section.hero.homepage-hero h1.hero-title,
  html:not([data-theme="light"]) body[data-page="landing"] .hero-title {
    font-size: clamp(24px, 6.4vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
  }
  html:not([data-theme="light"]) body[data-page="landing"] .hero-subtitle {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--ink-mid) !important;
    max-width: 46ch; margin-left: auto; margin-right: auto;
  }
  html:not([data-theme="light"]) body[data-page="landing"] .hero-badge {
    background: var(--gl-3-bg) !important;
    border: 1px solid var(--gl-3-line) !important;
    font-size: 10.5px !important;
    color: var(--ink-mid) !important;
  }
}

/* ── the long-form hero's own actions, matched to the glass system ─────────
   so the page reads as one product rather than two designs stacked. */
html:not([data-theme="light"]) .hero-primary-action {
  background-color: #E8C25A !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #F2D179, #C99B2E) !important;
  border: 1px solid rgba(255,232,166,.45) !important;
  color: var(--gold-ink) !important; -webkit-text-fill-color: var(--gold-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px -10px rgba(201,155,46,.5) !important;
  font-weight: 700 !important;
}
html:not([data-theme="light"]) .hero-secondary-action {
  background: var(--gl-2-bg) !important;
  border: 1px solid var(--gl-1-line) !important;
  color: var(--ink-mid) !important; -webkit-text-fill-color: var(--ink-mid) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--gl-hi) inset !important;
}
html:not([data-theme="light"]) .hero-trust {
  color: var(--ink-low) !important; font-size: 11px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CRYSTAL — homepage, dark mode. 2026-09-13.

   Brief: "like cut gems under light, liquid glass, something you want to touch
   and bite into ... heavy convincing glassmorphism, refraction, specular
   highlights, jewel tones, everything reflective."

   The four techniques doing the actual work, because "add a blur" is what makes
   glassmorphism look cheap:

   1. EDGE LIGHT, not a border. A flat 1px rgba border reads as a rectangle. Real
      glass catches light unevenly around its rim, so every panel carries a
      conic-gradient ring masked to the border box (mask-composite: exclude).
      The ring is bright at the top-left where the key light is, fades at the
      sides, and picks up a second cooler catch at the lower right.
   2. TWO SHADOWS AND AN INNER GLOW. An outer shadow sits under the pane (offset
      down, never spread evenly), an inset top highlight gives it thickness, and
      an inset coloured glow makes the pane look lit from within rather than
      painted.
   3. REFRACTION. backdrop-filter carries blur AND saturate AND a slight
      brightness lift, so what is behind the glass bends and enriches instead of
      merely smearing.
   4. SPECULAR SWEEP. One 105deg gradient crosses the surface on press. It is a
      transform on a pseudo-element, so it never triggers layout.

   Scoped to dark mode. The ivory/gold light theme built earlier today is a
   separate system and is deliberately untouched.

   Note on colour: this follows the jewel-tone brief — sapphire, emerald,
   amethyst, rose gold. That reverses the "gold and silver only" direction from
   earlier today, which still governs LIGHT mode.
   ══════════════════════════════════════════════════════════════════════════ */

html:not([data-theme="light"]) {
  --gem-sapphire: #3E7BFA;
  --gem-emerald:  #2FE6A8;
  --gem-amethyst: #A77BFF;
  --gem-rose:     #FF9EC4;
  --gem-cyan:     #5FE9FF;
  --gem-gold:     #F2D179;

  --rim-hi: rgba(255,255,255,.62);
  --rim-mid: rgba(255,255,255,.16);
  --rim-lo: rgba(255,255,255,.05);
}

/* ── the ground: a lit room, not a flat colour ───────────────────────────── */
html:not([data-theme="light"]) body[data-page="landing"]::before {
  background:
    radial-gradient(46vw 34vh at 14% 2%,  rgba(62,123,250,.22), transparent 64%),
    radial-gradient(40vw 30vh at 88% 16%, rgba(167,123,255,.18), transparent 62%),
    radial-gradient(52vw 34vh at 60% 96%, rgba(47,230,168,.12), transparent 60%),
    radial-gradient(34vw 26vh at 4% 72%,  rgba(255,158,196,.10), transparent 62%),
    conic-gradient(from 200deg at 50% 40%,
      rgba(62,123,250,.07), rgba(167,123,255,.05), rgba(47,230,168,.05),
      rgba(255,158,196,.04), rgba(62,123,250,.07));
  filter: blur(14px) saturate(135%);
  animation: gl-drift 42s ease-in-out infinite alternate;
}

/* ── the edge-light ring, reused by every pane ───────────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-btn,
html:not([data-theme="light"]) #apex-launcher .al-card,
html:not([data-theme="light"]) #apex-launcher .al-figs,
html:not([data-theme="light"]) #apex-launcher #al-more {
  position: relative;
  isolation: isolate;
}
html:not([data-theme="light"]) #apex-launcher .al-btn::before,
html:not([data-theme="light"]) #apex-launcher .al-card::before,
html:not([data-theme="light"]) #apex-launcher .al-figs::before,
html:not([data-theme="light"]) #apex-launcher #al-more::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from 208deg,
    var(--rim-hi) 0deg, var(--rim-mid) 42deg, var(--rim-lo) 120deg,
    var(--rim-lo) 190deg, rgba(160,200,255,.34) 250deg, var(--rim-lo) 320deg, var(--rim-hi) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 2;
}

/* ── the specular sweep ──────────────────────────────────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-btn::after,
html:not([data-theme="light"]) #apex-launcher .al-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 36%, rgba(255,255,255,.20) 49%, rgba(255,255,255,.06) 56%, transparent 64%);
  transform: translateX(-72%); opacity: 0; z-index: 1;
}
html:not([data-theme="light"]) #apex-launcher .al-btn:active::after,
html:not([data-theme="light"]) #apex-launcher .al-card:active::after {
  opacity: 1; transform: translateX(72%);
  transition: transform .62s cubic-bezier(.22,.7,.26,1), opacity .62s ease;
}

/* ── TIER 1 · the claim: a cut citrine ───────────────────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-claim {
  background-color: #E8C25A !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,0) 38%),
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.35), transparent 52%),
    linear-gradient(138deg, #FFE39A 0%, #F2CE72 34%, #DEAE45 66%, #C08F26 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -10px 22px -14px rgba(120,80,0,.7) inset,
    0 14px 34px -12px rgba(201,155,46,.58),
    0 3px 10px rgba(0,0,0,.45) !important;
}
html:not([data-theme="light"]) #apex-launcher .al-claim::before {
  background: conic-gradient(from 205deg,
    rgba(255,246,214,.85) 0deg, rgba(255,225,150,.35) 50deg, rgba(180,130,30,.25) 150deg,
    rgba(255,236,180,.30) 250deg, rgba(255,250,230,.85) 360deg);
}

/* ── TIER 2 · the city: sapphire glass ───────────────────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-city {
  background-color: rgba(30,44,86,.34) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 46%),
    radial-gradient(120% 100% at 16% 0%, rgba(95,233,255,.16), transparent 58%),
    linear-gradient(150deg, rgba(62,123,250,.20), rgba(167,123,255,.10)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 26px -6px rgba(95,233,255,.22) inset,
    0 14px 32px -16px rgba(0,0,0,.9) !important;
}

/* ── TIER 3 · the counters: one long pane of glass ───────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-figs {
  background-color: rgba(255,255,255,.028) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 58%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 10px 26px -18px rgba(0,0,0,.95) !important;
}
/* Solid gold, not gradient-clipped text.
   background-clip:text with a transparent fill is elegant when it works and
   catastrophic when it does not: here the clip did not apply, so the gradient
   filled the whole block and each live counter rendered as a solid gold BAR
   with the number invisible behind it. The figures were still in the DOM — 250,
   924, 876 — which is the worst version of this bug, because nothing looks
   broken enough to investigate. A number the site exists to publish does not get
   to depend on a fragile paint trick. (2026-09-13) */
html:not([data-theme="light"]) #apex-launcher .al-fig b {
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--gem-gold) !important;
  -webkit-text-fill-color: var(--gem-gold) !important;
  text-shadow: 0 0 18px rgba(242,209,121,.28);
}

/* ── the product grid: six stones, each its own hue ──────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-card {
  background-color: rgba(255,255,255,.026) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 52%),
    radial-gradient(130% 100% at 18% 0%, var(--tint, rgba(95,233,255,.14)), transparent 62%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(175%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(175%) brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 20px -8px var(--tint, rgba(95,233,255,.2)) inset,
    0 10px 26px -18px rgba(0,0,0,.95);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s ease;
}
/* Each product takes a different stone, so the row reads as a set of gems
   rather than six identical tiles. nth-of-type keeps it markup-free. */
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(1){ --tint: rgba(95,233,255,.17); }
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(2){ --tint: rgba(47,230,168,.16); }
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(3){ --tint: rgba(167,123,255,.17); }
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(4){ --tint: rgba(255,158,196,.15); }
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(5){ --tint: rgba(242,209,121,.15); }
html:not([data-theme="light"]) #apex-launcher .al-card:nth-of-type(6){ --tint: rgba(62,123,250,.18); }
@media (hover: hover) {
  html:not([data-theme="light"]) #apex-launcher .al-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.18) inset,
      0 0 30px -6px var(--tint) inset,
      0 18px 34px -18px rgba(0,0,0,.95),
      0 0 28px -14px var(--tint);
  }
}
/* the icon chip: a small bevelled lens */
html:not([data-theme="light"]) #apex-launcher .al-ic {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 4px 10px -6px rgba(0,0,0,.8);
}

/* ── the headline: light through a prism, held still ─────────────────────── */
html:not([data-theme="light"]) #apex-launcher .al-tag {
  background: linear-gradient(96deg, #FFFFFF 0%, #DCE9FF 34%, #FFFFFF 58%, #F0E2FF 82%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ── "everything else": the quietest pane in the room ────────────────────── */
html:not([data-theme="light"]) #apex-launcher #al-more {
  background-color: rgba(255,255,255,.02) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset !important;
}

/* ── the ad strip, matched to the material ───────────────────────────────── */
html:not([data-theme="light"]) #sp-banner {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset !important;
}

/* ── the header, same glass ──────────────────────────────────────────────── */
html:not([data-theme="light"]) .apex-modern-nav {
  background: linear-gradient(180deg, rgba(10,12,22,.78), rgba(8,9,16,.62)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
html:not([data-theme="light"]) .apex-nav-wallet,
html:not([data-theme="light"]) .apex-nav-wallet-mobile {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 48%),
    linear-gradient(140deg, rgba(242,209,121,.22), rgba(232,194,90,.08)) !important;
  border: 1px solid rgba(242,209,121,.42) !important;
  box-shadow:
    0 1px 0 rgba(255,246,214,.35) inset,
    0 6px 16px -10px rgba(242,209,121,.5) !important;
}

/* ── the long-form hero, same material ───────────────────────────────────── */
html:not([data-theme="light"]) .hero-secondary-action,
html:not([data-theme="light"]) .hero-badge {
  -webkit-backdrop-filter: blur(18px) saturate(175%);
  backdrop-filter: blur(18px) saturate(175%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px -20px rgba(0,0,0,.9) !important;
}

/* ── performance and courtesy ────────────────────────────────────────────
   backdrop-filter is the expensive property here. It is applied to a bounded
   number of small panes, never to a full-screen layer, and no pane animates a
   property that would force it to re-composite. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) #apex-launcher .al-btn::after,
  html:not([data-theme="light"]) #apex-launcher .al-card::after { display: none; }
  html:not([data-theme="light"]) body[data-page="landing"]::before { animation: none; }
}
/* Where backdrop-filter is unsupported the panes would read as flat washes, so
   they get a slightly more opaque fill instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not([data-theme="light"]) #apex-launcher .al-city { background-color: rgba(30,44,86,.72) !important; }
  html:not([data-theme="light"]) #apex-launcher .al-card { background-color: rgba(20,24,40,.72) !important; }
  html:not([data-theme="light"]) #apex-launcher .al-figs { background-color: rgba(18,20,34,.7) !important; }
}