/* ══════════════════════════════════════════════════════════════════════════
   marketplace-home.css — the home page, a big, data-rich, 3D landing.

   A floating hero over an animated herd, then real content pulled live from the
   platform: explore categories, fresh listings, listings near you, trending
   categories, featured listings, community posts, top sellers, the best of the
   blog, tips & tricks, live market rates, and a compact "everything in one
   platform" strip — every card tilts toward the pointer in real perspective,
   lifts on Z and lights up under a pointer-following glow. Behind it all, a
   subtle layer of drifting animals keeps the page alive. Linked only by
   pages/templates/home.html.

   Two rules this file keeps:

   • Every colour is a theme token from theme.css (--primary, --surface, --ink,
     the --e* shadows, --grad-*). No hue of its own — so the page follows the
     light/dark switch and all palettes. The only literals are white/black at an
     alpha, used for glass sheen, image overlays and soft drop-shadows, which
     read as neutrals in either theme.

   • The 3D + motion is a progressive enhancement. Depth (translateZ) is static;
     tilt is driven by JS setting --rx/--ry, and that JS never attaches on a
     touch device or under prefers-reduced-motion. Section reveals only hide
     when JS is present (html.mph-js). With no JS, or motion reduced, everything
     sits flat, visible and fully usable — see the reduced-motion block at the
     foot.
   ══════════════════════════════════════════════════════════════════════════ */

.mph {
    --mph-max: 1220px;
    --mph-pad: clamp(16px, 4.5vw, 40px);
    position: relative;
    isolation: isolate;
    color: var(--ink);
    overflow-x: clip;
}
.mph * { box-sizing: border-box; }

/* The accent-into-text gradient used on the headlines. */
.mph-grad {
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-strong);           /* fallback where text-fill isn't honored */
}

/* The ramp behind that gradient is palette-level, not theme-level: under the
   light theme --grad-primary-h runs a-400 → a-600 → a-700 (#e5af7b → #a87f57 →
   #846444 in brown), and clipped to glyphs on the light page ground the head stop
   measures 1.8:1 — the opening words of every gradient headline faded out. The
   dark theme needs no change; its a-300 → a-500 → a-600 stops are all bright on a
   near-black page. So this is light-only, same hue, run from --primary down to
   --primary-strong instead: 4.9:1 at the head, 6.9:1 at the tail.
   The closing CTA card is the exception — its ground is --grad-header, dark chrome
   in BOTH themes, so there the bright ramp is the readable one.

   Both overrides set background-IMAGE, not the `background` shorthand, and that is
   load-bearing rather than a style preference. The shorthand resets every
   background longhand it does not mention, background-clip among them, so writing
   `background:` here put the clip back to its initial border-box and threw away the
   `text` from the rule above — in the light theme only, because the dark theme has
   no override to do the resetting. The gradient then filled the whole box instead
   of the glyphs and --primary painted the letters on top of it: "The Global
   [dark-brown block] Marketplace", a headline in dark brown on dark brown. The
   longhand leaves the clip alone, so the light theme gets its readable ramp AND
   keeps the gradient inside the text. */
html.theme-light .mph-grad {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: var(--primary-strong);
}
html.theme-light .mph-cta-card .mph-grad {
    background-image: var(--grad-primary-h);
    color: var(--accent-ink);
}

