/**
 * Rekhi Factory Stats — Frontend CSS
 * Animated counter cards with glassmorphism.
 *
 * COLOR FIX ARCHITECTURE:
 *   --rekhi-accent       = full hex (e.g. #ff6600 or #2271b1)
 *   --rekhi-accent-rgb   = comma-separated RGB (e.g. 255, 102, 0 or 34, 113, 177)
 *   --rekhi-accent-light = lighter hex for gradient endpoints
 *
 *   Every single color reference uses ONE of these variables.
 *   ZERO hardcoded hex or rgba values. This is the fix.
 */
.rekhi-fs-container{--rekhi-accent:#ff6600;--rekhi-accent-rgb:255,102,0;--rekhi-accent-light:#ffaa33;--rekhi-bg:#0a0a0a;--rekhi-text:#fff;--rekhi-subtitle:#aaa;--fs-glass-bg:rgba(255,255,255,0.05);--fs-glass-border:rgba(var(--rekhi-accent-rgb),0.18);--fs-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;width:100%;max-width:1280px;margin:0 auto;text-align:center;padding:50px 20px;box-sizing:border-box;font-family:var(--fs-font);color:var(--rekhi-text)}

.rekhi-fs-header{margin-bottom:48px}
.rekhi-fs-title{font-size:2.6rem;font-weight:700;margin:0 0 14px;background:linear-gradient(90deg,var(--rekhi-text),var(--rekhi-accent),var(--rekhi-text));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rekhi-fs-subtitle{font-size:1.15rem;color:var(--rekhi-subtitle);font-weight:400;margin:0}

/* 4-column responsive grid */
.rekhi-fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Card — hidden until animation triggers */
.rekhi-fs-card{opacity:0;transform:translateY(30px);transition:all 0.5s cubic-bezier(0.25,0.1,0.25,1)}
.rekhi-fs-card.active{opacity:1;transform:translateY(0)}

/* Glass card face */
.rekhi-fs-glass{background:var(--fs-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--fs-glass-border);border-radius:22px;padding:32px 20px 26px;box-shadow:0 6px 28px rgba(0,0,0,0.32);transition:border-color 0.35s ease,box-shadow 0.35s ease;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:240px;box-sizing:border-box}
.rekhi-fs-glass:hover{border-color:var(--rekhi-accent);box-shadow:0 0 40px rgba(var(--rekhi-accent-rgb),0.22)}

/* Icon circle */
.rekhi-fs-icon-wrap{width:64px;height:64px;border-radius:50%;background:rgba(var(--rekhi-accent-rgb),0.08);border:2px solid var(--rekhi-accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;box-shadow:0 0 18px rgba(var(--rekhi-accent-rgb),0.12);transition:all 0.4s ease}
.rekhi-fs-glass:hover .rekhi-fs-icon-wrap{box-shadow:0 0 32px rgba(var(--rekhi-accent-rgb),0.3);background:rgba(var(--rekhi-accent-rgb),0.14)}
.rekhi-fs-icon{font-size:1.7rem;color:var(--rekhi-accent);transition:transform 0.3s ease}
.rekhi-fs-glass:hover .rekhi-fs-icon{transform:scale(1.1)}

/* Value + suffix container */
.rekhi-fs-value-wrap{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:6px}

/* Counter number */
.rekhi-fs-counter{font-size:2.4rem;font-weight:800;color:var(--rekhi-accent);line-height:1.1;display:inline-block}
.rekhi-fs-suffix--inline{font-size:1.5rem;font-weight:700;color:var(--rekhi-accent);line-height:1.1}

/* Label */
.rekhi-fs-label{font-size:0.9rem;font-weight:600;color:var(--rekhi-text);margin:0 0 10px;text-transform:uppercase;letter-spacing:0.04em}

/* Description */
.rekhi-fs-desc{font-size:0.8rem;color:var(--rekhi-subtitle);line-height:1.5;margin:0;flex:1}

/* ==================== DONE PULSE ==================== */
/* Uses the accent-light for the glow — computed from the accent in PHP */
.rekhi-fs-card.done .rekhi-fs-icon-wrap{animation:rekhi-fs-pulse 2s infinite alternate}
@keyframes rekhi-fs-pulse{from{box-shadow:0 0 18px rgba(var(--rekhi-accent-rgb),0.15)}to{box-shadow:0 0 38px rgba(var(--rekhi-accent-rgb),0.4)}}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1000px){.rekhi-fs-grid{grid-template-columns:repeat(2,1fr)}.rekhi-fs-title{font-size:2rem}}
@media(max-width:560px){.rekhi-fs-grid{grid-template-columns:1fr}.rekhi-fs-title{font-size:1.6rem}.rekhi-fs-subtitle{font-size:1rem}.rekhi-fs-glass{min-height:auto;padding:24px 18px 22px}.rekhi-fs-counter{font-size:2rem}}

/* Reduced motion: skip animation, show immediately */
@media(prefers-reduced-motion:reduce){.rekhi-fs-card{transition:opacity 0.1s ease;transform:none}.rekhi-fs-card.active{opacity:1}.rekhi-fs-card.done .rekhi-fs-icon-wrap{animation:none}}