/* ============================================================================
   experience_card.css — "Experience your journey" — TWO-card chooser.

   Two side-by-side cards so visitors click straight to what they want:
     The building blocks → stages you assemble into a journey
                           (motion: .exp-orbit luggage-carousel of stage chips)
     See it Live         → pick your industry, run the real demo (the gallery)
                           (motion: .exp-feed vertical infinite-scroll of real
                            gallery cards, rising bottom→top)

   The full server-rendered gallery grid (~689 crawlable SEO links) stays BELOW
   these cards — hard constraint, never JS-ify it. All motion is pure CSS and
   all styling lives in this external sheet — PUBLIC_CSP forbids inline
   style/script (see tasks/lessons/general/..._public_pages_no_inline_styles_csp).
   Matches index_v6 tokens (--blurple, --main/--inv-bg-color, glass, fonts).
   ========================================================================== */

.exp-kicker {
    display: block;
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blurple); margin-bottom: .9rem;
}

.exp-cards {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
    margin: 2rem 0 2.75rem;
}
/* Mobile: the two chooser cards stack full-width, and the card-2 gallery feed
   drops from two columns to one so journey names stay readable instead of
   ellipsis-truncating in a squeezed 2-up grid (the feed itself is defined far
   below; its responsive collapse lives here with the other breakpoint rules). */
@media (max-width: 640px) {
    .exp-cards { grid-template-columns: 1fr; }
    .exp-feed { grid-template-columns: 1fr; }
    .exp-feed-col--b { display: none; }
}

/* `a.exp-c` (element+class) outranks landing_base.css's anchor underline. */
a.exp-c {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    border-radius: 18px; overflow: hidden;
    background: var(--surface-glass-bg);
    border: 1px solid var(--surface-glass-border);
    box-shadow: var(--surface-glass-shadow);
    transition:
        transform .5s var(--surface-ease),
        border-color .5s var(--surface-ease),
        box-shadow .5s var(--surface-ease);
}
a.exp-c:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--blurple) 45%, transparent);
    box-shadow: var(--surface-glass-shadow-active-hover);
}

/* Fixed height (not aspect-ratio) so both cards' graphics — the orbit carousel
   and the industries marquee — render at the same height across breakpoints. */
.exp-c-media {
    flex: none; box-sizing: border-box; height: 200px; overflow: hidden;
    display: grid; place-items: center; padding: 1.6rem;
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}
.exp-c--accent .exp-c-media {
    background:
        radial-gradient(ellipse 80% 70% at 50% 40%, color-mix(in srgb, var(--blurple) 16%, transparent), transparent 70%),
        color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
}

/* Card motion graphics live in the two blocks at the END of this file:
   "02 Stages = orbit" (card 1) and "03 Pick your industry = feed" (card 2). */

.exp-c-body { padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.exp-c-kicker {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); margin-bottom: .55rem;
}
.exp-c--accent .exp-c-kicker { color: var(--blurple); }
.exp-c-title {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: 1.3rem; font-weight: 700; color: var(--inv-bg-color);
    letter-spacing: -.02em; margin: 0 0 .5rem;
}
.exp-c-copy {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .92rem; line-height: 1.5; margin: 0; flex: 1;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
}
.exp-c-cta {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.15rem;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .9rem; font-weight: 600;
    color: var(--inv-bg-color);
}
.exp-c--accent .exp-c-cta { color: var(--blurple); }
.exp-c-cta svg { width: 15px; height: 15px; transition: transform .4s var(--surface-ease); }
a.exp-c:hover .exp-c-cta svg { transform: translateX(3px); }