/* ── Page-wide drifting fauna (behind everything, very subtle texture) ────── */
.mph-fauna {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.mph-fauna-em {
    position: absolute;
    font-size: clamp(66px, 9.5vw, 168px);
    line-height: 1;
    color: var(--primary-strong);
    opacity: .10;
    will-change: transform;
    animation: mph-hover 14s ease-in-out infinite;
}
.mph-fauna-em i { display: block; }
@keyframes mph-hover {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50%      { transform: translate(16px, -24px) rotate(4deg); }
}
.mph-fauna-em:nth-child(1) { left: 4%;  top: 7%;  animation-duration: 13s; animation-delay: -1s; }
.mph-fauna-em:nth-child(2) { left: 87%; top: 15%; animation-duration: 16s; animation-delay: -3s; }
.mph-fauna-em:nth-child(3) { left: 11%; top: 33%; animation-duration: 15s; animation-delay: -6s; }
.mph-fauna-em:nth-child(4) { left: 80%; top: 45%; animation-duration: 18s; animation-delay: -2s; }
.mph-fauna-em:nth-child(5) { left: 5%;  top: 60%; animation-duration: 14s; animation-delay: -5s; }
.mph-fauna-em:nth-child(6) { left: 90%; top: 71%; animation-duration: 17s; animation-delay: -8s; }
.mph-fauna-em:nth-child(7) { left: 15%; top: 85%; animation-duration: 15s; animation-delay: -4s; }
.mph-fauna-em:nth-child(8) { left: 78%; top: 93%; animation-duration: 19s; animation-delay: -7s; }

/* ── Shared buttons ─────────────────────────────────────────────────────── */
.mph-btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: 14px 26px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
.mph-btn i { font-size: .95em; }
.mph-btn--primary {
    background: var(--grad-primary-h);
    color: var(--primary-ink);
    box-shadow: var(--e2), var(--e-glow);
}
.mph-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--e3), var(--e-glow);
}
.mph-btn--glass {
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    color: var(--ink);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--e1);
}
.mph-btn--glass:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    color: var(--primary-strong);
    box-shadow: var(--e2);
}
.mph-btn:active { transform: translateY(-1px) scale(.99); }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
.mph-hero {
    position: relative;
    isolation: isolate;
    min-height: min(92vh, 840px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(72px, 12vh, 140px) var(--mph-pad) clamp(56px, 9vh, 96px);
    perspective: 1300px;
    overflow: hidden;
}

/* Decorative background: floating orbs, a perspective grid floor, a running herd. */
.mph-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mph-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    will-change: transform;
}
.mph-orb--1 {
    width: 46vw; max-width: 560px; aspect-ratio: 1;
    top: -8%; left: -6%;
    background: radial-gradient(circle at 30% 30%, var(--primary-soft), transparent 70%);
    animation: mph-float-a 15s ease-in-out infinite;
}
.mph-orb--2 {
    width: 40vw; max-width: 480px; aspect-ratio: 1;
    bottom: -12%; right: -8%;
    background: radial-gradient(circle at 60% 40%, var(--a-300), transparent 70%);
    opacity: .35;
    animation: mph-float-b 18s ease-in-out infinite;
}
.mph-orb--3 {
    width: 26vw; max-width: 320px; aspect-ratio: 1;
    top: 40%; left: 55%;
    background: radial-gradient(circle at 50% 50%, var(--primary-wash), transparent 72%);
    animation: mph-float-a 21s ease-in-out infinite reverse;
}
.mph-grid-floor {
    position: absolute;
    left: 50%; bottom: -6%;
    width: 200%; height: 60%;
    transform: translateX(-50%) perspective(600px) rotateX(68deg);
    transform-origin: center bottom;
    background-image:
        linear-gradient(to right, rgba(var(--line-rgb), .55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--line-rgb), .55) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
    mask-image: linear-gradient(to top, #000 0%, transparent 78%);
    opacity: .5;
}

/* the animated herd that runs across the hero ground */
.mph-herd { position: absolute; inset: auto 0 5% 0; height: clamp(56px, 10vh, 108px); pointer-events: none; }
.mph-run {
    position: absolute; bottom: 0;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 1;
    color: var(--primary-strong);
    opacity: .5;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .14));
    will-change: transform;
}
.mph-run--1 { animation: mph-gallop 15s linear infinite; }
.mph-run--2 { font-size: clamp(48px, 7vw, 90px); opacity: .42; animation: mph-gallop 20s linear infinite; animation-delay: -7s; }
.mph-run--3 { font-size: clamp(38px, 5.5vw, 66px); opacity: .46; animation: mph-gallop 17s linear infinite; animation-delay: -12s; }
@keyframes mph-gallop {
    0%   { transform: translateX(114vw) translateY(0); }
    25%  { transform: translateX(80vw)  translateY(-10px); }
    50%  { transform: translateX(48vw)  translateY(0); }
    75%  { transform: translateX(16vw)  translateY(-10px); }
    100% { transform: translateX(-18vw) translateY(0); }
}
.mph-graze {
    position: absolute; bottom: 0;
    font-size: clamp(40px, 5.5vw, 68px);
    line-height: 1;
    color: var(--primary-strong);
    opacity: .42;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .14));
    transform-origin: bottom center;
}
.mph-graze--1 { left: 14%; animation: mph-sway 4s ease-in-out infinite; }
.mph-graze--2 { left: 66%; animation: mph-sway 4.6s ease-in-out infinite; animation-delay: -1.5s; }
@keyframes mph-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }

