/* IN-CRM shared site styles — used by every page (AR + EN) */

body { overflow-x: hidden; transition: background-color 0.3s, color 0.3s; }

/* Perf: skip painting below-the-fold sections until the user reaches them.
   NOTE: #animations intentionally excluded — content-visibility:auto makes
   ScrollTrigger mis-measure its position and freezes the card animations. */
#features, #faq, #register { content-visibility: auto; contain-intrinsic-size: 1000px; }

/* Hardware acceleration for animated elements */
.fast-anim, .qr-scan-line, .timer-fill, .anim1-msg, .anim2-lead, .anim3-msg { will-change: transform; transform: translateZ(0); }

/* Lightweight CSS grid background (instead of heavy particle libs) */
.bg-grid { background-image: linear-gradient(to right, rgba(99, 102, 241, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 102, 241, 0.08) 1px, transparent 1px); background-size: 40px 40px; }
.dark .bg-grid { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); }

.glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(99, 102, 241, 0.1); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; }
.dark .glass-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3); }
@media (hover: hover) { .glass-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px -15px rgba(99, 102, 241, 0.15); } }

.text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #6366F1, #8B5CF6); }
.text-gradient-wa { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #25D366, #128C7E); }

/* Floating WhatsApp button — inline-start so it mirrors automatically in LTR */
.floating-whatsapp { position: fixed; bottom: 20px; inset-inline-start: 20px; width: 60px; height: 60px; background-color: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); z-index: 50; transition: transform 0.3s; }

.qr-scan-line { position: absolute; width: 100%; height: 3px; background: #25D366; box-shadow: 0 0 10px #25D366; animation: qr-scan 2.5s ease-in-out infinite alternate; }
@keyframes qr-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }

/* Dashboard UI — CSS only (zero images = fast load) */
.dash-ui { width: 100%; height: 260px; border-radius: 16px; background: #F1F5F9; border: 3px solid #E2E8F0; display: flex; overflow: hidden; }
.dark .dash-ui { background: #0F172A; border-color: #1E293B; }
.dash-sidebar { width: 25%; background: #E2E8F0; padding: 15px 10px; display: flex; flex-direction: column; gap: 8px; }
.dark .dash-sidebar { background: #1E293B; }
.dash-menu-item { width: 100%; height: 10px; background: rgba(99, 102, 241, 0.2); border-radius: 4px; }
.dash-menu-item.active { background: #6366F1; }
.dash-main { width: 75%; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.dash-header { display: flex; gap: 8px; height: 35px; }
.dash-card { flex: 1; background: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: #64748b; }
.dark .dash-card { background: #1E293B; color: #94A3B8; }
.dash-chart { flex: 1; background: white; border-radius: 8px; display: flex; align-items: flex-end; padding: 10px; gap: 8px; justify-content: space-around; }
.dark .dash-chart { background: #1E293B; }
.bar { width: 20%; background: #8B5CF6; border-radius: 3px 3px 0 0; animation: bar-rise 4s ease-out infinite alternate; will-change: height; }
.bar:nth-child(2) { background: #6366F1; animation-delay: -1s; }
.bar:nth-child(3) { background: #25D366; animation-delay: -2s; }
@keyframes bar-rise { 0% { height: 20%; } 100% { height: 90%; } }

/* Animation elements (mechanics section) */
.anim1-track { position: absolute; top: 50%; left: 5%; right: 5%; height: 2px; background: rgba(99,102,241,0.2); transform: translateY(-50%); }
.anim1-msg { position: absolute; top: 50%; transform: translateY(-50%); right: 5%; z-index: 20; }
[dir="ltr"] .anim1-msg { right: auto; left: 5%; }
.anim2-container { position: relative; height: 200px; width: 100%; max-width: 400px; margin: auto; }
.anim2-desk { position: absolute; bottom: 0; width: 100%; height: 40px; background: #E2E8F0; border-radius: 10px 10px 0 0; display: flex; justify-content: space-around; align-items: flex-end; padding-bottom: 10px; }
.dark .anim2-desk { background: #1E293B; }
.anim2-emp { width: 50px; height: 50px; background: white; border-radius: 50%; border: 3px solid #F1F5F9; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 10; }
.dark .anim2-emp { background: #0F172A; border-color: #334155; }
.anim2-lead { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 35px; background: #25D366; color: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; z-index: 20; }
.timer-line { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 35px; height: 4px; background: #E2E8F0; border-radius: 2px; overflow: hidden; }
.timer-fill { height: 100%; width: 100%; background: #EF4444; transform-origin: right; transform: scaleX(0); }
.anim3-container { position: relative; height: 180px; width: 100%; max-width: 400px; margin: auto; }
.anim3-bot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 35px; color: #6366F1; z-index: 10; }
.anim3-card { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 90px; height: 50px; background: white; border: 2px solid #E2E8F0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; z-index: 5; }
.dark .anim3-card { background: #1E293B; border-color: #334155; }
.anim3-box { position: absolute; bottom: 0; width: 75px; height: 50px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; border: 2px dashed; }
.box-sales { right: 5%; border-color: #22C55E; color: #22C55E; }
.box-support { left: 5%; border-color: #F97316; color: #F97316; }

/* FAQ accordion */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; }
.faq-answer-inner { overflow: hidden; }
.faq-item.active .faq-answer { grid-template-rows: 1fr; }
.faq-item.active .faq-icon { transform: rotate(180deg); color: #6366F1; }