:root {
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --secondary: #0F172A;
    --accent: #38BDF8;
    --bg-light: #F8FAFC;
    --text-main: #334155;
    --text-heading: #0F172A;
    --border: #E2E8F0;
    --card-bg: #FFFFFF;
}

* { box-sizing: border-box !important; margin: 0; padding: 0; }
html { scroll-behavior: smooth !important; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; background-color: var(--bg-light) !important; color: var(--text-main) !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased !important; }

.container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; }
.section-pad { padding: 60px 0 !important; }
@media (max-width: 768px) { .section-pad { padding: 40px 0 !important; } }

/* Global Header */
.navbar-clean { position: sticky !important; top: 0 !important; z-index: 1000 !important; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 0 !important; }
.nav-wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.brand-logo-only { font-size: 1.85rem !important; font-weight: 900 !important; color: var(--primary) !important; text-decoration: none !important; letter-spacing: -0.5px !important; }
.hamburger-btn { background: #F1F5F9 !important; border: 1px solid #CBD5E1 !important; color: var(--text-heading) !important; width: 44px !important; height: 44px !important; border-radius: 10px !important; font-size: 1.2rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s !important; }
.hamburger-btn:hover { background: var(--primary) !important; color: #FFF !important; border-color: var(--primary) !important; }

/* Slide-Over Drawer Navigation */
.drawer-overlay { position: fixed !important; inset: 0 !important; background: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(4px) !important; z-index: 2000 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s !important; }
.drawer-overlay.active { opacity: 1 !important; pointer-events: auto !important; }
.side-drawer { position: fixed !important; top: 0 !important; right: 0 !important; width: 340px !important; max-width: 85vw !important; height: 100vh !important; background: #0F172A !important; color: #F8FAFC !important; z-index: 2001 !important; padding: 24px 20px !important; box-shadow: -10px 0 30px rgba(0,0,0,0.4) !important; transform: translateX(100%) !important; transition: transform 0.3s ease !important; overflow-y: auto !important; }
.side-drawer.active { transform: translateX(0) !important; }
.drawer-header { display: flex !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid #1E293B !important; padding-bottom: 16px !important; margin-bottom: 20px !important; }
.drawer-close { background: none !important; border: none !important; color: #94A3B8 !important; font-size: 1.4rem !important; cursor: pointer !important; }
.drawer-close:hover { color: #FFF !important; }

/* Uniform Drawer Action Cards */
.drawer-nav { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.drawer-btn-card { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; background: #1E293B !important; color: #F8FAFC !important; text-decoration: none !important; border: 1px solid #334155 !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 600 !important; cursor: pointer !important; text-align: left !important; transition: all 0.2s !important; }
.drawer-btn-card:hover { background: #334155 !important; color: #38BDF8 !important; border-color: #475569 !important; }
.drawer-accordion-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; background: #1E293B !important; color: #F8FAFC !important; border: 1px solid #334155 !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 600 !important; cursor: pointer !important; text-align: left !important; transition: all 0.2s !important; }
.drawer-accordion-btn:hover { background: #334155 !important; }
.drawer-accordion-btn i.fa-chevron-down { font-size: 0.8rem !important; transition: transform 0.2s !important; color: #94A3B8 !important; }
.drawer-accordion-btn.active i.fa-chevron-down { transform: rotate(180deg) !important; color: #38BDF8 !important; }

.drawer-submenu { list-style: none !important; display: none !important; padding: 8px 0 0 10px !important; margin: 0 !important; }
.drawer-submenu.show { display: block !important; }
.drawer-submenu a { display: block !important; padding: 10px 14px !important; color: #94A3B8 !important; text-decoration: none !important; font-size: 0.9rem !important; font-weight: 500 !important; border-radius: 6px !important; transition: all 0.15s !important; }
.drawer-submenu a:hover { color: #38BDF8 !important; background: rgba(56, 189, 248, 0.08) !important; padding-left: 18px !important; }

/* Pricing Toggle & Subscriptions */
.pricing-toggle-wrapper { display: flex !important; background: #475569 !important; border-radius: 50px !important; padding: 6px !important; max-width: 400px !important; margin: 0 auto 40px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; }
.pricing-toggle-btn { flex: 1 !important; text-align: center !important; padding: 12px 24px !important; border-radius: 40px !important; font-weight: 700 !important; font-size: 1rem !important; color: #F8FAFC !important; border: none !important; background: transparent !important; cursor: pointer !important; transition: all 0.3s ease !important; }
.pricing-toggle-btn.active { background: #F8FAFC !important; color: #0F172A !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; }

.pricing-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; transition: opacity 0.4s ease !important; }
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr !important; } }

.pricing-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; padding: 30px 24px !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; transition: transform 0.2s !important; position: relative !important; overflow: hidden !important; }
.pricing-card:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; }
.pricing-card.elite { border: 2px solid #2563EB !important; }
.pricing-card.elite::before { content: "Most Popular" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; background: #2563EB !important; color: #FFF !important; text-align: center !important; font-size: 0.75rem !important; font-weight: 700 !important; padding: 4px 0 !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.pricing-card.super-elite { background: #0F172A !important; color: #FFFFFF !important; border-color: #0F172A !important; }

.plan-title { font-size: 1.25rem !important; font-weight: 800 !important; margin-bottom: 10px !important; color: #0F172A !important; }
.pricing-card.super-elite .plan-title { color: #FFFFFF !important; }
.plan-price { font-size: 2.5rem !important; font-weight: 900 !important; color: #2563EB !important; margin-bottom: 4px !important; }
.pricing-card.super-elite .plan-price { color: #38BDF8 !important; font-size: 2rem !important; }
.plan-period { font-size: 0.85rem !important; color: #64748B !important; font-weight: 600 !important; margin-bottom: 20px !important; }
.pricing-card.super-elite .plan-period { color: #94A3B8 !important; }

.plan-fee { background: #F1F5F9 !important; border-radius: 8px !important; padding: 10px !important; font-size: 0.85rem !important; color: #334155 !important; font-weight: 600 !important; margin-bottom: 24px !important; text-align: center !important; }
.pricing-card.super-elite .plan-fee { background: #1E293B !important; color: #CBD5E1 !important; }

.plan-features { list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; flex-grow: 1 !important; }
.plan-features li { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-size: 0.9rem !important; color: #475569 !important; margin-bottom: 12px !important; line-height: 1.5 !important; }
.pricing-card.super-elite .plan-features li { color: #CBD5E1 !important; }
.plan-features li i { color: #10B981 !important; margin-top: 3px !important; }

.btn-plan { display: block !important; width: 100% !important; padding: 12px !important; border-radius: 8px !important; text-align: center !important; font-weight: 700 !important; font-size: 0.95rem !important; text-decoration: none !important; transition: background 0.2s !important; background: #EFF6FF !important; color: #2563EB !important; border: 1px solid #BFDBFE !important; }
.btn-plan:hover { background: #DBEAFE !important; }
.pricing-card.elite .btn-plan { background: #2563EB !important; color: #FFFFFF !important; border-color: #2563EB !important; }
.pricing-card.elite .btn-plan:hover { background: #1D4ED8 !important; }
.pricing-card.super-elite .btn-plan { background: #38BDF8 !important; color: #0F172A !important; border-color: #38BDF8 !important; }
.pricing-card.super-elite .btn-plan:hover { background: #0EA5E9 !important; color: #FFFFFF !important; }

.pricing-disclaimer { margin-top: 40px !important; padding: 20px !important; background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; font-size: 0.85rem !important; color: #64748B !important; text-align: center !important; line-height: 1.6 !important; }

/* Typography */
.eyebrow { font-size: 0.85rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: var(--accent) !important; display: block !important; margin-bottom: 8px !important; }
.footer-clean { background: #FFF !important; border-top: 1px solid var(--border) !important; padding: 30px 0 !important; text-align: center !important; color: #64748B !important; font-size: 0.9rem !important; }