/* ==========================================================================
   Blog / Resources / Community — Flowty pass
   --------------------------------------------------------------------------
   Loads AFTER css/collection.css (where present) and AFTER css/home-flow.css,
   which supplies the shared system (tokens, preloader, buttons, arrows,
   marquee, CTA, footer, dock).

   Page sections live here under per-page prefixes:

   1. blx- rules for the rebuilt blog index (editorial cover, numbered
      story rows, cursor-chasing photo preview).
   2. rsx- rules for the rebuilt resources index.
   3. flow-community__* rules for the community sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Blog index — editorial issue (blx- prefix)
   Deliberately NOT the resources formula (no marquee hero, no card grid).
   The hero is a measured replica of the flowty.co referral-program hero:
   giant Outfit type top-left, wordmark top-right, dek + button row +
   footnote bottom-left, and a floating phone over the violet bloom with
   a frosted store card overlapping its right edge. Then every story as a
   numbered hairline row. On mouse devices a photo preview chases the
   cursor between rows (js/blog-stage.js); touch and reduced motion get
   inline thumbnails instead.
   -------------------------------------------------------------------------- */

/* The hero is the creative-hero cover (github.com/Haza1410/creative-hero)
   rebuilt in the site's language: one centred word over the cursor-driven
   fluid ink, a corner wordmark, a vertical scroll tag on the left edge and
   the action row beneath. No device, no cards — the canvas is the picture.
   The type stack stays Outfit, shared with the rest of the Flowty pages. */

.blx-hero {
    position: relative;
    height: 100svh;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--uf-ink, #0a0a0b);
    color: #ceced7;
    font-family: 'Outfit', var(--flow-display);
    overflow: hidden;
}

/* Bloom: the static floor under the ink — a blurred violet streak that
   keeps the stage from being flat black before the first splat lands, and
   the whole background when WebGL or motion is unavailable. */
.blx-hero__bloom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.75;
}

.blx-hero__bloom::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    width: 92%;
    height: 120%;
    transform: translateX(-50%) rotate(-18deg);
    background: linear-gradient(
        200deg,
        rgba(99, 79, 204, 0) 12%,
        rgba(104, 84, 214, 0.3) 38%,
        rgba(122, 94, 236, 0.26) 56%,
        rgba(64, 48, 148, 0.14) 76%,
        transparent 92%
    );
    filter: blur(80px);
}

.blx-hero__bloom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(46% 46% at 50% 48%, rgba(126, 104, 224, 0.2), transparent 72%);
    filter: blur(60px);
}

/* Fluid ink canvas: the creative-hero WebGL simulation (js/fluid-hero.js)
   sitting between the bloom and the content. It draws additively over the
   ink, so the swirls read as lit brand-coloured smoke rather than paint. */
.blx-hero__fluid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0.85;
}

/* Ghost wordmark: cbwebsitedesign.co.uk sets its brand phrase full-bleed
   behind the hero in white at 0.35 and paints the transparent ink canvas on
   top, so the swirls appear to reveal it. Same trick, lower opacity — 0.35
   white would glare on our near-black stage. */
.blx-hero__ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-family: 'Outfit', var(--flow-display);
    font-size: 15.5vw;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #ffffff;
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
}

/* Veil: light now that the headline is small and the ghost needs to stay
   visible through it — just enough to hold the copy at the bottom. */
.blx-hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(52% 34% at 50% 56%, rgba(10, 10, 11, 0.42), rgba(10, 10, 11, 0) 76%),
        linear-gradient(0deg, rgba(10, 10, 11, 0.5) 0%, rgba(10, 10, 11, 0) 30%);
}

/* Centred stack: the word, then the copy and actions beneath it */
.blx-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 clamp(1.5rem, 6vw, 5rem);
}

/* Headline: their h1 is 45px at 1440 (3.13vw) with -0.05em tracking — a
   measured line over a giant ghost, not a giant line itself. Ours carries a
   single short word, so it runs a little larger. */
