/* IdleBuster Landing Page - Isolated Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- SCOPED CSS RESET & BASE STYLES --- */
#idlebuster-landing-page {
    font-family: 'Inter', sans-serif !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background-color: white !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}
#idlebuster-landing-page * {
    box-sizing: border-box !important;
}
#idlebuster-landing-page h1,
#idlebuster-landing-page h2,
#idlebuster-landing-page h3,
#idlebuster-landing-page h4,
#idlebuster-landing-page h5,
#idlebuster-landing-page h6 {
     margin-top: 0 !important;
     font-family: 'Inter', sans-serif !important;
}
#idlebuster-landing-page p {
    margin-bottom: 1rem !important;
}
.elementor-widget-html { margin: 0 !important; padding: 0 !important; }

/* --- CUSTOM STYLES (Scoped to #idlebuster-landing-page) --- */
#idlebuster-landing-page .bg-grid-slate {
    background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px),
                      linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
    background-size: 40px 40px;
}
#idlebuster-landing-page details > summary { list-style: none !important; }
#idlebuster-landing-page details > summary::-webkit-details-marker { display: none !important; }

/* Navigation */
#idlebuster-landing-page #main-nav {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 999 !important;
    position: relative !important;
}
#idlebuster-landing-page #main-nav.scrolled {
    position: fixed !important;
    top: 1rem !important;
    width: 90% !important;
    max-width: 1200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(209, 213, 219, 0.3) !important;
}
#idlebuster-landing-page #main-nav.scrolled .nav-container {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
}

/* Pricing */
#idlebuster-landing-page .pricing-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
}
#idlebuster-landing-page .billing-toggle {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 40px !important;
}
#idlebuster-landing-page .toggle-switch {
    position: relative !important;
    width: 60px !important;
    height: 34px !important;
    background: #e0e0e0 !important;
    border-radius: 34px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}
#idlebuster-landing-page .toggle-switch.active {
    background: #4f46e5 !important;
}
#idlebuster-landing-page .toggle-slider {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: 26px !important;
    height: 26px !important;
    background: white !important;
    border-radius: 50% !important;
    transition: transform 0.3s !important;
}
#idlebuster-landing-page .toggle-switch.active .toggle-slider {
    transform: translateX(26px) !important;
}
#idlebuster-landing-page .toggle-label {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666 !important;
    cursor: pointer !important;
}
#idlebuster-landing-page .toggle-label.active {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}
#idlebuster-landing-page .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    margin-top: 30px !important;
    align-items: center !important;
}
#idlebuster-landing-page .pricing-card {
    background: white !important;
    border-radius: 24px !important;
    padding: 32px 24px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
    border: 1px solid #e5e7eb !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}
#idlebuster-landing-page .pricing-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
#idlebuster-landing-page .pricing-card.featured {
    background: linear-gradient(145deg, #1e1b4b, #312e81) !important;
    border: 2px solid #6366f1 !important;
    color: white !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
    padding: 40px 24px !important;
    box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.35) !important;
}
#idlebuster-landing-page .pricing-card.featured:hover {
    transform: scale(1.08) translateY(-8px) !important;
}
#idlebuster-landing-page .pricing-card.featured .plan-name,
#idlebuster-landing-page .pricing-card.featured .plan-price,
#idlebuster-landing-page .pricing-card.featured .trial-info {
    color: white !important;
}
#idlebuster-landing-page .pricing-card.featured .billing-period,
#idlebuster-landing-page .pricing-card.featured .trial-details,
#idlebuster-landing-page .pricing-card.featured .feature-item {
    color: #e0e7ff !important;
}
#idlebuster-landing-page .pricing-card.featured .feature-item::before {
     color: #4ade80 !important;
}
#idlebuster-landing-page .pricing-card.featured .select-btn {
    background: #4f46e5 !important;
    color: white !important;
}
#idlebuster-landing-page .pricing-card.featured .select-btn:hover {
    background: #6366f1 !important;
}
#idlebuster-landing-page .popular-badge {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #4f46e5 !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
#idlebuster-landing-page .plan-header { text-align: center !important; margin-bottom: 12px !important; }
#idlebuster-landing-page .plan-name { font-size: 28px !important; font-weight: 800 !important; color: #1a1a1a !important; margin-bottom: 8px !important; }
#idlebuster-landing-page .plan-price { font-size: 48px !important; font-weight: 800 !important; color: #4f46e5 !important; display: block !important; line-height: 1 !important; }
#idlebuster-landing-page .billing-period { font-size: 15px !important; color: #6b7280 !important; margin-bottom: 24px !important; text-align: center !important; font-weight: 500 !important; }
#idlebuster-landing-page .select-btn { width: 100% !important; padding: 16px !important; background: #f3f4f6 !important; color: #1a1a1a !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.3s !important; margin-bottom: 24px !important; }
#idlebuster-landing-page .select-btn:hover { background: #e5e7eb !important; }
#idlebuster-landing-page .trial-info { text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 4px !important; }
#idlebuster-landing-page .trial-details { text-align: center !important; font-size: 13px !important; color: #6b7280 !important; margin-bottom: 32px !important; }
#idlebuster-landing-page .features-list { list-style: none !important; text-align: left !important; margin-top: auto !important; padding: 0 !important; }
#idlebuster-landing-page .feature-item { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; font-size: 15px !important; color: #334155 !important; font-weight: 500 !important; }
#idlebuster-landing-page .feature-item::before { content: '✓' !important; color: #4f46e5 !important; font-weight: 900 !important; font-size: 16px !important; flex-shrink: 0 !important; background: #e0e7ff !important; width: 24px !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; }

