/* ─── Page Header ───────────────────────────── */

.slux-fbh {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(110px, 7.64vw) 0 max(90px, 6.25vw);
    isolation: isolate;
    overflow: hidden;
    /* Feature image + legibility overlay as background layers */
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.52) 0%,
            rgba(0,0,0,0.32) 38%,
            rgba(0,0,0,0.38) 58%,
            rgba(0,0,0,0.78) 82%,
            rgba(0,0,0,0.92) 100%),
        var(--fbh-bg-image, transparent) center 30% / cover no-repeat;
}

.slux-fbh::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--accent-color) 7%, transparent) 1px, transparent 1px),
        radial-gradient(ellipse 50% 130% at 5% 50%, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 55%),
        radial-gradient(ellipse 30% 60% at 90% 15%, color-mix(in srgb, var(--accent-color) 5%, transparent), transparent 65%);
    background-size: 28px 28px, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: -1;
    animation: slux-fbh-glow 14s ease-in-out infinite alternate;
}

.slux-fbh::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        color-mix(in srgb, var(--accent-color) 65%, transparent) 18%,
        color-mix(in srgb, var(--accent-color) 28%, transparent) 55%,
        transparent 100%);
    transform-origin: left;
    animation: slux-fbh-line-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes slux-fbh-glow {
    0%   { opacity: 0.65; }
    100% { opacity: 1; }
}

@keyframes slux-fbh-line-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─── Scroll Indicator ──────────────────────── */

.slux-fbh-scroll {
    position: absolute;
    bottom: max(32px, 2.22vw);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.slux-fbh-scroll-chev {
    width: 34px;
    height: 52px;
    position: relative;
}

.slux-fbh-sc {
    position: absolute;
    left: 50%;
    top: 0;
    width: 22px;
    height: 22px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1.5px solid var(--accent-color);
    border-bottom: 1.5px solid var(--accent-color);
    border-radius: 1px;
    opacity: 0;
    animation: slux-sc-travel 1.8s ease-out infinite;
}

.slux-fbh-sc.c1 { animation-delay: 0s; }
.slux-fbh-sc.c2 { animation-delay: 0.18s; top: 11px; border-color: color-mix(in srgb, var(--accent-color) 65%, transparent); }
.slux-fbh-sc.c3 { animation-delay: 0.36s; top: 22px; border-color: color-mix(in srgb, var(--accent-color) 38%, transparent); }

@keyframes slux-sc-travel {
    0%   { opacity: 0; transform: translate(-50%, -6px) rotate(45deg); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 9px) rotate(45deg); }
}

@media (max-width: 479px) {
    .slux-fbh-scroll { display: none; }
    .slux-fbh-title { font-size: 28px !important; }
    .slux-fb-title  { font-size: 30px !important; overflow-wrap: break-word; word-break: break-word; }
}

/* ─────────────────────────────────────────────── */

.slux-fbh-inner {
    width: calc(56vw + 2 * var(--small-padding));
    min-width: min(calc(800px + 2 * var(--small-padding)), calc(100% - max(48px, 3.33vw)));
    margin: 0 auto;
    padding: 0 max(24px, calc(1.67vw * var(--scale)));
    display: flex;
    flex-direction: column;
    gap: max(10px, 0.69vw);
}

.slux-fbh-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font2);
    font-size: max(11px, calc(0.76vw * var(--scale)));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 4px;
}

.slux-fbh-eyebrow::before {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent-color);
    flex-shrink: 0;
}

