/* ═══════════════════════════════════════════════════════════════
   INDEX PAGE STYLES - Optimized CSS
   ═══════════════════════════════════════════════════════════════ */

/* Logo Animations */
@keyframes logoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes logo-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.05); }
    28% { transform: scale(1); }
    42% { transform: scale(1.03); }
    56% { transform: scale(1); }
}

.logo-container {
    position: relative;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: logoSpin 10s linear infinite;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
}

.logo-core {
    position: absolute;
    inset: 4px;
    background: #0a0e17;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.light .logo-core, html:not(.dark) .logo-core { background: #e2e8f0 !important; }
html.dark .logo-core { background: #0a0e17 !important; }

.logo-heartbeat { animation: logo-heartbeat 2.5s ease-in-out infinite; }

/* CSS Variables */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 1rem;
}

html.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
}

/* Base Styles */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

/* Navbar */
.nav-blur { backdrop-filter: blur(12px); }
html:not(.dark) .nav-blur { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); }
html.dark .nav-blur { background: rgba(2, 6, 23, 0.8); border: 1px solid rgba(255, 255, 255, 0.05); }

/* Theme Switch */
.theme-switch { position: relative; width: 44px; height: 24px; border-radius: 999px; cursor: pointer; transition: background-color 0.3s; }
html:not(.dark) .theme-switch { background-color: #cbd5e1; }
html.dark .theme-switch { background-color: #6366f1; }

.theme-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); display: flex; align-items: center; justify-content: center; }
html:not(.dark) .theme-knob { transform: translateX(0); }
html.dark .theme-knob { transform: translateX(20px); }

html:not(.dark) .theme-icon-sun { display: block; }
html:not(.dark) .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: block; }

/* Glass Panel */
.glass-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); }
html.dark .glass-panel { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); }

/* Hero Glow */
.hero-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
html.dark .hero-glow { background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%); }

/* Card Hover Effects */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); }
html.dark .card-hover:hover { box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5); border-color: rgba(56, 189, 248, 0.3); }

/* Professional Styles */
.gradient-text-pro, .gradient-text-epic { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pro-badge, .hero-mega-badge { background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1)); border: 1px solid rgba(14, 165, 233, 0.3); }
.subtle-glow { box-shadow: 0 4px 20px rgba(14, 165, 233, 0.15); }

.pro-card-hover { transition: all 0.2s ease; }
.pro-card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
html.dark .pro-card-hover:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

.stat-card { background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(99, 102, 241, 0.05)); border: 1px solid rgba(14, 165, 233, 0.15); transition: all 0.2s ease; }
.stat-card:hover { border-color: rgba(14, 165, 233, 0.3); }

.terminal-pro { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(148, 163, 184, 0.1); }
.btn-primary-pro { background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); transition: all 0.2s ease; }
.btn-primary-pro:hover { opacity: 0.9; transform: translateY(-1px); }
.section-divider { background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent); height: 1px; }

/* Utility Classes */
.hidden-force { display: none !important; }
.neon-pulse { box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1); }
.rainbow-border { border-color: rgba(14, 165, 233, 0.3); }
@keyframes subtle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float-up { animation: subtle-float 4s ease-in-out infinite; }

/* Animations */
@keyframes heroEquityDraw { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } }
.hero-equity-line { stroke-dasharray: 1000; animation: heroEquityDraw 3s ease-out forwards; }

@keyframes roiCountUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-roi-counter { animation: roiCountUp 1s ease-out 0.5s forwards; }
.animation-delay-2000 { animation-delay: 2s; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer-effect { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); background-size: 200% 100%; animation: shimmer 2s infinite; }

@keyframes gradient-x { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.animate-gradient-x { background-size: 200% 200%; animation: gradient-x 3s ease infinite; }

/* Tooltip System */
.tooltip-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2)); border: 1px solid rgba(99, 102, 241, 0.3); cursor: help; font-size: 11px; font-weight: 600; color: #818cf8; transition: all 0.2s; flex-shrink: 0; }
.tooltip-trigger:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.4)); transform: scale(1.1); box-shadow: 0 0 12px rgba(99, 102, 241, 0.4); }
html:not(.dark) .tooltip-trigger { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15)); border-color: rgba(59, 130, 246, 0.3); color: #3b82f6; }