/* ── 02 Stages = luggage-carousel orbit ─────────────────────────────────────
   8 stage chips ride one elliptical conveyor. ONE @keyframes is a full lap;
   chips are phase-offset by negative animation-delay so they circulate evenly
   (slide across the bright front, then recede + fade around the back, and
   re-emerge from the other side).

   PERF-CRITICAL: the animation touches ONLY `transform` and `opacity` — both
   GPU-composited, so the whole orbit runs on the compositor thread with ~zero
   per-frame main-thread work. Do NOT animate `filter`/`blur`, `z-index`,
   `box-shadow`, `width`, etc. in these keyframes: animating ANY non-composited
   property forces a main-thread style-recalc + repaint EVERY frame for all 8
   chips (measured ~120ms/2s vs ~1ms here — a 100x regression) and reintroduces
   the page lag this design exists to avoid. Depth READS via scale + opacity;
   depth OCCLUSION (which chip paints in front) is handled by translateZ inside
   `.exp-orbit-stage { transform-style: preserve-3d }` — a 3D paint-sort that
   stays on the compositor, so we never need animated z-index. The soft
   shadow/glow is STATIC and rides the transform scale (no per-frame repaint).

   The @keyframes below are MECHANICALLY DERIVED, not hand-tuned — each stop i of
   N (phase phi = 2*pi*i/N) is:
     x = rx*sin(phi)      y = ry*cos(phi)      d = (cos(phi)+1)/2   (1=front)
     scale = lerp(0.55, 1.06, d)               opacity = smoothstep(d)
     z (paint depth) = lerp(-100px, +60px, d)  [preserve-3d sort only]
   To retune depth/speed, recompute the stops with those formulas (front is
   phi=0 -> bottom of the ellipse). Geometry only (rx/ry) is editable live via
   the custom props on .exp-orbit without touching the keyframes. */
.exp-c-media--orbit {
    aspect-ratio: auto; height: 200px; padding: 0; overflow: hidden; container-type: inline-size;
}
.exp-orbit {
    position: relative; width: 100%; height: 100%;
    --rx: clamp(96px, 40cqw, 188px); --ry: 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.exp-orbit-belt {
    position: absolute; left: 50%; top: calc(50% + 40px);
    width: calc(var(--rx) * 1.5); height: 50px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--blurple) 22%, transparent), transparent 72%);
    filter: blur(5px); pointer-events: none;
}
/* 3D context so chips depth-sort by their translateZ (compositor paint order) —
   lets us drop animated z-index while keeping correct front/back occlusion. */
.exp-orbit-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.exp-orb {
    position: absolute; left: 50%; top: 50%;
    display: inline-flex; align-items: center; gap: .48rem; white-space: nowrap;
    padding: .44rem .86rem .44rem .5rem; border-radius: 999px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 12%, transparent), color-mix(in srgb, var(--inv-bg-color) 4%, transparent)),
        var(--surface-glass-bg);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent);
    box-shadow:
        0 16px 28px -16px rgba(0,0,0,.70), 0 4px 10px -4px rgba(0,0,0,.45),
        0 0 15px -4px color-mix(in srgb, var(--blurple) 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 92%, transparent);
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .82rem; font-weight: 650; letter-spacing: -.01em;
    animation: exp-orbit 24s linear infinite; will-change: transform, opacity; transform: translate(-50%, -50%);
}
.exp-orb-ic {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 23px; height: 23px; border-radius: 7px; color: var(--blurple);
    background: linear-gradient(180deg, color-mix(in srgb, var(--blurple) 26%, transparent), color-mix(in srgb, var(--blurple) 14%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blurple) 30%, transparent);
}
.exp-orb-ic svg { width: 13px; height: 13px; display: block; }
/* Hover focus: hovering EITHER card quiets the OTHER card's motion (not the one
   you're looking at) so attention follows the cursor. `.exp-cards:has(.exp-c:hover)`
   fires only when a real card (not the gap) is hovered; `.exp-c:not(:hover)` is
   then the sibling card, whose orbit pauses. (:has() is already used across
   index_v6.css on this page.) */