@keyframes mph-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(3%, 5%, 0) scale(1.08); }
}
@keyframes mph-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-4%, -4%, 0) scale(1.1); }
}

/* The tilting hero card (text lives on stacked Z-planes). */
.mph-hero-inner {
    position: relative;
    width: 100%;
    max-width: 880px;
    text-align: center;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--t-slow);
}
.mph-hero-inner.is-tilting { transition: transform .1s ease-out; }
.mph-hero-inner > * { transform: translateZ(var(--z, 0)); transform-style: preserve-3d; }

.mph-badge {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 8px 16px;
    margin-bottom: 26px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .01em;
    /* --primary-strong, not --accent-ink. Both flip polarity with the theme, which
       is what this pill needs — but --accent-ink IS --primary in light, and the
       1px 24%-primary border blends into the crop to give a real ground of
       rgb(246,222,204), where --primary reads 3.94 at 13.1px. --primary-strong is
       one ramp step deeper and clears it at 5.53 worst-palette, and in dark it is
       the LIGHT end (#cb9b6c for brown) on --primary-soft's near-black: 6.07. */
    color: var(--primary-strong);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: var(--e1);
}
.mph-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 var(--primary-glow);
    animation: mph-pulse 2.4s ease-out infinite;
}
@keyframes mph-pulse {
    0%   { box-shadow: 0 0 0 0 var(--primary-glow); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.mph-hero-title {
    margin: 0 0 20px;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--ink);
}
.mph-hero-sub {
    margin: 0 auto 34px;
    max-width: 660px;
    font-size: clamp(1rem, 2.1vw, 1.2rem);
    line-height: 1.6;
    color: var(--ink-2);
}

/* Search */
.mph-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 640px);
    margin: 0 auto 26px;
    padding: 7px 7px 7px 20px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--e3), var(--ring);
    transition: box-shadow var(--t), border-color var(--t);
}
.mph-search:focus-within {
    border-color: var(--primary);
    box-shadow: var(--e3), 0 0 0 4px var(--primary-glow);
}
.mph-search-icon { color: var(--dim); font-size: 1rem; margin-right: 12px; }
.mph-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 1.02rem;
    outline: none;
}
.mph-search-input::placeholder { color: var(--dim); }
.mph-search-btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: 13px 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--grad-primary-h);
    color: var(--primary-ink);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--e-glow);
    transition: transform var(--t-fast), box-shadow var(--t);
}
.mph-search-btn:hover { transform: translateX(2px); box-shadow: var(--e2), var(--e-glow); }
.mph-search-btn span { white-space: nowrap; }

/* The typeahead list. Anchored to the pill and given a z-index above the hero's
   3D layers — the tilt wrapper and the drifting fauna both stack, and without a
   z-index the suggestions rendered *behind* the animals. */
.mph-search-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    overflow: hidden;
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--e3);
}
.mph-search-drop.is-open { display: block; }
.mph-search-drop a {
    display: block;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.mph-search-drop a:last-child { border-bottom: none; }
.mph-search-drop a:hover,
.mph-search-drop a.is-active { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.mph-search-drop b { display: block; color: var(--ink); font-size: .9rem; font-weight: 700; }
.mph-search-drop small { display: block; color: var(--dim); font-size: .78rem; margin-top: 2px; }
.mph-search-drop .mp-search-all {
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--primary-strong);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

/* What the box covers, under the box. */
.mph-search-scope {
    margin: -14px auto 24px;
    color: var(--dim);
    font-size: .84rem;
    line-height: 1.9;
}
.mph-search-scope a {
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px dotted var(--line);
    white-space: nowrap;
}
.mph-search-scope a:hover { color: var(--primary-strong); border-bottom-color: var(--primary); }

/* Hero CTAs */
.mph-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 46px;
}

/* Hero stats */
.mph-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.mph-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 130px;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--e1), var(--ring);
}
.mph-stat-ico { font-size: 1.1rem; color: var(--primary-strong); margin-bottom: 2px; }
.mph-stat-num {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}
.mph-stat-plus { font-size: 1.2rem; font-weight: 800; color: var(--primary-strong); margin-top: -.4em; }
/* --ink-2, not --ink-3. The tile above is `--surface at 70%` over the hero
   gradient, so its real ground is a composite no token names — measured
   rgb(222,210,198) on / and rgb(234,222,210) on /animals/, where --ink-3 reads
   3.90 and 4.38 against the 4.5 a 12.8px label owes. --ink-2 clears both in all
   nine palettes (worst 5.15) and the hierarchy against --ink on .mph-stat-num
   above is intact. Raising the tile's opacity instead would have worked and cost
   the glass. */