.blx-hero__title {
    margin: 0;
    font-family: inherit;
    font-weight: 500;
    font-size: clamp(3rem, 6.4vw, 7rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

/* The gradient fill, built exactly as they build it: 45deg through four
   stops, background sized 200% and walked across the box on a 15s loop,
   clipped to the glyphs. Their stops are orange → red → purple → teal;
   ours are the brand ramp — indigo, periwinkle, violet, lime. */
.blx-hero__grad {
    background-image: linear-gradient(45deg, #5557e8, #8b8dff, #7b3fa8, #c8f45d);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: blx-gradient 15s ease infinite;
}

@keyframes blx-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.blx-hero__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(1.75rem, 3.4vw, 3rem);
}

.blx-hero__sub {
    max-width: 46ch;
    margin: 0 0 clamp(1.5rem, 2.4vw, 2.2rem);
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: rgba(206, 206, 215, 0.82);
}

.blx-hero__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blx-hero__pill {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 32px;
    border-radius: 17px;
    background: #ceced7;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    color: #0a0a0b;
    text-decoration: none;
    transition: background 0.3s;
}

.blx-hero__pill:hover { background: #ffffff; }

.blx-hero__ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 17px;
    background: rgba(10, 10, 11, 0.55);
    border: 1px solid rgba(206, 206, 215, 0.14);
    font-size: 0.9rem;
    color: #ceced7;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s;
}

.blx-hero__ibtn--alt {
    background: rgba(23, 25, 29, 0.62);
    border-color: transparent;
}

.blx-hero__ibtn:hover { background: #22242a; }

/* Index head: eyebrow pill left, editorial text filters right */
.blx-index__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    flex-wrap: wrap;
}

/* Filters as quiet text links with a growing underline - not pills */
.blx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.7rem;
}

.blx-chip {
    position: relative;
    padding: 0.45rem 0.1rem;
    border: none;
    background: none;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--flow-dim);
    cursor: pointer;
    transition: color 0.3s;
}

.blx-chip::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--flow-accent-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--uf-ease, ease);
}

.blx-chip:hover { color: #efeaff; }

.blx-chip.is-active { color: #f4f2ff; }
.blx-chip.is-active::after { transform: scaleX(1); }

/* Category chip inside the rows */
.blx-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--flow-hairline);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfcfd6;
}

/* The index: numbered hairline rows with display-type titles */
.blx-index__rows {
    margin-top: clamp(2.2rem, 5vh, 3.2rem);
}

.blx-story { border-top: 1px solid var(--flow-hairline); }
.blx-story:last-of-type { border-bottom: 1px solid var(--flow-hairline); }

.blx-story__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 3rem);
    padding: clamp(1.8rem, 4.5vh, 3rem) 0.25rem;
    text-decoration: none;
    color: inherit;
}

.blx-story__no {
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-variant-numeric: tabular-nums;
    color: var(--flow-faint);
}

.blx-story__main { min-width: 0; }

.blx-story h2 {
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 4.4vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #d9d9dd;
    transition: color 0.3s, transform 0.45s var(--uf-ease, ease);
}

.blx-story__link:hover h2 {
    color: #ffffff;
    transform: translateX(10px);
}

.blx-story__dek {
    display: block;
    margin: 0.7rem 0 0;
    max-width: 58ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--flow-dim);
}

.blx-story__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--flow-faint);
}

.blx-story__link:hover .flow-arrow {
    transform: translateX(4px);
    background: var(--flow-accent);
}

/* Inline thumbnail: only for touch / reduced motion (see media queries) */
.blx-story__thumb { display: none; }

/* No hover, coarse pointer, or reduced motion: put a plain thumbnail in
   each row instead. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .blx-story__thumb {
        display: block;
        width: clamp(84px, 14vw, 132px);
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
    }

    .blx-story__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* --------------------------------------------------------------------------
   Resources index — rebuilt sections (rsx- prefix)
   The constellation retired; the page is now a statement hero, a featured
   trio of mixed cards, and the full catalogue as hairline rows.
   -------------------------------------------------------------------------- */