.slux-fbh-title {
    font-family: var(--font1);
    font-size: max(52px, calc(3.61vw * var(--scale)));
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
    color: inherit;
    overflow-wrap: break-word;
    word-break: break-word;
    animation: slux-fbh-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.slux-fbh-sub {
    font-family: var(--font2);
    font-size: max(14px, calc(0.97vw * var(--scale)));
    line-height: 1.6;
    opacity: 0.65;
    margin: 0;
    max-width: 48ch;
    animation: slux-fbh-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.slux-fbh-stats {
    display: flex;
    align-items: center;
    gap: max(24px, 1.67vw);
    padding-top: max(18px, 1.25vw);
    margin-top: max(6px, 0.42vw);
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
    animation: slux-fbh-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

@keyframes slux-fbh-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { transform: translateY(0); }
}

.slux-fbh-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@keyframes slux-live-ripple {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.slux-fbh-stat-val {
    font-family: var(--font1);
    font-size: max(20px, calc(1.39vw * var(--scale)));
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    line-height: 1;
}

.slux-fbh-stat-live,
.slux-fbh-stat-paid {
    display: flex;
    align-items: center;
    gap: 9px;
}

.slux-fbh-stat-live::before,
.slux-fbh-stat-paid::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}

.slux-fbh-stat-live::before {
    animation: slux-live-ripple 2s ease-out infinite;
}

.slux-fbh-stat-paid::before {
    opacity: 0.45;
}

.slux-fbh-stat-label {
    font-family: var(--font2);
    font-size: max(10px, calc(0.69vw * var(--scale)));
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.58;
    line-height: 1;
}

.slux-fbh-divider {
    width: 1px;
    height: 26px;
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
    flex-shrink: 0;
}

/* ─── Tag page body wrapper ─────────────────── */

.slux-fb-page-body {
    padding-top: max(80px, calc(5.55vw * var(--scale)));
    padding-bottom: max(80px, calc(5.55vw * var(--scale)));
}

/* ─── Module List ───────────────────────────── */

.slux-fb {
    display: block !important;
    width: 100%;
    margin-bottom: max(40px, 2.78vw);
}

.slux-fb-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: max(24px, 1.67vw);
    animation: slux-fb-in 0.7s ease both 0.15s;
}

.slux-fb-eyebrow {
    display: flex;
    align-items: center;
    font-family: var(--font2);
    font-size: max(13px, calc(0.9vw * var(--scale)));
    letter-spacing: 0.16em;
    text-transform: var(--text-style) !important;
    color: var(--accent-color);
}

.slux-fb-eyebrow::after {
    content: "_";
    margin-left: 2px;
    animation: slux-fb-cursor 1.1s step-start infinite;
}

@keyframes slux-fb-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.slux-fb-title {
    font-family: var(--font1);
    font-size: max(42px, calc(2.92vw * var(--scale)));
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0;
    color: inherit;
}

.slux-fb-list {
    display: block !important;
    width: 100%;
}

@keyframes slux-fb-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.slux-fb-item {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    animation: slux-fb-in 0.5s ease both;
}

.slux-fb-item:nth-child(1)  { animation-delay: 0.03s; }
.slux-fb-item:nth-child(2)  { animation-delay: 0.09s; }
.slux-fb-item:nth-child(3)  { animation-delay: 0.15s; }
.slux-fb-item:nth-child(4)  { animation-delay: 0.21s; }
.slux-fb-item:nth-child(5)  { animation-delay: 0.27s; }
.slux-fb-item:nth-child(6)  { animation-delay: 0.33s; }
.slux-fb-item:nth-child(7)  { animation-delay: 0.39s; }
.slux-fb-item:nth-child(8)  { animation-delay: 0.45s; }
.slux-fb-item:nth-child(9)  { animation-delay: 0.51s; }
.slux-fb-item:nth-child(10) { animation-delay: 0.57s; }

.slux-fb-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.slux-fb-row {
    display: grid !important;
    grid-template-columns: max(88px, calc(6.11vw * var(--scale))) 22px 1fr 20px 28px !important;
    align-items: center;
    width: 100%;
    gap: 16px;
    padding: max(12px, 0.83vw) max(16px, 1.11vw);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

.slux-fb-item:hover .slux-fb-row {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.slux-fb-item.open .slux-fb-row {
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
}

.slux-fb-num {
    font-family: var(--font1);
    font-size: max(11px, calc(0.76vw * var(--scale)));
    color: var(--accent-color);
    opacity: 0.5;
    letter-spacing: 0.06em;
    transition: opacity 0.2s ease;
}

.slux-fb-item:hover .slux-fb-num,
.slux-fb-item.open .slux-fb-num {
    opacity: 0.9;
}

.slux-fb-name {
    font-family: var(--font2);
    font-size: max(17px, calc(1.18vw * var(--scale)));
    line-height: 1.4;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.slux-fb-row:hover .slux-fb-name {
    opacity: 0.55;
    transform: translateX(3px);
}

.slux-fb-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    overflow: hidden;
    align-self: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
}

.slux-fb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
    filter: grayscale(15%) contrast(1.05);
    transition: opacity 0.3s ease, transform 0.4s ease, filter 0.3s ease;
}

.slux-fb-item:hover .slux-fb-thumb img {
    opacity: 0.9;
    filter: grayscale(0%) contrast(1.02);
    transform: scale(1.05);
}

.slux-fb-item.open .slux-fb-thumb img {
    opacity: 0.75;
    filter: grayscale(0%) contrast(1.02);
}

.slux-fb-chevron {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), color 0.2s ease;
}

.slux-fb-item.open .slux-fb-chevron {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.5);
}