.mph-stat-lbl { font-size: .8rem; font-weight: 600; color: var(--ink-2); text-align: center; }

/* Scroll hint */
.mph-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* --ink-2, not --dim. Unlike the stats this sits straight on the hero
       gradient with no tile under it — measured rgb(234,204,174), where --dim
       (which theme.css aliases to --ink-3) reads 3.80 at 11.8px. --ink-2 gives
       5.01 worst-palette. It is a 3-word hint, but it is a link, so 1.4.3's
       incidental-text exemption does not cover it. */
    color: var(--ink-2);
    text-decoration: none;
}
.mph-scroll-hint i { animation: mph-bob 1.8s ease-in-out infinite; }
.mph-scroll-hint:hover { color: var(--primary-strong); }
@keyframes mph-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTIONS — shared shell, head, reveal-on-scroll
   ════════════════════════════════════════════════════════════════════════ */
.mph-sec {
    position: relative;
    max-width: var(--mph-max);
    margin: 0 auto;
    padding: clamp(40px, 6.5vh, 76px) var(--mph-pad);
    scroll-margin-top: 74px;
}
.mph-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: clamp(22px, 3.5vh, 38px);
}
.mph-sec-head--center { justify-content: center; text-align: center; }
.mph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-bottom: 12px;
    padding: 6px 14px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-radius: var(--radius-pill);
}
.mph-sec-title {
    margin: 0;
    font-size: clamp(1.5rem, 3.6vw, 2.35rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink);
}
.mph-see {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    flex: none;
    font-size: .92rem;
    font-weight: 700;
    color: var(--primary-strong);
    text-decoration: none;
    white-space: nowrap;
    transition: gap var(--t);
}
.mph-see i { transition: transform var(--t); }
.mph-see:hover { gap: .8em; }
.mph-see:hover i { transform: translateX(3px); }

.mph-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 var(--primary-glow);
    animation: mph-pulse 2s ease-out infinite;
}

/* reveal on scroll — only hides when JS is present, so no-JS shows everything */
.mph-reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.mph-js .mph-reveal { opacity: 0; transform: translateY(26px); }
.mph-js .mph-reveal.is-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY EXPLORER
   ════════════════════════════════════════════════════════════════════════ */
.mph-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    perspective: 1000px;
}
.mph-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 10px;
    border-radius: var(--radius-lg);
    background: var(--grad-surface);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    color: var(--ink);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--lift, 0));
    transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t), color var(--t);
    will-change: transform;
}
.mph-cat:hover {
    --lift: 20px;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    box-shadow: var(--e3);
    color: var(--primary-strong);
}
.mph-cat.is-tilting { transition: transform .1s ease-out, box-shadow var(--t); }
.mph-cat-em { font-size: 2rem; line-height: 1; transition: transform var(--t-slow); }
.mph-cat:hover .mph-cat-em { transform: scale(1.22) translateY(-2px); }
.mph-cat-name { font-size: .86rem; font-weight: 700; }
/* The "Animals A–Z" tile: a primary-tinted "browse everything" card among the categories. */
.mph-cat--az { background: var(--grad-primary-h); border-color: transparent; color: var(--primary-ink); }
.mph-cat--az .mph-cat-em, .mph-cat--az:hover { color: var(--primary-ink); }
.mph-cat--az:hover { border-color: transparent; }