.rsx-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fills the screen, whatever the browser counts as the screen: svh stops
       short of the visible area in browsers with no retracting chrome, which
       left a band of the next section showing under the fold. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 8rem clamp(1.5rem, 4vw, 4.5rem) 5rem;
    background: var(--uf-ink, #0a0a0b);
    color: var(--flow-text);
    text-align: center;
    overflow: hidden;
}

.rsx-hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(45% 55% at 70% 28%, rgba(108, 76, 241, 0.30), transparent 70%),
        radial-gradient(35% 45% at 22% 72%, rgba(139, 92, 246, 0.14), transparent 70%);
    pointer-events: none;
}

/* The glow is clipped at the hero's bottom edge, which reads as a seam against
   the section below. This settles it back into the ink before the cut. */
.rsx-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22vh;
    background: linear-gradient(180deg, rgba(10, 10, 11, 0), var(--uf-ink, #0a0a0b));
    pointer-events: none;
}

.rsx-hero__title {
    position: relative;
    margin: 0;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(3.2rem, 9.5vw, 8.6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #dedee2;
}

.rsx-hero__sub {
    position: relative;
    margin: 1.8rem auto 0;
    max-width: 32rem;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.55;
    color: var(--flow-dim);
}

/* Kinetic type: three full-width marquee rows fill the hero, running at
   different speeds and directions, with the title punched over them. The
   rows are giant and deliberately dim - texture, not content (aria-hidden;
   the real resource list is below). */
.rsx-hero__rows {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 5.5rem 0 2.5rem;
}

.rsx-hero__rows .flow-marquee { margin: 0; }

.rsx-hero__rows .flow-marquee__track {
    font-size: clamp(2.2rem, 5.6vw, 5rem);
    font-weight: 500;
    color: #26262f;
}

.rsx-hero__rows .flow-marquee__track em {
    font-style: normal;
    color: #3d2f66;
}

.rsx-hero__row--accent .flow-marquee__track { color: #362a5c; }
.rsx-hero__row--accent .flow-marquee__track em { color: #56449a; }

.rsx-hero__row--reverse .flow-marquee__track {
    animation-direction: reverse;
    animation-duration: 36s;
}

.rsx-hero__row--slow .flow-marquee__track { animation-duration: 48s; }

/* The title floats above the rows on a soft ink pool for legibility */
.rsx-hero__center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 6vw, 5rem);
    background: radial-gradient(closest-side, rgba(10, 10, 11, 0.94) 30%, rgba(10, 10, 11, 0.6) 70%, transparent 100%);
}

/* Tag chip shared by cards and rows */
.rsx-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--flow-hairline);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfcfd6;
}

/* Featured trio */
.rsx-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(3rem, 7vh, 5rem);
}

.rsx-fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 460px;
    padding: clamp(1.6rem, 2.8vw, 2.4rem);
    border-radius: var(--flow-radius);
    background: var(--flow-card-dark);
    border: 1px solid rgba(214, 214, 222, 0.07);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s var(--uf-ease, ease), border-color 0.4s;
}

.rsx-fcard:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.4); }

.rsx-fcard__body { position: relative; z-index: 1; }

.rsx-fcard h3 {
    margin: 1rem 0 0.6rem;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: #dedee2;
}

.rsx-fcard p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--flow-dim);
}

.rsx-fcard__meta {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--flow-faint);
}

.rsx-fcard__visual {
    position: absolute;
    right: -8%;
    bottom: -12%;
    width: 62%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.rsx-fcard__visual img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(5, 4, 16, 0.45));
}

.rsx-fcard .flow-arrow {
    position: absolute;
    left: clamp(1.6rem, 2.8vw, 2.4rem);
    bottom: clamp(1.6rem, 2.8vw, 2.4rem);
}