.exp-cards:has(.exp-c:hover) .exp-c:not(:hover) .exp-orb { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .exp-orb { animation: none; }
  .exp-orb:nth-child(1) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.0000), calc(var(--ry) * 1.0000 + -2px), 60.0px) scale(1.060); opacity:1.000; }
  .exp-orb:nth-child(2) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7071), calc(var(--ry) * 0.7071 + -2px), 36.6px) scale(0.985); opacity:0.942; }
  .exp-orb:nth-child(3) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 1.0000), calc(var(--ry) * 0.0000 + -2px), -20.0px) scale(0.805); opacity:0.500; }
  .exp-orb:nth-child(4) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7071), calc(var(--ry) * -0.7071 + -2px), -76.6px) scale(0.625); opacity:0.058; }
  .exp-orb:nth-child(5) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.0000), calc(var(--ry) * -1.0000 + -2px), -100.0px) scale(0.550); opacity:0.000; }
  .exp-orb:nth-child(6) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7071), calc(var(--ry) * -0.7071 + -2px), -76.6px) scale(0.625); opacity:0.058; }
  .exp-orb:nth-child(7) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -1.0000), calc(var(--ry) * -0.0000 + -2px), -20.0px) scale(0.805); opacity:0.500; }
  .exp-orb:nth-child(8) { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7071), calc(var(--ry) * 0.7071 + -2px), 36.6px) scale(0.985); opacity:0.942; }
}

.exp-orb:nth-child(1) { animation-delay: -0.000s; }
.exp-orb:nth-child(2) { animation-delay: -3.000s; }
.exp-orb:nth-child(3) { animation-delay: -6.000s; }
.exp-orb:nth-child(4) { animation-delay: -9.000s; }
.exp-orb:nth-child(5) { animation-delay: -12.000s; }
.exp-orb:nth-child(6) { animation-delay: -15.000s; }
.exp-orb:nth-child(7) { animation-delay: -18.000s; }
.exp-orb:nth-child(8) { animation-delay: -21.000s; }