/* ════════════════════════════════════════════════════════════════════════
   LISTING / POST / BLOG / TIP CARDS
   ════════════════════════════════════════════════════════════════════════ */
.mph-grid-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    perspective: 1200px;
}
.mph-grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
.mph-grid-cards--4 { grid-template-columns: repeat(4, 1fr); }

.mph-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: var(--grad-surface);
    border: 1px solid var(--line);
    box-shadow: var(--e2), var(--ring);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--lift, 0));
    transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
    will-change: transform;
}
.mph-card:hover {
    --lift: 26px;
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    box-shadow: var(--e4), var(--ring);
}
.mph-card.is-tilting { transition: transform .1s ease-out, box-shadow var(--t); }

/* glow sits under the content of every glowing container */
.mph-card-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), var(--primary-glow), transparent 60%);
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}
.mph-card:hover .mph-card-glow,
.mph-seller:hover .mph-card-glow,
.mph-feat:hover .mph-card-glow,
.mph-rates:hover .mph-card-glow { opacity: 1; }
.mph-card > :not(.mph-card-glow),
.mph-seller > :not(.mph-card-glow),
.mph-feat > :not(.mph-card-glow),
.mph-rates > :not(.mph-card-glow) { position: relative; z-index: 1; }

.mph-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--primary-soft);
}
.mph-card-media--wide { aspect-ratio: 16 / 10; }
.mph-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.mph-card:hover .mph-card-media img { transform: scale(1.06); }
.mph-card-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    color: var(--primary-strong);
    background: var(--grad-surface);
}
.mph-card-badge {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 5px 11px;
    font-size: .72rem; font-weight: 700;
    color: var(--primary-ink);
    background: var(--grad-primary-h);
    border-radius: var(--radius-pill);
    box-shadow: var(--e1);
    text-transform: capitalize;
}
.mph-card-badge--hot { background: var(--grad-primary-h); }
.mph-card-views {
    position: absolute; bottom: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 4px 10px;
    font-size: .72rem; font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-pill);
}
.mph-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
}
.mph-card-title {
    margin: 0;
    font-size: 1rem; font-weight: 700; line-height: 1.3;
    color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mph-card-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: .82rem; color: var(--ink-3);
}
.mph-card-meta i { color: var(--primary-strong); }
.mph-card-price { margin-top: 2px; font-size: 1.1rem; font-weight: 800; color: var(--primary-strong); }

/* tip cards — text only */
.mph-card--tip { padding: 18px; }
.mph-tip-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mph-tip-top .mph-card-badge { position: static; }
.mph-tip-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 1.2rem;
    color: var(--primary-ink);
    background: var(--grad-primary-h);
    border-radius: var(--radius);
    box-shadow: var(--e-glow);
    transition: transform var(--t-slow);
}
.mph-card--tip:hover .mph-tip-ico { transform: rotate(-8deg) scale(1.06); }

/* ── Popular cards (Featured) — image-first overlay, a deliberately different
      shape from the flat listing/blog cards so the grid does not read as one
      repeated template. Scrim + white text is the same neutral-overlay pattern
      as .mph-card-views; scoped selectors (0,2,0) beat the base child rule. ── */