.slux-fb-link {
    width: 28px;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-color);
    opacity: 0.35;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1),
                border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.slux-fb-link::before {
    content: "READ";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    font-family: var(--font2);
    font-size: max(11px, calc(0.76vw * var(--scale)));
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.slux-fb-link svg {
    flex-shrink: 0;
    transform: rotate(-45deg);
    transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* Tier 1: anywhere on the row — full light-up, arrow stays ↗ */
.slux-fb-item:hover .slux-fb-link {
    opacity: 1;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent-color) 38%, transparent),
                0 0  4px color-mix(in srgb, var(--accent-color) 55%, transparent);
    transform: translateX(8px);
}

.slux-fb-item:hover .slux-fb-link::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tier 2: cursor on the button itself — arrow rotates → */
.slux-fb-item:hover .slux-fb-link:hover {
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent-color) 52%, transparent),
                0 0  6px color-mix(in srgb, var(--accent-color) 70%, transparent);
}

.slux-fb-item:hover .slux-fb-link:hover svg {
    transform: rotate(0deg) scale(1.2);
}

.slux-fb-body {
    display: block !important;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    opacity: 0;
    padding-left: 54px;
    padding-right: max(16px, 1.11vw);
    box-sizing: border-box;
}

.slux-fb-item.open .slux-fb-body {
    max-height: 300px;
    opacity: 1;
    padding-top: max(10px, 0.69vw);
    padding-bottom: max(16px, 1.11vw);
}

.slux-fb-excerpt {
    font-family: var(--font2);
    font-size: max(13px, calc(0.9vw * var(--scale)));
    line-height: 1.6;
    opacity: 0.55;
    margin: 0;
}

.slux-fb-excerpt-locked {
    opacity: 0.3;
    font-style: italic;
}

/* ─── CTA Card ──────────────────────────────── */

.slux-fb-cta {
    width: 100%;
    margin-top: max(48px, 3.33vw);
    margin-bottom: max(20px, 1.39vw);
    padding: max(44px, 3.06vw) max(36px, 2.5vw);
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: max(8px, 0.56vw);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--background-color));
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.slux-fb-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 9%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}

.slux-fb-cta::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--accent-color) 70%, transparent) 0%,
        color-mix(in srgb, var(--accent-color) 25%, transparent) 50%,
        transparent 100%);
}

.slux-fb-cta-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font2);
    font-size: max(11px, calc(0.76vw * var(--scale)));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: max(12px, 0.83vw);
}

.slux-fb-cta-eyebrow::before {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: var(--accent-color);
    flex-shrink: 0;
}

.slux-fb-cta-title {
    font-family: var(--font1);
    font-size: max(28px, calc(1.94vw * var(--scale)));
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: 0 0 max(12px, 0.83vw);
    color: inherit;
    max-width: 22ch;
}

.slux-fb-cta-sub {
    font-family: var(--font2);
    font-size: max(14px, calc(0.97vw * var(--scale)));
    line-height: 1.6;
    opacity: 0.6;
    margin: 0 0 max(28px, 1.94vw);
    max-width: 48ch;
}

.slux-fb-cta-sub strong {
    opacity: 1;
    color: var(--accent-color);
    font-weight: 500;
}

.slux-fb-cta-buttons {
    display: flex;
    align-items: center;
    gap: max(10px, 0.69vw);
    flex-wrap: wrap;
}

.slux-fb-cta-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font1);
    font-size: max(13px, calc(0.9vw * var(--scale)));
    font-weight: 400;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    cursor: pointer;
    border-radius: 3px;
    padding: max(10px, 0.69vw) max(20px, 1.39vw);
    letter-spacing: 0.01em;
}

.slux-fb-cta-btn-primary {
    background: var(--accent-color);
    color: #fff;
}

.slux-fb-cta-btn-secondary {
    background: transparent;
    color: inherit;
    opacity: 0.6;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 22%, transparent);
}

.slux-fb-cta-btn:hover {
    opacity: 0.8;
}

.slux-fb-cta-btn-secondary:hover {
    opacity: 1;
}