.rsx-fcard:hover .flow-arrow { transform: translateX(4px); background: var(--flow-accent); }

.rsx-fcard--violet {
    background:
        radial-gradient(120% 130% at 78% 0%, rgba(139, 92, 246, 0.55), transparent 62%),
        linear-gradient(155deg, #5b3bdd 0%, #472eb8 55%, #2f1c86 100%);
    border-color: rgba(139, 92, 246, 0.45);
}

.rsx-fcard--violet h3 { color: #f4f2ff; }
.rsx-fcard--violet p { color: rgba(238, 234, 255, 0.72); }
.rsx-fcard--violet .rsx-fcard__meta { color: rgba(238, 234, 255, 0.5); }
.rsx-fcard--violet .rsx-tag { border-color: rgba(244, 242, 255, 0.3); color: #efeaff; }

.rsx-fcard--light { background: var(--flow-card-light); border-color: transparent; }
.rsx-fcard--light h3 { color: var(--flow-ink-on-light); }
.rsx-fcard--light p { color: var(--flow-dim-on-light); }
.rsx-fcard--light .rsx-fcard__meta { color: rgba(16, 16, 20, 0.45); }
.rsx-fcard--light .rsx-tag {
    border-color: rgba(16, 16, 20, 0.2);
    background: rgba(16, 16, 20, 0.05);
    color: rgba(16, 16, 20, 0.7);
}

/* Radar on the quiz card: concentric rings + a slow sweep */
.rsx-radar {
    position: relative;
    display: block;
    width: 240px;
    height: 240px;
    border-radius: 50%;
}

.rsx-radar__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(244, 242, 255, 0.28);
}

.rsx-radar__ring:nth-child(2) { inset: 18%; border-color: rgba(244, 242, 255, 0.2); }
.rsx-radar__ring:nth-child(3) { inset: 36%; border-color: rgba(244, 242, 255, 0.14); }

.rsx-radar__sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(244, 242, 255, 0.35), transparent 24%);
    animation: rsx-sweep 5s linear infinite;
}

@keyframes rsx-sweep {
    to { transform: rotate(360deg); }
}

.rsx-radar__dot {
    position: absolute;
    top: 26%;
    left: 62%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f4f2ff;
    box-shadow: 0 0 14px rgba(244, 242, 255, 0.9);
}

/* All resources: hairline rows */
.rsx-all__sub {
    margin: 1rem 0 0;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--flow-dim);
}

.rsx-rows {
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

.rsx-row {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.5rem);
    padding: clamp(1.4rem, 3vh, 2rem) 0.25rem;
    border-top: 1px solid var(--flow-hairline);
    text-decoration: none;
    color: inherit;
}

.rsx-row:last-of-type { border-bottom: 1px solid var(--flow-hairline); }

.rsx-row .rsx-tag { flex: 0 0 auto; min-width: 92px; justify-content: center; }

.rsx-row__meta { flex: 1 1 auto; min-width: 0; }

.rsx-row h3 {
    margin: 0 0 0.3rem;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.3vw, 1.8rem);
    letter-spacing: -0.02em;
    color: #d9d9dd;
    transition: color 0.3s;
}

.rsx-row p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--flow-dim);
}

.rsx-row:hover h3 { color: #ffffff; }
.rsx-row:hover .flow-arrow { transform: translateX(4px); background: var(--flow-accent); }

.rsx-langnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: clamp(2.5rem, 6vh, 4rem) 0 0;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--flow-faint);
}

.rsx-langnote i { color: var(--flow-accent-bright); }

/* --------------------------------------------------------------------------
   Community — rebuilt sections (flow-community prefix)
   -------------------------------------------------------------------------- */

.flow-community-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88svh;
    padding: 8rem clamp(1.5rem, 4vw, 4.5rem) 5rem;
    background: var(--uf-ink, #0a0a0b);
    color: var(--flow-text);
    text-align: center;
    overflow: hidden;
}