/* FAQ Pills */
#idlebuster-landing-page .faq-pill {
    cursor: pointer !important;
    transition: all 0.2s !important;
}
#idlebuster-landing-page .faq-pill.active {
    background-color: #4f46e5 !important;
    color: white !important;
    border-color: transparent !important;
}
#idlebuster-landing-page .faq-pill.active:hover {
     background-color: #4338ca !important;
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-delayed { animation: float 5s ease-in-out infinite; animation-delay: 1s; }
.animate-float-slow { animation: float 6s ease-in-out infinite; animation-delay: 0.5s; }

/* Demo Buttons */
#idlebuster-landing-page .demo-btn {
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#idlebuster-landing-page .demo-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
#idlebuster-landing-page .demo-btn.active {
    background-color: #4f46e5 !important;
    color: white !important;
    border-color: transparent !important;
    animation: none !important;
}
#idlebuster-landing-page .demo-btn.active i,
#idlebuster-landing-page .demo-btn.active svg {
    color: white !important;
    stroke: white !important;
}

/* Demo Animations */
@keyframes randomMouse {
    0%   { top: 50%; left: 50%; }
    15%  { top: 20%; left: 80%; }
    30%  { top: 70%; left: 20%; }
    45%  { top: 30%; left: 40%; }
    60%  { top: 80%; left: 70%; }
    75%  { top: 40%; left: 90%; }
    90%  { top: 60%; left: 30%; }
    100% { top: 50%; left: 50%; }
}
.animate-mouse-random { animation: randomMouse 8s ease-in-out infinite; }

@keyframes scrollOmni {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(0, -15%); }
    50%  { transform: translate(-15%, -15%); }
    75%  { transform: translate(-15%, 0); }
    100% { transform: translate(0, 0); }
}
.animate-scroll-omni { animation: scrollOmni 16s ease-in-out infinite; }

@keyframes scrollBarV {
     0%, 75%, 100% { transform: translateY(0); }
     25%, 50% { transform: translateY(30px); }
}
@keyframes scrollBarH {
     0%, 25%, 100% { transform: translateX(0); }
     50%, 75% { transform: translateX(30px); }
}
.animate-scroll-v-bar { animation: scrollBarV 16s ease-in-out infinite; }
.animate-scroll-h-bar { animation: scrollBarH 16s ease-in-out infinite; }

@keyframes appCycle {
    0%, 30% { opacity: 1; z-index: 10; transform: scale(1); }
    33%, 97% { opacity: 0; z-index: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; z-index: 10; transform: scale(1); }
}
#idlebuster-landing-page .app-window:nth-child(1) { animation: appCycle 12s infinite 0s; }
#idlebuster-landing-page .app-window:nth-child(2) { animation: appCycle 12s infinite 4s; }
#idlebuster-landing-page .app-window:nth-child(3) { animation: appCycle 12s infinite 8s; }

#status-badge-container { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; }
#status-badge-container.centered { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
#status-badge-container.corner { top: auto !important; left: auto !important; bottom: 1rem !important; right: 1rem !important; transform: translate(0, 0) scale(0.7) !important; opacity: 0.95 !important; z-index: 50 !important; }

/* Modals */
#idlebuster-landing-page .modal-overlay { display: none; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px) !important; z-index: 99998 !important; align-items: center !important; justify-content: center !important; }
#idlebuster-landing-page .modal-overlay.active { display: flex !important; }
#idlebuster-landing-page .modal { background: white !important; border-radius: 24px !important; padding: 40px !important; max-width: 480px !important; width: 95% !important; z-index: 99999 !important; position: relative !important; overflow: hidden !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
#idlebuster-landing-page .modal-close { position: absolute !important; top: 20px !important; right: 20px !important; width: 36px !important; height: 36px !important; border: none !important; background: #f1f5f9 !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; color: #64748b !important; transition: all 0.2s !important; }
#idlebuster-landing-page .modal-close:hover { background: #e2e8f0 !important; color: #1e293b !important; transform: rotate(90deg) !important; }
#idlebuster-landing-page .modal-step { display: none !important; opacity: 0 !important; transform: translateX(20px) !important; transition: all 0.3s ease !important; }
#idlebuster-landing-page .modal-step.active { display: block !important; opacity: 1 !important; transform: translateX(0) !important; }