.mph-grid-cards--pop { grid-template-columns: repeat(4, 1fr); }
.mph-card--pop {
    min-height: clamp(300px, 34vw, 356px);
    justify-content: flex-end;
    color: #fff;
    border-color: transparent;
    background: var(--primary-soft);
}
.mph-card--pop .mph-pop-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mph-card--pop .mph-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.mph-card--pop:hover .mph-pop-media img { transform: scale(1.08); }
.mph-card--pop .mph-card-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--primary-strong); background: var(--grad-surface);
}
.mph-card--pop .mph-pop-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, .32) 56%, rgba(0, 0, 0, .86) 100%);
}
.mph-card--pop .mph-pop-ribbon {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 6px 13px;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    color: var(--primary-ink); background: var(--grad-primary-h);
    border-radius: var(--radius-pill); box-shadow: var(--e-glow);
}
.mph-card--pop .mph-pop-rank {
    /* Decorative rank watermark (aria-hidden), so it is meant to be faint — but
       18% white over a card is only faint under the dark theme, where the card is
       --surface. Under the light theme the card is near-white and the numeral
       disappeared completely (1.10:1). --ink at low alpha is dark on the light card
       and light on the dark one, so the watermark stays equally faint in both. */
    position: absolute; top: 4px; right: 14px; z-index: 2;
    font-size: clamp(54px, 8vw, 92px); font-weight: 900; line-height: 1;
    color: var(--ink); opacity: .16;
}
.mph-card--pop .mph-pop-body {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; gap: 7px;
    padding: 16px;
}
.mph-card--pop .mph-pop-views {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 3px 9px;
    font-size: .7rem; font-weight: 700;
    color: #fff; background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border-radius: var(--radius-pill);
}
.mph-card--pop .mph-pop-title {
    margin: 0;
    font-size: 1.06rem; font-weight: 800; line-height: 1.25;
    color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mph-card--pop .mph-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.mph-card--pop .mph-pop-loc {
    min-width: 0;
    display: inline-flex; align-items: center; gap: .4em;
    font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mph-card--pop .mph-pop-loc i { color: rgba(255, 255, 255, .7); }
.mph-card--pop .mph-pop-price {
    flex: none;
    padding: 5px 12px;
    font-size: .95rem; font-weight: 800; white-space: nowrap;
    color: var(--primary-ink); background: var(--grad-primary-h);
    border-radius: var(--radius-pill); box-shadow: var(--e1);
}

/* ── Blog cards — a magazine treatment: a category tab and a Read-article link,
      with the first article promoted to a wide two-column lead. The tab/flag
      live inside .mph-card-media (overflow:hidden) so they never overhang. ── */
.mph-blog-tab {
    position: absolute; left: 12px; bottom: 10px; z-index: 2;
    display: inline-flex; align-items: center;
    padding: 5px 12px;
    font-size: .72rem; font-weight: 800; text-transform: capitalize;
    color: var(--primary-ink); background: var(--grad-primary-h);
    border-radius: var(--radius-pill); box-shadow: var(--e1);
}
.mph-blog-flag {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: .4em;
    padding: 6px 12px;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: #fff; background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: var(--radius-pill);
}
.mph-blog-read {
    display: inline-flex; align-items: center; gap: .5em; margin-top: 4px;
    font-size: .82rem; font-weight: 700; color: var(--primary-strong);
}
.mph-blog-read i { transition: transform var(--t); }
.mph-card--blog:hover .mph-blog-read i { transform: translateX(4px); }
.mph-card--blog-lead { grid-column: span 2; }
@media (min-width: 781px) {
    .mph-card--blog-lead { flex-direction: row; }
    .mph-card--blog-lead .mph-card-media { width: 54%; aspect-ratio: auto; align-self: stretch; min-height: 260px; }
    .mph-card--blog-lead .mph-card-body { flex: 1; justify-content: center; padding: 24px 26px; }
    .mph-card--blog-lead .mph-card-title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); -webkit-line-clamp: 3; }
    .mph-card--blog-lead .mph-blog-read { font-size: .9rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   TRENDING CATEGORIES
   ════════════════════════════════════════════════════════════════════════ */
.mph-trend { display: flex; flex-wrap: wrap; gap: 12px; perspective: 900px; }
.mph-trend-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px;
    border-radius: var(--radius-pill);
    background: var(--grad-surface);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.mph-trend-chip:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--e2); }
