/* ──────────────────────────────────────────────────────────
   FictionX – moi-1  Media statistics page (fx-stats)
   Modern, creative counters grid. Brand-red accents, animated
   count-up numbers, floating icon badges and ghost figures.
   RTL-first via logical properties. No box-shadow on buttons.
   ────────────────────────────────────────────────────────── */

.fx-stats{
    position:relative;
    overflow:hidden;
    padding:14px 0 72px;
    background:
        radial-gradient(820px 460px at 100% -5%, rgba(165,19,19,.06), transparent 60%),
        radial-gradient(720px 420px at 0% 105%, rgba(165,19,19,.05), transparent 60%),
        #f4f5f7;
}

/* ===== Intro band ===== */
.fx-stats__intro{
    text-align:center;
    max-width:680px;
    margin:8px auto 44px;
}
.fx-stats__eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 16px;
    border-radius:4px;
    background:rgba(165,19,19,.10);
    color:#a51313;
    font-size:12.5px;font-weight:700;letter-spacing:.4px;
    margin-bottom:16px;
}
.fx-stats__eyebrow i{font-size:14px;}
.fx-stats__title{
    margin:0;
    font-size:27px;font-weight:800;color:#15202b;letter-spacing:.2px;
}
.fx-stats__title span{color:#a51313;}
.fx-stats__sub{
    margin:12px auto 0;
    max-width:560px;
    font-size:14.5px;line-height:1.85;color:#6b7682;
}

/* ===== Grid ===== */
.fx-stats__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
    gap:22px;
}

/* ===== Card ===== */
.fx-stat-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    padding:34px 22px 28px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    opacity:0;
    transform:translateY(22px);
    transition:transform .4s cubic-bezier(.22,.61,.36,1),
               border-color .4s ease;
}
.fx-stat-card.is-in{
    opacity:1;
    transform:translateY(0);
    animation:fxStatIn .6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fxStatIn{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:translateY(0);}
}
.fx-stat-card:hover{
    transform:translateY(-6px);
    border-color:rgba(165,19,19,.38);
}
/* top accent bar */
.fx-stat-card::before{
    content:"";
    position:absolute;
    top:0;inset-inline-start:0;
    width:100%;height:3px;
    background:linear-gradient(90deg,#7d0f0f,#a51313,#c2302f);
    transform:scaleX(0);transform-origin:inline-start;
    transition:transform .45s ease;
    z-index:2;
}
.fx-stat-card:hover::before{transform:scaleX(1);}
/* ghost figure in the corner */
.fx-stat-card__ghost{
    position:absolute;
    inset-block-start:-18px;inset-inline-end:-10px;
    font-size:104px;line-height:1;
    color:rgba(165,19,19,.05);
    z-index:-1;
    pointer-events:none;
    transition:transform .5s ease,color .4s ease;
}
.fx-stat-card:hover .fx-stat-card__ghost{
    transform:scale(1.08) rotate(-6deg);
    color:rgba(165,19,19,.09);
}

/* ===== Icon badge ===== */
.fx-stat-card__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:64px;height:64px;
    margin-bottom:10px;
    border-radius:4px;
    font-size:28px;color:#a51313;
    background:linear-gradient(145deg, rgba(165,19,19,.12), rgba(165,19,19,.05));
    border:1px solid rgba(165,19,19,.16);
    transition:transform .45s cubic-bezier(.22,.61,.36,1),
               background .4s ease,color .4s ease;
}
.fx-stat-card:hover .fx-stat-card__icon{
    transform:translateY(-3px) rotate(-4deg);
    background:linear-gradient(145deg,#a51313,#7d0f0f);
    color:#fff;
}

/* ===== Number ===== */
.fx-stat-card__num{
    font-size:42px;font-weight:800;line-height:1;
    color:#15202b;
    letter-spacing:.5px;
    font-variant-numeric:tabular-nums;
}
.fx-stat-card__num::after{
    content:"";
    display:block;
    width:34px;height:3px;
    margin:14px auto 12px;
    border-radius:4px;
    background:linear-gradient(90deg,#a51313,#c2302f);
    opacity:.85;
}

/* ===== Label ===== */
.fx-stat-card__label{
    font-size:13.5px;line-height:1.7;font-weight:600;color:#566069;
    min-height:46px;
    display:flex;align-items:center;justify-content:center;
}

/* ===== Footnote ===== */
.fx-stats__note{
    display:block;
    margin-top:32px;
    text-align:end;
    font-size:12px;color:#9aa3ad;
    font-style:italic;
}

/* ===== Responsive ===== */
@media (max-width:991px){
    .fx-stats__title{font-size:23px;}
    .fx-stats__grid{gap:16px;}
}
@media (max-width:575px){
    .fx-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .fx-stat-card{padding:26px 14px 22px;}
    .fx-stat-card__num{font-size:34px;}
    .fx-stat-card__ghost{font-size:80px;}
}
@media (max-width:360px){
    .fx-stats__grid{grid-template-columns:1fr;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-stat-card,
    .fx-stat-card::before,
    .fx-stat-card__icon,
    .fx-stat-card__ghost{
        transition:none !important;animation:none !important;
    }
    .fx-stat-card{opacity:1 !important;transform:none !important;}
    .fx-stat-card:hover{transform:none !important;}
}