.flow-community-hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(45% 55% at 30% 25%, rgba(108, 76, 241, 0.30), transparent 70%),
        radial-gradient(35% 45% at 78% 70%, rgba(139, 92, 246, 0.14), transparent 70%);
    pointer-events: none;
}

.flow-community-hero__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--flow-hairline);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: 0.85rem;
    color: #cfcfd6;
}

.flow-community-hero__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--flow-accent-bright);
}

.flow-community-hero__title {
    position: relative;
    margin: 1.6rem 0 0;
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(3rem, 9vw, 8rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #dedee2;
}

.flow-community-hero__title em {
    font-style: normal;
    color: var(--flow-accent-bright);
}

.flow-community-hero__sub {
    position: relative;
    margin: 1.8rem auto 0;
    max-width: 36rem;
    font-family: var(--flow-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.55;
    color: var(--flow-dim);
}

.flow-community-hero__actions {
    position: relative;
    margin-top: 2.4rem;
}

/* Floating multilingual greetings - the 16-language community, literally
   saying hello around the title. Decorative (aria-hidden); the greetings
   are real language, so they carry no i18n keys. */
.flow-community-hero__bubbles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.flow-cbubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--flow-hairline);
    font-family: var(--flow-display);
    font-weight: 500;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    color: #cfcfd6;
    animation: flow-cbubble-float 9s ease-in-out infinite;
}

.flow-cbubble--violet {
    background: linear-gradient(155deg, #5b3bdd, #472eb8);
    border-color: rgba(139, 92, 246, 0.45);
    color: #efeaff;
}

.flow-cbubble--light {
    background: var(--flow-card-light);
    border-color: transparent;
    color: var(--flow-ink-on-light);
}

.flow-cbubble--accent {
    background: var(--flow-accent);
    border-color: transparent;
    color: #f4f2ff;
}

/* Positioned in the clear bands above the title and below the subtitle -
   the title spans nearly the full width, so nothing sits at its latitude. */
.flow-cbubble:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.flow-cbubble:nth-child(2) { top: 13%; right: 15%; animation-delay: -2s; }
.flow-cbubble:nth-child(3) { top: 62%; left: 7%; animation-delay: -4s; }
.flow-cbubble:nth-child(4) { top: 58%; right: 8%; animation-delay: -6s; }
.flow-cbubble:nth-child(5) { bottom: 12%; left: 22%; animation-delay: -3s; }
.flow-cbubble:nth-child(6) { bottom: 26%; right: 21%; animation-delay: -7s; }
.flow-cbubble:nth-child(7) { bottom: 9%; left: 42%; animation-delay: -5s; }
.flow-cbubble:nth-child(8) { bottom: 13%; right: 33%; animation-delay: -1s; }

@keyframes flow-cbubble-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* Three pillars as mixed flow cards */
.flow-community__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(3rem, 7vh, 5rem);
}

.flow-community__grid .flow-card { min-height: 300px; }

.flow-community__grid .flow-card i {
    font-size: 1.5rem;
    margin-bottom: 1.4rem;
    color: var(--flow-accent-bright);
}