.mph-trend-rank { font-size: .95rem; font-weight: 800; color: var(--primary-strong); }
.mph-trend-name { font-size: .95rem; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.mph-trend-count { font-size: .76rem; font-weight: 600; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   TOP SELLERS
   ════════════════════════════════════════════════════════════════════════ */
.mph-sellers {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    perspective: 1000px;
}
.mph-seller {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 24px 14px;
    text-align: center;
    border-radius: var(--radius-lg);
    background: var(--grad-surface);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--lift, 0));
    transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
    will-change: transform;
}
.mph-seller:hover {
    --lift: 20px;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    box-shadow: var(--e3);
}
.mph-seller.is-tilting { transition: transform .1s ease-out, box-shadow var(--t); }
.mph-seller-avatar { position: relative; width: 72px; height: 72px; margin-bottom: 2px; }
.mph-seller-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: var(--e-glow); }
.mph-seller-avatar span {
    display: flex; width: 100%; height: 100%;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--grad-primary-h);
    color: var(--primary-ink);
    font-size: 1.6rem; font-weight: 800;
    box-shadow: var(--e-glow);
}
.mph-seller-verify {
    position: absolute; bottom: -2px; right: -2px;
    font-size: 1.1rem; line-height: 1;
    color: var(--primary-strong);
    background: var(--surface);
    border-radius: 50%;
}
.mph-seller-name { font-size: .95rem; font-weight: 700; color: var(--ink); }
.mph-seller-place { font-size: .8rem; color: var(--ink-3); }
.mph-seller-place i { color: var(--primary-strong); }
.mph-seller-count {
    margin-top: 2px;
    padding: 3px 11px;
    font-size: .76rem; font-weight: 700;
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-radius: var(--radius-pill);
}

/* ════════════════════════════════════════════════════════════════════════
   LIVE MARKET RATES (promo band)
   ════════════════════════════════════════════════════════════════════════ */
.mph-rates {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 26px;
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-xl);
    background: var(--grad-header);
    border: 1px solid var(--line);
    box-shadow: var(--e3);
    overflow: hidden;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.mph-rates.is-tilting { transition: transform .1s ease-out, box-shadow var(--t); }
.mph-rates .mph-eyebrow {
    color: var(--header-ink);
    background: color-mix(in srgb, var(--header-ink) 14%, transparent);
}
.mph-rates .mph-sec-title { color: var(--header-ink); margin-bottom: 12px; }
.mph-rates-sub {
    margin: 0 0 22px;
    max-width: 460px;
    font-size: 1rem; line-height: 1.6;
    color: color-mix(in srgb, var(--header-ink) 80%, transparent);
}
.mph-ticker { display: flex; }
.mph-ticker-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mph-tick {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    font-size: .9rem; font-weight: 700;
    white-space: nowrap;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--e1);
    transition: transform var(--t);
}
.mph-tick:hover { transform: translateY(-3px); }
.mph-up { color: var(--primary-strong); animation: mph-tick-move 2.6s ease-in-out infinite; }
.mph-down { color: var(--ink-3); animation: mph-tick-move 2.6s ease-in-out infinite reverse; }
@keyframes mph-tick-move { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ════════════════════════════════════════════════════════════════════════
   EVERYTHING IN ONE PLATFORM (compact feature strip)
   ════════════════════════════════════════════════════════════════════════ */
.mph-feats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    perspective: 1200px;
}
.mph-feat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    background: var(--grad-surface);
    border: 1px solid var(--line);
    box-shadow: var(--e1);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--lift, 0));
    transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t);
    will-change: transform;
}
.mph-feat:hover {
    --lift: 22px;
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    box-shadow: var(--e3);
}
.mph-feat.is-tilting { transition: transform .1s ease-out, box-shadow var(--t); }
.mph-feat-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    font-size: 1.3rem;
    color: var(--primary-ink);
    background: var(--grad-primary-h);
    border-radius: var(--radius);
    box-shadow: var(--e-glow);
    transition: transform var(--t-slow);
}
.mph-feat:hover .mph-feat-ico { transform: translateY(-3px) rotate(-8deg) scale(1.06); }
.mph-feat-title { margin: 0; font-size: 1.14rem; font-weight: 800; color: var(--ink); }
.mph-feat-desc { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); flex: 1; }
.mph-feat-link {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: .92rem; font-weight: 700;
    color: var(--primary-strong);
}
.mph-feat-link i { transition: transform var(--t); }
.mph-feat:hover .mph-feat-link i { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════════════════
   CLOSING CTA + SIGN-OFF
   ════════════════════════════════════════════════════════════════════════ */
.mph-cta {
    max-width: var(--mph-max);
    margin: 0 auto;
    padding: clamp(20px, 4vh, 48px) var(--mph-pad) clamp(56px, 9vh, 96px);
    perspective: 1200px;
}
.mph-cta-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: clamp(40px, 7vw, 76px) var(--mph-pad);
    border-radius: var(--radius-xl);
    background: var(--grad-header);
    border: 1px solid var(--line);
    box-shadow: var(--e4);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform var(--t-slow);
}
.mph-cta-card.is-tilting { transition: transform .1s ease-out; }
.mph-cta-glow {
    position: absolute;
    inset: -40% -10% auto;
    height: 120%;
    background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 30%), var(--primary-glow), transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.mph-cta-body { transform-style: preserve-3d; }