@keyframes exp-orbit {
  0.000% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.0000), calc(var(--ry) * 1.0000 + -2px), 60.0px) scale(1.060); opacity:1.000; }
  2.083% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.1305), calc(var(--ry) * 0.9914 + -2px), 59.3px) scale(1.058); opacity:1.000; }
  4.167% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.2588), calc(var(--ry) * 0.9659 + -2px), 57.3px) scale(1.051); opacity:0.999; }
  6.250% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.3827), calc(var(--ry) * 0.9239 + -2px), 53.9px) scale(1.041); opacity:0.996; }
  8.333% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.5000), calc(var(--ry) * 0.8660 + -2px), 49.3px) scale(1.026); opacity:0.987; }
  10.417% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.6088), calc(var(--ry) * 0.7934 + -2px), 43.5px) scale(1.007); opacity:0.970; }
  12.500% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7071), calc(var(--ry) * 0.7071 + -2px), 36.6px) scale(0.985); opacity:0.942; }
  14.583% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7934), calc(var(--ry) * 0.6088 + -2px), 28.7px) scale(0.960); opacity:0.900; }
  16.667% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.8660), calc(var(--ry) * 0.5000 + -2px), 20.0px) scale(0.933); opacity:0.844; }
  18.750% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9239), calc(var(--ry) * 0.3827 + -2px), 10.6px) scale(0.903); opacity:0.773; }
  20.833% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9659), calc(var(--ry) * 0.2588 + -2px), 0.7px) scale(0.871); opacity:0.690; }
  22.917% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9914), calc(var(--ry) * 0.1305 + -2px), -9.6px) scale(0.838); opacity:0.597; }
  25.000% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 1.0000), calc(var(--ry) * 0.0000 + -2px), -20.0px) scale(0.805); opacity:0.500; }
  27.083% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9914), calc(var(--ry) * -0.1305 + -2px), -30.4px) scale(0.772); opacity:0.403; }
  29.167% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9659), calc(var(--ry) * -0.2588 + -2px), -40.7px) scale(0.739); opacity:0.310; }
  31.250% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.9239), calc(var(--ry) * -0.3827 + -2px), -50.6px) scale(0.707); opacity:0.227; }
  33.333% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.8660), calc(var(--ry) * -0.5000 + -2px), -60.0px) scale(0.678); opacity:0.156; }
  35.417% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7934), calc(var(--ry) * -0.6088 + -2px), -68.7px) scale(0.650); opacity:0.100; }
  37.500% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.7071), calc(var(--ry) * -0.7071 + -2px), -76.6px) scale(0.625); opacity:0.058; }
  39.583% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.6088), calc(var(--ry) * -0.7934 + -2px), -83.5px) scale(0.603); opacity:0.030; }
  41.667% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.5000), calc(var(--ry) * -0.8660 + -2px), -89.3px) scale(0.584); opacity:0.013; }
  43.750% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.3827), calc(var(--ry) * -0.9239 + -2px), -93.9px) scale(0.569); opacity:0.004; }
  45.833% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.2588), calc(var(--ry) * -0.9659 + -2px), -97.3px) scale(0.559); opacity:0.001; }
  47.917% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.1305), calc(var(--ry) * -0.9914 + -2px), -99.3px) scale(0.552); opacity:0.000; }
  50.000% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * 0.0000), calc(var(--ry) * -1.0000 + -2px), -100.0px) scale(0.550); opacity:0.000; }
  52.083% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.1305), calc(var(--ry) * -0.9914 + -2px), -99.3px) scale(0.552); opacity:0.000; }
  54.167% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.2588), calc(var(--ry) * -0.9659 + -2px), -97.3px) scale(0.559); opacity:0.001; }
  56.250% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.3827), calc(var(--ry) * -0.9239 + -2px), -93.9px) scale(0.569); opacity:0.004; }
  58.333% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.5000), calc(var(--ry) * -0.8660 + -2px), -89.3px) scale(0.584); opacity:0.013; }
  60.417% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.6088), calc(var(--ry) * -0.7934 + -2px), -83.5px) scale(0.603); opacity:0.030; }
  62.500% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7071), calc(var(--ry) * -0.7071 + -2px), -76.6px) scale(0.625); opacity:0.058; }
  64.583% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7934), calc(var(--ry) * -0.6088 + -2px), -68.7px) scale(0.650); opacity:0.100; }
  66.667% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.8660), calc(var(--ry) * -0.5000 + -2px), -60.0px) scale(0.677); opacity:0.156; }
  68.750% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9239), calc(var(--ry) * -0.3827 + -2px), -50.6px) scale(0.707); opacity:0.227; }
  70.833% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9659), calc(var(--ry) * -0.2588 + -2px), -40.7px) scale(0.739); opacity:0.310; }
  72.917% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9914), calc(var(--ry) * -0.1305 + -2px), -30.4px) scale(0.772); opacity:0.403; }
  75.000% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -1.0000), calc(var(--ry) * -0.0000 + -2px), -20.0px) scale(0.805); opacity:0.500; }
  77.083% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9914), calc(var(--ry) * 0.1305 + -2px), -9.6px) scale(0.838); opacity:0.597; }
  79.167% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9659), calc(var(--ry) * 0.2588 + -2px), 0.7px) scale(0.871); opacity:0.690; }
  81.250% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.9239), calc(var(--ry) * 0.3827 + -2px), 10.6px) scale(0.903); opacity:0.773; }
  83.333% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.8660), calc(var(--ry) * 0.5000 + -2px), 20.0px) scale(0.933); opacity:0.844; }
  85.417% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7934), calc(var(--ry) * 0.6088 + -2px), 28.7px) scale(0.960); opacity:0.900; }
  87.500% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.7071), calc(var(--ry) * 0.7071 + -2px), 36.6px) scale(0.985); opacity:0.942; }
  89.583% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.6088), calc(var(--ry) * 0.7934 + -2px), 43.5px) scale(1.007); opacity:0.970; }
  91.667% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.5000), calc(var(--ry) * 0.8660 + -2px), 49.3px) scale(1.026); opacity:0.987; }
  93.750% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.3827), calc(var(--ry) * 0.9239 + -2px), 53.9px) scale(1.041); opacity:0.996; }
  95.833% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.2588), calc(var(--ry) * 0.9659 + -2px), 57.3px) scale(1.051); opacity:0.999; }
  97.917% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.1305), calc(var(--ry) * 0.9914 + -2px), 59.3px) scale(1.058); opacity:1.000; }
  100.000% { transform: translate(-50%, -50%) translate3d(calc(var(--rx) * -0.0000), calc(var(--ry) * 1.0000 + -2px), 60.0px) scale(1.060); opacity:1.000; }
}