.flow-community__grid .flow-card--violet {
    background:
        radial-gradient(120% 130% at 78% 0%, rgba(139, 92, 246, 0.55), transparent 62%),
        linear-gradient(155deg, #5b3bdd 0%, #472eb8 55%, #2f1c86 100%);
    border-color: rgba(139, 92, 246, 0.45);
}

.flow-community__grid .flow-card--violet h3 { color: #f4f2ff; }
.flow-community__grid .flow-card--violet p { color: rgba(238, 234, 255, 0.72); }
.flow-community__grid .flow-card--violet i { color: #cfc2ff; }

.flow-community__grid .flow-card--light i { color: var(--flow-accent); }

/* Social row inside the CTA */
.flow-community__socials {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (max-width: 900px) {
    /* The cover stays centred on phones — there is nothing else in it to
       stack. It just gets shorter, and the ink sits further back so the
       copy holds up on a small, bright screen. */
    .blx-hero {
        height: 88svh;
        min-height: 520px;
        padding: 5rem 1.25rem 3.5rem;
    }
    .blx-hero__fluid { opacity: 0.62; }
    .blx-hero__veil {
        background:
            radial-gradient(70% 40% at 50% 50%, rgba(10, 10, 11, 0.5), rgba(10, 10, 11, 0) 80%),
            linear-gradient(0deg, rgba(10, 10, 11, 0.66) 0%, rgba(10, 10, 11, 0) 40%),
            linear-gradient(180deg, rgba(10, 10, 11, 0.5) 0%, rgba(10, 10, 11, 0) 30%);
    }
    /* Twelve characters across a phone: 15.5vw would bleed off both edges,
       and the phrase is the point, so it comes down until the line fits. */
    .blx-hero__ghost {
        font-size: 18vw;
        opacity: 0.1;
    }
    .blx-hero__title { font-size: clamp(3.25rem, 16vw, 5.5rem); }
    .blx-hero__sub { max-width: 32ch; font-size: 0.95rem; }
    .blx-hero__pill { height: 44px; padding: 0 26px; border-radius: 16px; }
    .blx-hero__ibtn { width: 44px; height: 44px; border-radius: 16px; font-size: 0.95rem; }

    .blx-index__head { flex-direction: column; align-items: flex-start; }

    /* Rows tighten: number + copy + thumb, the circle arrow bows out */
    .blx-story__link { grid-template-columns: auto minmax(0, 1fr) auto; }
    .blx-story__link .flow-arrow { display: none; }
    .blx-story h2 { font-size: clamp(1.5rem, 6.4vw, 2.4rem); }

    .flow-community__grid { grid-template-columns: 1fr; }
    .flow-community-hero { min-height: 70svh; }

    /* Room is scarce: keep four greeting bubbles, park the rest */
    .flow-cbubble:nth-child(3),
    .flow-cbubble:nth-child(4),
    .flow-cbubble:nth-child(7),
    .flow-cbubble:nth-child(8) { display: none; }

    .rsx-featured__grid { grid-template-columns: 1fr; }
    .rsx-fcard { min-height: 380px; }
    .rsx-hero { min-height: 100vh; min-height: 100dvh; }
    .rsx-hero__rows { padding: 5rem 0 2rem; }
    .rsx-hero__center { padding: 2rem 1.25rem; }

    .rsx-row { flex-wrap: wrap; }
    .rsx-row .rsx-tag { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .rsx-radar__sweep { animation: none; opacity: 0.4; }
    .rsx-fcard,
    .rsx-row h3,
    .rsx-row .flow-arrow { transition: none; }

    /* js/fluid-hero.js removes the canvas here, so the static bloom is the
       whole background again — give it back its full strength, and hold the
       headline gradient still on its opening frame. */
    .blx-hero__bloom { opacity: 1; }
    .blx-hero__grad { animation: none; }
    .blx-story h2,
    .blx-story__link .flow-arrow,
    .blx-chip::after { transition: none; }
    .blx-story__link:hover h2 { transform: none; }

    .flow-cbubble { animation: none; }

    /* Marquee rows stop via home-flow.css's global marquee kill; the
       aria-hidden duplicate tracks vanish with it, leaving one static row. */
}

/* --------------------------------------------------------------------------
   Resources — merged Community section (rsx-community)
   Cards and socials reuse the flow-community styles above; this block only
   dresses the section heading and intro line.
   -------------------------------------------------------------------------- */

.rsx-community .flow-h2 em {
    font-style: normal;
    color: var(--flow-accent-bright);
}

.rsx-community__sub {
    max-width: 56ch;
    margin: 1.2rem auto 2.8rem;
    text-align: center;
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    line-height: 1.65;
    color: var(--flow-dim);
}

.rsx-community .flow-h2 {
    text-align: center;
}

.rsx-community .flow-community__socials {
    margin-top: 2.6rem;
}