.mph-cta-body > * { transform: translateZ(var(--z, 0)); }
.mph-cta-title {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 4.6vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--header-ink);
}
.mph-cta-sub {
    margin: 0 auto 30px;
    max-width: 520px;
    font-size: clamp(1rem, 2.1vw, 1.16rem);
    line-height: 1.6;
    color: color-mix(in srgb, var(--header-ink) 78%, transparent);
}
.mph-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.mph-signoff { text-align: center; margin-top: clamp(36px, 6vh, 60px); }
.mph-signoff-tag { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .mph-grid-cards, .mph-grid-cards--4 { grid-template-columns: repeat(3, 1fr); }
    .mph-feats { grid-template-columns: repeat(3, 1fr); }
    .mph-cats, .mph-sellers { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px) {
    .mph-grid-cards, .mph-grid-cards--3, .mph-grid-cards--4 { grid-template-columns: repeat(2, 1fr); }
    .mph-feats { grid-template-columns: repeat(2, 1fr); }
    .mph-cats, .mph-sellers { grid-template-columns: repeat(3, 1fr); }
    .mph-rates { grid-template-columns: 1fr; }
    .mph-sec-head { flex-direction: column; align-items: flex-start; }
}
/* Phones — every content card is full-width (one per row), so nothing is
   cramped. Sits between 780 and 480 so the smaller-screen block can still
   override it. */
@media (max-width: 600px) {
    .mph-grid-cards,
    .mph-grid-cards--3,
    .mph-grid-cards--4,
    .mph-grid-cards--pop { grid-template-columns: 1fr; }
    .mph-card--blog-lead { grid-column: auto; }
    .mph-cats { grid-template-columns: repeat(3, 1fr); }
    .mph-sellers { grid-template-columns: repeat(2, 1fr); }
    .mph-card--pop { min-height: clamp(260px, 62vw, 340px); }
}
@media (max-width: 480px) {
    .mph-cats, .mph-sellers { grid-template-columns: repeat(2, 1fr); }
    .mph-feats { grid-template-columns: 1fr; }
    .mph-search { flex-wrap: wrap; padding: 12px; border-radius: var(--radius-lg); }
    .mph-search-icon { display: none; }
    .mph-search-input { flex: 1 1 100%; padding: 8px 4px 12px; }
    .mph-search-btn { flex: 1 1 100%; justify-content: center; }
    .mph-hero-cta, .mph-cta-actions { flex-direction: column; align-items: stretch; }
    .mph-hero-cta .mph-btn, .mph-cta-actions .mph-btn { justify-content: center; }
    .mph-stat { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — the whole 3D + ambient layer stands down.
   The tilt JS already refuses to attach here (so --rx/--ry never change), and
   the reveal JS marks every section visible. This block silences the ambient
   animations and transitions, leaving a clean, flat, fully readable page.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .mph-orb,
    .mph-badge-dot,
    .mph-scroll-hint i,
    .mph-fauna-em,
    .mph-run,
    .mph-graze,
    .mph-live-dot,
    .mph-up,
    .mph-down { animation: none; }
    .mph-hero-inner,
    .mph-card,
    .mph-cat,
    .mph-seller,
    .mph-feat,
    .mph-rates,
    .mph-trend-chip,
    .mph-cta-card,
    .mph-btn,
    .mph-search-btn,
    .mph-card-media img,
    .mph-cat-em,
    .mph-tip-ico,
    .mph-feat-ico,
    .mph-see,
    .mph-see i { transition: none; }
    .mph-reveal { transition: none; }
    .mph-js .mph-reveal { opacity: 1; transform: none; }
    .mph-card:hover, .mph-cat:hover, .mph-seller:hover, .mph-feat:hover { --lift: 0; }
    .mph-btn:hover, .mph-btn:active { transform: none; }
}