/* ── 03 Pick your industry = vertical infinite gallery feed ──────────────────
   Two columns of real journey cards (mirroring the gallery .tg-card design:
   sector-accent stripe, industry icon badge, eyebrow, name, sub) rise
   bottom→top forever. Each column's track holds its cards duplicated 2× and
   animates translateY 0 → -50% (the duplicate returns the start to origin →
   seamless). Inter-card spacing MUST be a trailing margin-bottom (NOT flex
   gap): like the old marquee, gap omits a trailing gap so -50% would hitch.
   Top+bottom mask fades cards in/out at the edges; the two columns run at
   different speeds so they don't move in lockstep. Sector accent comes from a
   per-card class (--exp-accent), never an inline style — PUBLIC_CSP forbids
   inline style/script. The cards are decorative (aria-hidden); the crawlable
   gallery links stay server-rendered in the modal + the grid below. */
.exp-c-media--feed {
    aspect-ratio: auto; height: 200px; padding: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.exp-feed { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; height: 100%; padding: 0 .65rem; box-sizing: border-box; }
.exp-feed-col { overflow: hidden; }
.exp-feed-track { display: flex; flex-direction: column; animation: exp-feed 32s linear infinite; will-change: transform; }
.exp-feed-col--b .exp-feed-track { animation-duration: 40s; }
/* Hover focus (see the orbit block): hovering the sibling card quiets this feed. */
.exp-cards:has(.exp-c:hover) .exp-c:not(:hover) .exp-feed-track { animation-play-state: paused; }
@keyframes exp-feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .exp-feed-track { animation: none; } }
.exp-fcard {
    position: relative; display: flex; flex-direction: column; gap: .4rem;
    margin-bottom: .55rem; padding: .6rem .75rem .6rem .9rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 6%, transparent), color-mix(in srgb, var(--inv-bg-color) 2%, transparent)), var(--main-bg-color);
    box-shadow: 0 10px 22px -16px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    overflow: hidden;
}
.exp-fcard-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 10px 0 0 10px; background: var(--exp-accent, var(--blurple)); opacity: .85; }
.exp-fcard-icon {
    width: 25px; height: 25px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; color: var(--exp-accent, var(--blurple));
    background: color-mix(in srgb, var(--exp-accent, var(--blurple)) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exp-accent, var(--blurple)) 26%, transparent);
}
.exp-fcard-icon svg { width: 14px; height: 14px; display: block; }
.exp-fcard-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.exp-fcard-industry { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--exp-accent, color-mix(in srgb, var(--inv-bg-color) 45%, transparent)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-fcard-name { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .8rem; font-weight: 650; color: var(--inv-bg-color); line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-fcard-sub { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .64rem; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Curated 6-hue sector palette (--sector-* in style-variables.css); mirrors the
   SPA + live-gallery SECTOR_COLORS so every gallery reads the same on-brand set. */
.exp-fcard--tech { --exp-accent: var(--sector-blue, #4f6bed); }
.exp-fcard--fin { --exp-accent: var(--sector-cyan, #0fa8c0); }
.exp-fcard--health { --exp-accent: var(--sector-green, #2fa36b); }
.exp-fcard--industrial { --exp-accent: var(--sector-amber, #e0a02e); }
.exp-fcard--consumer { --exp-accent: var(--sector-coral, #e5484d); }
.exp-fcard--prof { --exp-accent: var(--sector-magenta, #9d4edd); }