/* Standard Workspace Rounded Nav-Fill Tabs */
        .ff-tabs-nav {
          display: block !important;
          min-height: 48px !important;
          border-radius: 20px;
          padding: 4px;
          background: #eef2f6;
          box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
          min-width: 0;
          max-width: 100%;
          position: relative;
        }
        #ff-core-nav-tab {
          display: flex !important;
          align-items: center !important;
          min-height: 40px !important;
          height: auto !important;
          flex-wrap: nowrap !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          touch-action: pan-x;
          scroll-behavior: smooth;
          scrollbar-width: none;
          -ms-overflow-style: none;
          min-width: 0;
          width: 100%;
          border-bottom: none !important;
          gap: 6px;
        }
        #ff-core-nav-tab::-webkit-scrollbar {
          display: none !important;
          width: 0 !important;
          height: 0 !important;
        }
        .ff-tab-btn {
          border-radius: 50px !important;
          font-weight: 600;
          font-size: 13px;
          padding: 8px 18px;
          border: none !important;
          color: #475569 !important;
          background: transparent !important;
          transition: all 0.25s ease;
          white-space: nowrap !important;
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
          gap: 6px;
          flex: 0 0 auto !important;
          flex-shrink: 0 !important;
          min-width: auto;
          cursor: pointer;
          touch-action: manipulation;
        }
        .ff-tab-btn:hover {
          color: #0066ff !important;
          background: rgba(255,255,255,0.6) !important;
        }
        .ff-tab-btn.active {
          background: #ffffff !important;
          color: #0066ff !important;
          box-shadow: 0 4px 12px rgba(0, 102, 255, 0.12) !important;
          font-weight: 700;
        }
        .ff-tab-btn.active i,
        .ff-tab-btn.active i::before,
        .ff-tab-btn.active i::after,
        .ff-tab-btn.active [class*="text-"] {
          color: #0066ff !important;
          --fa-primary-color: #0066ff !important;
          --fa-secondary-color: #0066ff !important;
          --fa-secondary-opacity: 0.6 !important;
        }

        /* Target Cards & Attainment Progress */
        @keyframes progressGlow {
          0%, 100% { box-shadow: 0 0 6px rgba(38, 191, 148, 0.35); }
          50% { box-shadow: 0 0 14px rgba(38, 191, 148, 0.65); }
        }
        .ff-progress-glow {
          animation: progressGlow 2.5s infinite ease-in-out;
        }
        .ff-target-bar {
          height: 9px;
          border-radius: 10px;
          background: #e2e8f0;
          overflow: hidden;
          position: relative;
        }
        .ff-target-progress {
          height: 100%;
          border-radius: 10px;
          background: linear-gradient(90deg, #26bf94 0%, #007aff 100%);
          transition: width 0.8s ease;
        }

        /* Due Aging Matrix Badges */
        .ff-aging-pill {
          padding: 4px 10px;
          border-radius: 20px;
          font-size: 11.5px;
          font-weight: 700;
          display: inline-flex;
          align-items: center;
          gap: 5px;
        }
        .ff-aging-0-30 { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
        .ff-aging-31-60 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
        .ff-aging-61-90 { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
        .ff-aging-90-plus { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

        /* Brand Invoicing Split Cards */
        .ff-split-card {
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          background: #ffffff;
          padding: 14px;
          transition: all 0.25s ease;
        }
        .ff-split-card:hover {
          border-color: #0066ff;
          box-shadow: 0 8px 24px rgba(0, 102, 255, 0.08);
          transform: translateY(-2px);
        }

        /* Category mix progress strip */
        .ff-mix-bar {
          display: flex;
          height: 10px;
          border-radius: 8px;
          overflow: hidden;
          background: #f1f5f9;
        }

        /* Real AI Insight Engine Styles & High-Impact AI in Action Animations */
        .ff-ai-pill-nav {
          background: #ffffff !important;
          border: 1px solid #e2e8f0 !important;
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08) !important;
        }
        .ff-ai-btn {
          border-radius: 50px !important;
          font-size: 13px !important;
          transition: all 0.25s ease !important;
          color: #334155 !important;
          background: transparent !important;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .ff-ai-btn:hover {
          background: rgba(99, 102, 241, 0.08) !important;
          color: #4f46e5 !important;
        }
        .ff-ai-btn.active {
          background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
          color: #ffffff !important;
          box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4) !important;
        }
        /* Active Tab Icon Fix: Forces icon & duotone layers to brilliant white */
        .ff-ai-btn.active i,
        .ff-ai-btn.active i::before,
        .ff-ai-btn.active i::after,
        .ff-ai-btn.active [class*="text-"] {
          color: #ffffff !important;
          -webkit-text-fill-color: #ffffff !important;
          --fa-primary-color: #ffffff !important;
          --fa-secondary-color: #ffffff !important;
          --fa-secondary-opacity: 0.8 !important;
          opacity: 1 !important;
        }
        .ff-ai-btn.active::after {
          content: '';
          position: absolute;
          top: 0; left: -100%; width: 50%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
          animation: pillShimmer 2.8s infinite;
        }
        @keyframes pillShimmer {
          0% { left: -100%; }
          50%, 100% { left: 160%; }
        }

        /* Neural Background Grid Pattern */
        .ai-neural-grid {
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-image: radial-gradient(rgba(99, 102, 241, 0.12) 1.5px, transparent 1.5px);
          background-size: 28px 28px;
          pointer-events: none;
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 65%, transparent 100%);
          -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 65%, transparent 100%);
          animation: neuralPulse 5s ease-in-out infinite alternate;
          z-index: 0;
        }
        @keyframes neuralPulse {
          0% { opacity: 0.35; transform: scale(1); }
          100% { opacity: 0.8; transform: scale(1.02); }
        }

        /* Ambient Floating Orbs */
        .ai-ambient-orb-1 {
          position: absolute;
          top: -40px;
          left: -40px;
          width: 340px;
          height: 340px;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 70%);
          border-radius: 50%;
          filter: blur(50px);
          pointer-events: none;
          z-index: 0;
          animation: orbFloat1 10s infinite alternate ease-in-out;
        }
        .ai-ambient-orb-2 {
          position: absolute;
          bottom: -50px;
          right: -50px;
          width: 380px;
          height: 380px;
          background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0) 70%);
          border-radius: 50%;
          filter: blur(55px);
          pointer-events: none;
          z-index: 0;
          animation: orbFloat2 12s infinite alternate ease-in-out;
        }
        @keyframes orbFloat1 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(30px, -25px) scale(1.15); }
        }
        @keyframes orbFloat2 {
          0% { transform: translate(0, 0) scale(1); }
          100% { transform: translate(-35px, 20px) scale(1.2); }
        }

        /* High-Impact Continuous Pulsing & Flowing Neon Border Around AI Console */
        .ai-glow-border-wrap {
          position: relative;
          border-radius: 26px;
          padding: 2.5px;
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(14, 165, 233, 0.45), rgba(168, 85, 247, 0.45), rgba(99, 102, 241, 0.45));
          background-size: 300% 300%;
          animation: borderGlowShift 8s ease-in-out infinite, borderPulseGlow 4s ease-in-out infinite;
          overflow: hidden;
          isolation: isolate;
          z-index: 1;
        }
        /* Perfectly Centered Geometric Square Beam (Optimized dimensions with GPU layer promotion) */
        .ai-glow-border-wrap::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 1400px;
          height: 1400px;
          margin-top: -700px;
          margin-left: -700px;
          background: conic-gradient(
            from 0deg,
            transparent 0deg 180deg,
            rgba(99, 102, 241, 0.25) 220deg,
            #6366f1 265deg,
            #00d4ff 305deg,
            #a855f7 345deg,
            transparent 360deg
          );
          animation: rotateConic 7s linear infinite;
          will-change: transform;
          z-index: 0;
          pointer-events: none;
          transform-origin: center center;
        }
        @keyframes rotateConic {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* High-Performance Offscreen Section Rendering Containment */
        .ff-section-cv {
          content-visibility: auto;
          contain-intrinsic-size: 1px 700px;
        }
        @keyframes borderGlowShift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        @keyframes borderPulseGlow {
          0%, 100% {
            box-shadow: 0 16px 45px -10px rgba(99, 102, 241, 0.24), 0 0 25px rgba(99, 102, 241, 0.1);
          }
          50% {
            box-shadow: 0 24px 60px -8px rgba(99, 102, 241, 0.38), 0 0 35px rgba(0, 212, 255, 0.22), 0 0 15px rgba(168, 85, 247, 0.18);
          }
        }

        /* High-Tech Holographic AI Console Card (Inner) - Perfectly Concentric */
        .ff-ai-console {
          border: none !important;
          border-radius: 23.5px !important;
          background: #ffffff !important;
          position: relative;
          overflow: hidden;
          z-index: 1;
          transition: opacity 0.2s ease, transform 0.2s ease;
        }

        /* Live Stream Marquee Ticker */
        .ai-stream-marquee-container {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 50px;
          padding: 6px 14px;
          overflow: hidden;
          white-space: nowrap;
          position: relative;
          display: flex;
          align-items: center;
        }
        .ai-stream-track {
          display: inline-flex;
          align-items: center;
          gap: 20px;
          animation: tickerSlide 22s linear infinite;
        }
        .ai-stream-track:hover {
          animation-play-state: paused;
        }
        @keyframes tickerSlide {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .ai-stream-chip {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 11.5px;
          color: #475569;
          flex-shrink: 0;
        }
        .ai-stream-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #10b981;
          display: inline-block;
          animation: liveRingPulse 1.8s infinite;
        }

        /* Sonar Waves around AI Orb */
        .ai-orb-wrap {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 48px;
          height: 48px;
          flex-shrink: 0;
          margin-right: 12px;
        }
        .ai-sonar-wave {
          position: absolute;
          width: 44px;
          height: 44px;
          border-radius: 14px;
          border: 1.5px solid rgba(99, 102, 241, 0.45);
          animation: sonarWave 2.6s infinite cubic-bezier(0, 0.2, 0.8, 1);
          pointer-events: none;
        }
        .ai-sonar-wave:nth-child(2) {
          animation-delay: 1.3s;
        }
        @keyframes sonarWave {
          0% { transform: scale(0.95); opacity: 0.9; }
          100% { transform: scale(1.65); opacity: 0; }
        }

        /* Mult-Ring Live Pulsing Indicator */
        .ai-live-pulse-wrapper {
          position: relative;
          width: 14px;
          height: 14px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .ai-live-pulse-dot {
          width: 8px;
          height: 8px;
          background: #10b981;
          border-radius: 50%;
          z-index: 2;
          box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        }
        .ai-live-pulse-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.45);
          animation: liveRingPulse 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 1;
        }
        @keyframes liveRingPulse {
          0% { transform: scale(0.8); opacity: 0.9; }
          100% { transform: scale(2.6); opacity: 0; }
        }

        /* Real-Time AI Equalizer Stream Bars */
        .ai-equalizer {
          height: 22px;
          gap: 2.5px;
        }
        .ai-equalizer-bar {
          width: 2.5px;
          background: #6366f1;
          border-radius: 3px;
          display: inline-block;
          animation: aiSoundWave 1.2s ease-in-out infinite alternate;
        }
        .ai-bar-1 { height: 6px; animation-delay: 0.1s; }
        .ai-bar-2 { height: 14px; animation-delay: 0.35s; }
        .ai-bar-3 { height: 8px; animation-delay: 0.18s; }
        .ai-bar-4 { height: 16px; animation-delay: 0.45s; }
        .ai-bar-5 { height: 10px; animation-delay: 0.25s; }
        @keyframes aiSoundWave {
          0% { height: 4px; opacity: 0.55; }
          50% { height: 16px; opacity: 1; }
          100% { height: 7px; opacity: 0.75; }
        }

        /* Shimmer Status Badge */
        .ai-sparkle-badge {
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
          border: 1px solid rgba(99, 102, 241, 0.25);
          color: #4f46e5;
          font-size: 11px;
          font-weight: 700;
          padding: 3px 10px;
          border-radius: 20px;
          display: inline-flex;
          align-items: center;
          position: relative;
          overflow: hidden;
        }
        .ai-sparkle-badge::after {
          content: '';
          position: absolute;
          top: 0; left: -100%; width: 100%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
          animation: badgeShimmer 3s infinite;
        }
        @keyframes badgeShimmer {
          0% { left: -100%; }
          40%, 100% { left: 100%; }
        }

        /* AI Speech Bubble Breathing Glow */
        .ai-speech-bubble {
          position: relative;
          background: #f8fafc;
          border-left: 4px solid #6366f1;
          border-radius: 14px;
          transition: all 0.3s ease;
          animation: aiSpeechBreath 3.5s ease-in-out infinite;
        }
        @keyframes aiSpeechBreath {
          0%, 100% {
            border-left-color: #6366f1;
            box-shadow: inset 0 0 0 rgba(99, 102, 241, 0);
          }
          50% {
            border-left-color: #818cf8;
            box-shadow: inset 3px 0 12px rgba(99, 102, 241, 0.09);
          }
        }

        /* AI Typing Dots */
        .ai-typing-indicator {
          display: inline-flex;
          align-items: center;
          gap: 3px;
        }
        .ai-typing-indicator span {
          width: 4px;
          height: 4px;
          background: #6366f1;
          border-radius: 50%;
          animation: typingBounce 1.4s infinite ease-in-out;
        }
        .ai-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .ai-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typingBounce {
          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
          40% { transform: scale(1.2); opacity: 1; }
        }

        /* Interactive Laser Scanner Overlay on Scenario Switch */
        .ai-scanning-overlay {
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          pointer-events: none;
          overflow: hidden;
          border-radius: 12px;
          opacity: 0;
          z-index: 5;
          transition: opacity 0.15s ease;
        }
        .ai-scanning-overlay.active {
          opacity: 1;
        }
        .ai-scan-laser {
          position: absolute;
          left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, transparent, #6366f1, #00d4ff, #6366f1, transparent);
          box-shadow: 0 0 14px #6366f1, 0 0 8px #00d4ff;
          animation: laserScan 0.45s ease-in-out forwards;
        }
        @keyframes laserScan {
          0% { top: 0%; opacity: 0.9; }
          100% { top: 100%; opacity: 0; }
        }

        /* Metric Chip Pop on Update */
        .metric-pop {
          animation: metricPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes metricPop {
          0% { transform: scale(0.92); opacity: 0.6; }
          100% { transform: scale(1); opacity: 1; }
        }

        /* Staggered Recommendations Slide Up */
        .ai-card-slide {
          animation: aiCardSlide 0.35s ease forwards;
        }
        @keyframes aiCardSlide {
          from { opacity: 0; transform: translateY(10px); }
          to   { opacity: 1; transform: translateY(0);    }
        }

        @media (min-width: 992px) {
          .border-lg-right {
            border-right: 1px solid #e2e8f0 !important;
          }
        }

        .ai-insight-card {
          border-left: 3px solid #6366f1 !important;
          border-radius: 12px;
          background: #ffffff;
          animation: aiSlideIn .4s ease;
          transition: all 0.25s ease;
        }
        .ai-insight-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 30px rgba(99, 102, 241, 0.12) !important;
        }
        @keyframes aiSlideIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0);   }
        }
        .ai-dot {
          display: inline-block;
          width: 8px; height: 8px;
          border-radius: 50%;
          background: #6366f1;
          animation: aiPulse 1.8s ease-in-out infinite;
          vertical-align: middle;
        }
        .ai-text-accent { color: #6366f1 !important; }
        .ai-live-badge {
          background: rgba(99, 102, 241, 0.12) !important;
          color: #6366f1 !important;
          font-size: 10px;
          padding: 2px 8px;
          font-weight: 700;
        }
        .ai-insight-list {
          line-height: 1.8;
          color: #475569;
        }
        .ai-insight-list li {
          margin-bottom: 8px;
        }
        .itag {
          display: inline-flex !important;
          align-items: center !important;
          white-space: nowrap !important;
          padding: 3px 10px !important;
          border-radius: 12px !important;
          font-size: 11px !important;
          font-weight: 600 !important;
        }
        .itag-g { background: rgba(38, 191, 148, 0.15); color: #26bf94; }
        .itag-y { background: rgba(255, 167, 38, 0.15); color: #ffa726; }
        .itag-r { background: rgba(230, 83, 60, 0.15); color: #e6533c; }
        .itag-o { background: rgba(255, 167, 38, 0.10); color: #ffa726; }
        .itag-b { background: rgba(0, 122, 255, 0.15); color: #007aff; }
        .chip-metric {
          transition: transform .15s ease, box-shadow .15s ease !important;
        }
        .chip-metric:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, .08) !important;
        }
        #ai-metrics-container {
          display: flex !important;
          flex-wrap: nowrap !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
          -webkit-overflow-scrolling: touch !important;
          gap: 10px !important;
          padding-bottom: 6px !important;
          scrollbar-width: none !important;
        }
        #ai-metrics-container::-webkit-scrollbar {
          display: none !important;
        }
        #ai-metrics-container .chip-metric {
          flex: 0 0 130px !important;
          flex-shrink: 0 !important;
          min-width: 130px !important;
          max-width: 160px !important;
          word-break: normal !important;
          word-wrap: normal !important;
          overflow-wrap: normal !important;
        }
        #ai-metrics-container .chip-metric strong {
          white-space: nowrap !important;
        }
        #ai-metrics-container .chip-metric small {
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          display: block !important;
        }

        a.btn-custom.btn-outline-primary,
        button.btn-custom.btn-outline-primary {
          color: #0066ff !important;
          background-color: #ffffff !important;
          border: 1.5px solid #0066ff !important;
        }
        a.btn-custom.btn-outline-primary:hover,
        button.btn-custom.btn-outline-primary:hover {
          color: #ffffff !important;
          background-color: #0066ff !important;
          border-color: #0066ff !important;
        }

        a.btn-custom.btn-outline-danger,
        button.btn-custom.btn-outline-danger {
          min-width: 0 !important;
          height: auto !important;
          line-height: 1.3 !important;
          color: #dc2626 !important;
          background-color: #ffffff !important;
          border: 1.5px solid #dc2626 !important;
        }
        a.btn-custom.btn-outline-danger:hover,
        button.btn-custom.btn-outline-danger:hover {
          color: #ffffff !important;
          background-color: #dc2626 !important;
          border-color: #dc2626 !important;
        }

        a.btn-custom.btn-light,
        button.btn-custom.btn-light {
          color: #1e293b !important;
          background-color: #ffffff !important;
          border: 1px solid #cbd5e1 !important;
        }
        a.btn-custom.btn-light:hover,
        button.btn-custom.btn-light:hover {
          color: #0066ff !important;
          background-color: #f8fafc !important;
          border-color: #0066ff !important;
        }

        .btn-warning.btn-custom {
          color: #212529 !important;
        }
        .btn-warning.btn-custom:hover {
          color: #000000 !important;
        }

        .badge.btn-custom {
          min-width: 0 !important;
          padding: 5px 12px !important;
          font-weight: 600 !important;
          font-size: 11px !important;
          line-height: 1.4 !important;
        }
        .badge.badge-light.btn-custom {
          color: #334155 !important;
          background-color: #ffffff !important;
          border: 1px solid #e2e8f0 !important;
        }
        .badge.badge-light.btn-custom:hover {
          color: #0066ff !important;
          background-color: #eff6ff !important;
          border-color: #93c5fd !important;
        }

        .ff-tab-btn.btn-custom {
          min-width: 0 !important;
          padding: 8px 18px !important;
          color: #475569 !important;
          background: transparent !important;
          flex: 0 0 auto !important;
          flex-shrink: 0 !important;
          white-space: nowrap !important;
        }
        @media only screen and (min-width: 1100px) {
          #ff-core-nav-tab {
            overflow-x: visible !important;
          }
          #ff-core-nav-tab .ff-tab-btn,
          #ff-core-nav-tab .ff-tab-btn.btn-custom {
            flex: 1 1 0% !important;
            text-align: center !important;
            padding: 9px 10px !important;
            min-width: 0 !important;
            white-space: nowrap !important;
            font-size: 13px !important;
          }
        }
        .ff-tab-btn.btn-custom:hover {
          color: #0066ff !important;
          background: rgba(255, 255, 255, 0.6) !important;
        }
        .ff-tab-btn.btn-custom.active {
          color: #0066ff !important;
          background: #ffffff !important;
          box-shadow: 0 4px 12px rgba(0, 102, 255, 0.12) !important;
          font-weight: 700 !important;
        }
        .ff-tab-btn.btn-custom.active i,
        .ff-tab-btn.btn-custom.active i::before,
        .ff-tab-btn.btn-custom.active i::after,
        .ff-tab-btn.btn-custom.active [class*="text-"] {
          color: #0066ff !important;
          -webkit-text-fill-color: #0066ff !important;
          --fa-primary-color: #0066ff !important;
          --fa-secondary-color: #0066ff !important;
          --fa-secondary-opacity: 0.6 !important;
        }

        .ff-touch-scroll {
          -webkit-overflow-scrolling: touch !important;
          scrollbar-width: none !important;
          -ms-overflow-style: none !important;
        }
        .ff-touch-scroll::-webkit-scrollbar {
          display: none !important;
          width: 0 !important;
          height: 0 !important;
        }

        /* FieldFlow Reels & Shorts Showcase Styling */
        .ff-reels-carousel .ff-reel-item {
          height: 100%;
          padding: 4px;
        }
        .ff-reel-card {
          border-radius: 20px !important;
          overflow: hidden;
          transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
          background: #ffffff;
          border: 1px solid #e2e8f0 !important;
          box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04) !important;
        }
        .ff-reel-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16) !important;
        }
        .ff-reel-card .border-top {
          padding: 10px 14px !important;
          background: #f8fafc !important;
        }
        .ff-reel-card .border-top span {
          font-size: 12px !important;
          line-height: 1.4 !important;
          white-space: nowrap !important;
          color: #334155 !important;
          font-weight: 700 !important;
        }
        .ff-reel-player-wrap {
          position: relative;
          aspect-ratio: 9 / 16;
          max-height: 480px;
          min-height: 380px;
          background: #0f172a;
          overflow: hidden;
        }
        .ff-tally-video-wrap {
          position: relative;
          width: 100% !important;
          aspect-ratio: 16 / 9 !important;
          max-height: none !important;
          min-height: 220px !important;
          background: #0f172a;
          overflow: hidden;
          cursor: pointer;
        }
        @media (max-width: 991px) {
          .ff-reels-carousel .owl-stage-outer {
            padding-top: 10px;
            padding-bottom: 25px;
            overflow: visible !important;
          }
          .ff-reels-carousel {
            overflow: hidden;
          }
          .ff-reels-carousel .owl-item {
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
            opacity: 0.55;
            transform: scale(0.92);
          }
          .ff-reels-carousel .owl-item.active.center {
            opacity: 1;
            transform: scale(1);
            z-index: 5;
          }
          .ff-reels-carousel .owl-item.active.center .ff-reel-card {
            box-shadow: 0 16px 36px -4px rgba(0, 102, 255, 0.22), 0 0 0 1.5px rgba(0, 102, 255, 0.35) !important;
          }
        }
        @media (max-width: 768px) {
          .ff-reel-player-wrap:not(.ff-tally-video-wrap) {
            aspect-ratio: 4 / 5;
            max-height: 400px;
            min-height: 300px;
          }
        }
        .ff-reel-poster {
          transition: transform 0.5s ease;
        }
        .ff-reel-card:hover .ff-reel-poster {
          transform: scale(1.05);
        }
        .ff-reel-play-btn {
          width: 60px !important;
          height: 60px !important;
          min-width: 60px !important;
          padding: 0 !important;
          border-radius: 50% !important;
          background: #ff0000 !important;
          color: #ffffff !important;
          border: none !important;
          box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.3) !important;
          transition: transform 0.25s ease, box-shadow 0.25s ease !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          z-index: 3;
          cursor: pointer;
        }
        .ff-reel-play-btn:hover {
          transform: translate(-50%, -50%) scale(1.1) !important;
          box-shadow: 0 0 0 14px rgba(255, 0, 0, 0.45) !important;
          background: #dc2626 !important;
          color: #ffffff !important;
        }
        .ff-explainer-play-btn {
          width: 72px !important;
          height: 72px !important;
          min-width: 72px !important;
          max-width: 72px !important;
          min-height: 72px !important;
          max-height: 72px !important;
          padding: 0 !important;
          border-radius: 50% !important;
          background: #ff0000 !important;
          color: #ffffff !important;
          border: none !important;
          box-shadow: 0 0 0 12px rgba(255, 0, 0, 0.3) !important;
          transition: transform 0.25s ease, box-shadow 0.25s ease !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          cursor: pointer;
        }
        .ff-explainer-play-btn:hover {
          transform: scale(1.1) !important;
          box-shadow: 0 0 0 18px rgba(255, 0, 0, 0.45) !important;
          background: #dc2626 !important;
          color: #ffffff !important;
        }
        /* Modern Gradient Pill Carousel Dots */
        .ff-reels-carousel .owl-dots {
          margin-top: 15px !important;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
        }
        .ff-reels-carousel .owl-dots .owl-dot span {
          width: 8px !important;
          height: 8px !important;
          margin: 0 !important;
          background: #cbd5e1 !important;
          border-radius: 50% !important;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .ff-reels-carousel .owl-dots .owl-dot.active span {
          width: 28px !important;
          border-radius: 12px !important;
          background: linear-gradient(90deg, #0066ff, #6366f1) !important;
          box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
        }

        /* Mobile Scroll & Touch Optimization */
        @media only screen and (max-width: 768px) {
          .owl-theme .owl-dots,
          .owl-dots,
          .ff-reels-carousel .owl-dots {
            display: none !important;
          }
          .ff-hero-lockup {
            display: inline-flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 18px !important;
            padding: 5px 10px !important;
            gap: 6px !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
          }
          .ff-hero-lockup .ff-divider {
            display: none !important;
          }
          .ff-hero-lockup .ff-icon {
            width: 28px !important;
            height: 28px !important;
          }
          .ff-hero-lockup .ff-title {
            font-size: 13px !important;
          }
          .ff-hero-lockup .ff-sub {
            font-size: 8.5px !important;
          }
          .ff-hero-lockup .ff-tag {
            font-size: 10.5px !important;
            padding: 3px 8px !important;
            white-space: nowrap !important;
          }
          .ff-hero-lockup .ff-ai-chip {
            font-size: 10.5px !important;
            padding: 2px 8px !important;
            white-space: nowrap !important;
          }
          .ff-tabs-nav {
            display: block !important;
            min-height: 46px !important;
            border-radius: 12px !important;
            padding: 3px !important;
            position: relative !important;
          }
          .ff-tabs-nav::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 28px;
            background: linear-gradient(to right, rgba(238, 242, 246, 0), rgba(238, 242, 246, 0.95));
            pointer-events: none;
            border-radius: 0 16px 16px 0;
            opacity: 1;
            transition: opacity 0.25s ease;
          }
          .ff-tabs-nav.scrolled-end::after {
            opacity: 0;
          }
          #ff-core-nav-tab {
            min-height: 40px !important;
            align-items: center !important;
          }
          .ff-tab-btn,
          .ff-tab-btn.btn-custom {
            padding: 7px 14px !important;
            font-size: 12px !important;
            min-height: 38px !important;
            gap: 5px !important;
          }
          #ff-core-tabContent {
            padding: 16px 12px !important;
            border-radius: 12px !important;
          }
          #ff-core-tabContent .card {
            padding: 14px 12px !important;
            border-radius: 10px !important;
          }
        }

        @media only screen and (max-width: 480px){
          .ff-hero-lockup {
            gap: 5px !important;
            padding: 4px 8px !important;
            border-radius: 14px !important;
          }
          .ff-hero-lockup .ff-tag {
            font-size: 9.5px !important;
            padding: 2px 6px !important;
          }
          .ff-hero-lockup .ff-ai-chip {
            font-size: 9.5px !important;
            padding: 2px 6px !important;
          }
          .ff-tab-btn,
          .ff-tab-btn.btn-custom {
            padding: 6px 11px !important;
            font-size: 11.5px !important;
            min-height: 36px !important;
          }
        }

        /* Scoped override for Feature Carousel to prevent harsh solid color on center active card */
        #owl-features .feature-box-type-2 {
          background: #ffffff !important;
          border: 1px solid rgba(0, 0, 0, 0.08) !important;
          border-radius: 16px !important;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
          color: #0f172a !important;
          text-align: left !important;
        }
        #owl-features .owl-item.active.center .feature-box-type-2 {
          background: #ffffff !important;
          color: #0f172a !important;
          border: 1.5px solid rgba(0, 102, 255, 0.28) !important;
          box-shadow: 0 14px 34px -4px rgba(0, 102, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
          transform: scale(1.04) !important;
        }
        #owl-features .feature-box-type-2 h4,
        #owl-features .owl-item.active.center .feature-box-type-2 h4 {
          color: #0f172a !important;
          font-size: 17px !important;
          font-weight: 700 !important;
          line-height: 1.4 !important;
        }
        #owl-features .feature-box-type-2 p,
        #owl-features .owl-item.active.center .feature-box-type-2 p {
          color: #64748b !important;
          font-size: 14px !important;
          line-height: 1.6 !important;
        }
        #owl-features .feature-box-type-2 i,
        #owl-features .owl-item.active.center .feature-box-type-2 i {
          color: #0066ff;
          margin-bottom: 14px !important;
        }
        #owl-features .feature-box-type-2 i.text-primary,
        #owl-features .owl-item.active.center .feature-box-type-2 i.text-primary {
          color: #0066ff !important;
        }
        #owl-features .feature-box-type-2 i.text-danger,
        #owl-features .owl-item.active.center .feature-box-type-2 i.text-danger {
          color: #ef4444 !important;
        }
        #owl-features .feature-box-type-2 i.text-warning,
        #owl-features .owl-item.active.center .feature-box-type-2 i.text-warning {
          color: #f59e0b !important;
        }
        #owl-features .feature-box-type-2 i.text-success,
        #owl-features .owl-item.active.center .feature-box-type-2 i.text-success {
          color: #10b981 !important;
        }
        #owl-features .feature-box-type-2 i.text-purple,
        #owl-features .owl-item.active.center .feature-box-type-2 i.text-purple {
          color: #8b5cf6 !important;
        }
        #owl-features .feature-box-type-2 .badge,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge {
          color: #ffffff !important;
          font-weight: 700 !important;
          font-size: 11px !important;
          padding: 4px 10px !important;
          margin-left: 6px !important;
          vertical-align: middle !important;
        }
        #owl-features .feature-box-type-2 .badge-primary,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge-primary {
          background-color: #0066ff !important;
        }
        #owl-features .feature-box-type-2 .badge-danger,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge-danger {
          background-color: #ef4444 !important;
        }
        #owl-features .feature-box-type-2 .badge-warning,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge-warning {
          background-color: #f59e0b !important;
          color: #1e293b !important;
        }
        #owl-features .feature-box-type-2 .badge-success,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge-success {
          background-color: #10b981 !important;
        }
        #owl-features .feature-box-type-2 .badge-info,
        #owl-features .owl-item.active.center .feature-box-type-2 .badge-info {
          background-color: #06b6d4 !important;
        }