.tooltip-content { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 320px; padding: 16px; background: linear-gradient(145deg, #1e1b4b, #1e293b); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 1000; pointer-events: none; }
.tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(99, 102, 241, 0.3); }
.tooltip-trigger:hover .tooltip-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-5px); pointer-events: auto; }
.tooltip-title { font-size: 14px; font-weight: 700; color: #a5b4fc; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.tooltip-text { font-size: 13px; line-height: 1.6; color: #cbd5e1; }
.tooltip-text strong { color: #22d3ee; }

html:not(.dark) .tooltip-content { background: linear-gradient(145deg, #ffffff, #f1f5f9); border-color: rgba(59, 130, 246, 0.25); }
html:not(.dark) .tooltip-title { color: #3b82f6; }
html:not(.dark) .tooltip-text { color: #475569; }
html:not(.dark) .tooltip-text strong { color: #0891b2; }

/* Mobile Menu Settings */
.mobile-menu-settings { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; margin: 0 16px 16px 16px; background: rgba(100, 116, 139, 0.1); border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.1); }
.mobile-menu-settings-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.mobile-menu-settings-item:hover { background: rgba(6, 182, 212, 0.1); }
.mobile-menu-settings-item span { font-size: 13px; color: #64748b; }
html.dark .mobile-menu-settings-item span { color: #94a3b8; }

.mobile-theme-switch { width: 44px; height: 24px; border-radius: 999px; background-color: #cbd5e1; position: relative; cursor: pointer; transition: background-color 0.3s; }
html.dark .mobile-theme-switch { background-color: #6366f1; }
.mobile-theme-switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.3s; display: flex; align-items: center; justify-content: center; }
html.dark .mobile-theme-switch .knob { transform: translateX(20px); }

/* FAQ Accordion */
.faq-item { overflow: hidden; transition: all 0.3s ease; border: 1px solid transparent; }
.faq-item:hover { border-color: rgba(14, 165, 233, 0.2); }
.faq-question { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 1.25rem 1.5rem; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 1.5rem; }
.faq-item.open .faq-answer { max-height: 500px; padding: 0 1.5rem 1.25rem; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-arrow { transition: transform 0.3s ease; }

/* Auth Modal */
.auth-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-modal { position: relative; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
html:not(.dark) .auth-modal { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98)); border-color: rgba(59, 130, 246, 0.2); }

/* Mobile Responsive */
@media (max-width: 768px) {
    .logo-container { width: 36px !important; height: 36px !important; }
    .tooltip-content { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 32px) !important; max-width: 320px !important; z-index: 9999 !important; }
    .tooltip-trigger:hover .tooltip-content { transform: translate(-50%, -50%) !important; }
    .tooltip-content::after { display: none !important; }
    
    header.nav-blur { margin: 8px 12px !important; border-radius: 16px !important; top: 8px !important; }
    header .mx-auto { padding: 8px 12px !important; gap: 8px !important; }
    
    #mobile-menu { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 9999 !important; overflow-y: auto !important; }
}

@media (max-width: 640px) {
    .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }
    header { margin: 8px !important; border-radius: 16px !important; }
    .text-5xl, .text-6xl, .lg\\:text-7xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
    .text-4xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.25rem !important; }
    .py-24, .py-32 { padding-top: 48px !important; padding-bottom: 48px !important; }
    .grid-cols-2, .md\\:grid-cols-2, .lg\\:grid-cols-3 { grid-template-columns: 1fr !important; }
    .animate-blob { width: 200px !important; height: 200px !important; opacity: 0.15 !important; }
}

/* Testimonial Slider */
@keyframes testimonial-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.testimonial-scroll { animation: testimonial-scroll 60s linear infinite; }
.testimonial-scroll:hover { animation-play-state: paused; }