.top-header { background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border, rgba(108, 99, 255, 0.25)); z-index: 999; } .top-header .nav-link { color: var(--text-muted, #a0a0a0); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.85rem; transition: color 0.3s ease; text-decoration: none; } .top-header .nav-link:hover { color: var(--primary-color, #6c63ff); } .bottom-nav .nav-item { justify-content: center; flex-grow: 1; min-height: 55px; } .bottom-nav .nav-icon { margin-bottom: 0; font-size: 1.45rem; } .bottom-nav .nav-item.active .nav-icon { transform: scale(1.2); filter: drop-shadow(0 0 10px var(--primary-color, #6c63ff)); } .sticky-top-container { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem; z-index: 1001; pointer-events: none; } .sticky-top-element { pointer-events: auto; background: var(--glass-bg, rgba(30, 30, 30, 0.85)); backdrop-filter: blur(10px); border: 1px solid var(--glass-border, rgba(108, 99, 255, 0.25)); transition: var(--transition-bounce, all 0.6s ease); box-shadow: var(--magic-glow, 0 0 20px rgba(108, 99, 255, 0.5)); animation: sticky-pulse 3s infinite ease-in-out; text-decoration: none; color: var(--text-color, #e0e0e0); display: flex; align-items: center; justify-content: center; } @keyframes sticky-pulse { 0%, 100% { box-shadow: var(--magic-glow, 0 0 20px rgba(108, 99, 255, 0.4)); } 50% { box-shadow: var(--magic-glow-strong, 0 0 35px rgba(108, 99, 255, 0.7)); } } .sticky-top-element:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--magic-glow-strong, 0 0 40px rgba(108, 99, 255, 0.8)); border-color: var(--primary-color, #6c63ff); } .sticky-widget-round { border-radius: 50%; width: 48px; height: 48px; font-size: 1.1rem; } .sticky-contact-btn .fa-headset { color: var(--primary-color, #6c63ff); transition: var(--transition); } .sticky-contact-btn:hover .fa-headset { color: var(--primary-light, #8580ff); } .language-switcher { border-radius: var(--border-radius-xl, 24px); padding: 0.6rem 1rem; cursor: pointer; } .language-switcher .fa-globe { color: var(--secondary-color, #ff64c7); transition: var(--transition); margin-right: 0.5rem; } .language-switcher:hover .fa-globe { color: var(--secondary-light, #ff8ad9); } .lang-current-text { font-weight: 600; font-size: 0.9rem; color: var(--text-color); } .lang-chevron { font-size: 0.7rem; opacity: 0.7; margin-left: 0.5rem; } .lang-dropdown { background: var(--dark-light, #1e1e1e); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm, 12px); margin-top: 0.5rem !important; box-shadow: var(--glass-shadow); } .lang-option { font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 8px; transition: var(--transition); color:#75a9b4c2; } @keyframes slideInDown { from { opacity: 0; transform: translate(-50%, -100%); } to { opacity: 1; transform: translate(-50%, 0); } } @media (max-width: 576px) { .bottom-nav .nav-icon { font-size: 1.3rem; } .sticky-top-container { padding: 0.75rem; } .sticky-widget-round { width: 44px; height: 44px; font-size: 1rem; } .language-switcher { padding: 0.5rem 0.75rem; } .lang-current-text { font-size: 0.8rem; } } :root { --primary-color: #6c63ff; --primary-dark: #564fd8; --primary-light: #8580ff; --secondary-color: #ff64c7; --secondary-dark: #e04bad; --secondary-light: #ff8ad9; --dark-color: #121212; --darker-color: #0a0a0a; --dark-light: #1e1e1e; --light-color: #f8f9fa; --text-color: #e0e0e0; --text-muted: #a0a0a0; --accent-color: #a892fe; --success-color: #28a745; --warning-color: #ffc107; --danger-color: #dc3545; --bs-secondary-color: #b3b3b3; --info-color: #17a2b8; --purple-color: #8a63ff; --purple-dark: #6a4fd8; --teal-color: #20c997; --teal-dark: #1aa179; --orange-color: #fd7e14; --orange-dark: #e56a00; --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-color) 100%); --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--orange-color) 100%); --gradient-success: linear-gradient(135deg, var(--success-color) 0%, var(--teal-color) 100%); --gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, var(--orange-color) 100%); --gradient-danger: linear-gradient(135deg, var(--danger-color) 0%, #ff6b6b 100%); --gradient-dark: linear-gradient(135deg, var(--dark-color) 0%, var(--darker-color) 100%); --gradient-magic: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); --glass-bg: rgba(30, 30, 30, 0.85); --glass-border: rgba(108, 99, 255, 0.25); --glass-shadow: 0 8px 32px rgba(108, 99, 255, 0.15); --magic-glow: 0 0 20px rgba(108, 99, 255, 0.5); --magic-glow-strong: 0 0 30px rgba(108, 99, 255, 0.7); --border-radius-sm: 6px; --border-radius: 10px; --border-radius-lg: 14px; --border-radius-xl: 18px; --border-radius-xxl: 22px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-magic: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .modal-backdrop { z-index: -1; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text-color); background: var(--gradient-dark); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app-body { padding-bottom: 85px; position: relative; } .arcane-matrix { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.4; z-index: 1; } .tech-grid-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 24px, rgba(108, 99, 255, 0.03) 25px, rgba(108, 99, 255, 0.03) 26px, transparent 27px, transparent 49px, rgba(255, 100, 199, 0.02) 50px, rgba(255, 100, 199, 0.02) 51px, transparent 52px), linear-gradient(0deg, transparent 24px, rgba(108, 99, 255, 0.03) 25px, rgba(108, 99, 255, 0.03) 26px, transparent 27px, transparent 49px, rgba(255, 100, 199, 0.02) 50px, rgba(255, 100, 199, 0.02) 51px, transparent 52px); background-size: 75px 75px, 75px 75px; pointer-events: none; z-index: 1; } .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 9999; } .progress-bar { height: 100%; background: var(--gradient-primary); width: 0%; transition: width 0.3s ease; } .main-content { flex: 1; position: relative; z-index: 2; } .bottom-nav { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: 85%; max-width: 360px; background: var(--glass-bg); backdrop-filter: blur(20px); border-radius: var(--border-radius-xl); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--magic-glow); z-index: 1000; padding: 0.35rem 0.4rem; } .nav-container { display: flex; justify-content: space-between; align-items: center; position: relative; } .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-muted); padding: 0.4rem 0.5rem; border-radius: var(--border-radius-sm); transition: var(--transition-magic); flex: 1; position: relative; overflow: hidden; } .nav-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.1), transparent); transition: var(--transition); } .nav-item:hover::before { left: 100%; } .nav-item.active { color: var(--primary-color); background: rgba(108, 99, 255, 0.15); box-shadow: inset 0 0 20px rgba(108, 99, 255, 0.2); } .nav-item:hover { color: var(--primary-light); transform: translateY(-2px); } .nav-icon { font-size: 1.05rem; margin-bottom: 0.15rem; transition: var(--transition-bounce); } .nav-item.active .nav-icon { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(108, 99, 255, 0.6)); } .nav-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .nav-center { position: relative; margin: 0 0.5rem; } .nav-main-btn { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.05rem; text-decoration: none; box-shadow: 0 5px 18px rgba(108, 99, 255, 0.4), var(--magic-glow-strong); transition: var(--transition-bounce); position: relative; z-index: 2; border: 2px solid rgba(255, 255, 255, 0.3); } .nav-main-btn:hover { transform: scale(1.1) rotate(90deg); color: white; box-shadow: 0 12px 35px rgba(108, 99, 255, 0.6), 0 0 40px rgba(108, 99, 255, 0.8); } .nav-main-btn::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: var(--gradient-primary); border-radius: 50%; z-index: -1; opacity: 0.3; animation: magic-pulse 2s infinite; } @keyframes magic-pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.5; } } .nav-item[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--dark-color); color: white; padding: 0.5rem 1rem; border-radius: var(--border-radius-sm); font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: var(--transition); border: 1px solid var(--glass-border); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .nav-item:hover[data-tooltip]::after { opacity: 1; transform: translateX(-50%) translateY(-5px); } .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .display-2 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; line-height: 1.1; } .display-4 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; } .fw-black { font-weight: 900; } .magic-card { background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(138, 99, 255, 0.08) 25%, rgba(255, 100, 199, 0.06) 50%, rgba(253, 126, 20, 0.04) 100%); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); padding: 1.25rem; position: relative; overflow: hidden; transition: var(--transition-magic); box-shadow: var(--glass-shadow); } .magic-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.1), transparent); transition: left 0.6s ease; } .magic-card:hover::before { left: 100%; } .magic-card:hover { transform: translateY(-6px) scale(1.01); border-color: rgba(108, 99, 255, 0.4); box-shadow: 0 20px 40px rgba(108, 99, 255, 0.25), var(--magic-glow); } .ethereal-effect { position: relative; overflow: hidden; } .ethereal-effect::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(108, 99, 255, 0.1), transparent); transform: rotate(45deg); transition: all 0.6s ease; opacity: 0; } .ethereal-effect:hover::after { opacity: 1; transform: rotate(45deg) translate(20%, 20%); } .arcane-glitch { position: relative; overflow: hidden; } .arcane-glitch::before, .arcane-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .arcane-glitch::before { color: #ff64c7; animation: glitch-1 0.8s infinite linear alternate-reverse; } .arcane-glitch::after { color: #20c997; animation: glitch-2 0.8s infinite linear alternate-reverse; } @keyframes glitch-1 { 0% { transform: translate(0); opacity: 0.8; } 33% { transform: translate(-2px, 2px); opacity: 0.6; } 66% { transform: translate(2px, -2px); opacity: 0.4; } 100% { transform: translate(0); opacity: 0.8; } } @keyframes glitch-2 { 0% { transform: translate(0); opacity: 0.8; } 33% { transform: translate(2px, -2px); opacity: 0.6; } 66% { transform: translate(-2px, 2px); opacity: 0.4; } 100% { transform: translate(0); opacity: 0.8; } } .ethereal-field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .arcane-node { position: absolute; width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; animation: arcane-pulse 3s infinite; box-shadow: 0 0 10px var(--primary-color); } @keyframes arcane-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.5); opacity: 1; } } .data-stream { position: absolute; width: 2px; height: 100px; background: linear-gradient(to bottom, transparent, var(--primary-color), transparent); animation: data-flow 4s linear infinite; box-shadow: 0 0 8px var(--primary-color); } @keyframes data-flow { 0% { transform: translateY(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .magic-btn { background: var(--gradient-primary); border: none; border-radius: var(--border-radius); color: white; font-weight: 600; padding: 0.65rem 1.5rem; transition: var(--transition-bounce); position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(108, 99, 255, 0.3); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.88rem; } .magic-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: var(--transition); } .magic-btn:hover::before { left: 100%; } .magic-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 30px rgba(108, 99, 255, 0.5), var(--magic-glow); } .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.2); color: var(--text-color); background: transparent; transition: var(--transition-magic); } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } .arcane-stat-value { font-size: 1.5rem; font-weight: 900; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .arcane-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } .package-matrix-header { text-align: center; } .matrix-badge { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; } .matrix-name { font-size: 1.5rem; } .matrix-price { line-height: 1; } .feature-matrix-item { background: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius); padding: 1rem; transition: var(--transition); } .feature-matrix-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); } .matrix-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-matrix-list { background: rgba(255, 255, 255, 0.03); border-radius: var(--border-radius); padding: 1rem; } .ethereal-performance-icon { background: rgba(255, 255, 255, 0.1); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: var(--transition); } .performance-value { font-size: 2.5rem; font-weight: 900; line-height: 1; margin-bottom: 0.5rem; } .performance-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .performance-change { font-weight: 600; } .tech-stack-icon { background: rgba(255, 255, 255, 0.05); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: var(--transition-bounce); } .magic-card:hover .tech-stack-icon { transform: scale(1.1) rotate(10deg); } .tech-stats .badge { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.75rem; } .magic-slider { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); } .magic-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gradient-primary); cursor: pointer; box-shadow: 0 0 10px rgba(108, 99, 255, 0.6); border: 2px solid white; } .magic-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gradient-primary); cursor: pointer; box-shadow: 0 0 10px rgba(108, 99, 255, 0.6); border: 2px solid white; } .magic-select { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); color: var(--text-color); padding: 0.75rem 1rem; } .magic-select:focus { background: rgba(255, 255, 255, 0.15); border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(108, 99, 255, 0.25); color: var(--text-color); } .bg-primary-gradient { background: var(--gradient-primary) !important; } .magic-result { background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.2); } .magic-progress-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); overflow: hidden; } .magic-progress-bar .progress-bar { border-radius: 3px; transition: width 0.6s ease; } .bg-dark { background: var(--dark-color) !important; } .bg-darker { background: var(--darker-color) !important; } .text-light { color: var(--text-color) !important; } .text-white { color: white !important; } .opacity-90 { opacity: 0.9; } .opacity-75 { opacity: 0.75; } .min-vh-100 { min-height: 100vh; } @media (max-width: 768px) { .bottom-nav { width: 90%; bottom: 8px; padding: 0.3rem 0.35rem; } .nav-item { padding: 0.35rem 0.45rem; } .nav-icon { font-size: 1rem; } .nav-label { font-size: 0.6rem; } .nav-main-btn { width: 44px; height: 44px; font-size: 0.95rem; } .display-2 { font-size: 2rem; } .display-4 { font-size: 1.7rem; } .performance-value { font-size: 1.7rem; } .magic-card { padding: 1.15rem; } .arcane-stat-value { font-size: 1.1rem; } .magic-btn { padding: 0.6rem 1.35rem; font-size: 0.85rem; } } @media (max-width: 576px) { .app-body { padding-bottom: 70px; } .bottom-nav { padding: 0.28rem 0.32rem; width: 94%; bottom: 6px; } .nav-item { padding: 0.28rem 0.35rem; } .nav-icon { font-size: 0.92rem; margin-bottom: 0.12rem; } .nav-label { font-size: 0.58rem; } .nav-main-btn { width: 42px; height: 42px; font-size: 0.9rem; } .display-2 { font-size: 1.75rem; } .display-4 { font-size: 1.5rem; } .magic-btn { padding: 0.58rem 1.25rem; font-size: 0.82rem; } .magic-card { padding: 1rem; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(30, 30, 30, 0.8); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--gradient-primary); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } ::selection { background: rgba(108, 99, 255, 0.3); color: white; } button:focus, a:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } .loading { opacity: 0.7; pointer-events: none; position: relative; } .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .investment-card { background: rgba(30, 30, 50, 0.7); border: 1px solid rgba(108, 99, 255, 0.2); border-radius: var(--border-radius); padding: 1.5rem; transition: var(--transition); position: relative; overflow: hidden; } .investment-card:hover { border-color: rgba(108, 99, 255, 0.5); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(108, 99, 255, 0.2); } .investment-icon { font-size: 2rem; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(108, 99, 255, 0.15); color: var(--primary-color); transition: var(--transition); } .investment-card:hover .investment-icon { transform: scale(1.1) rotate(10deg); background: var(--gradient-primary); color: white; } .activity-log-item { display: flex; gap: 1rem; margin-bottom: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: var(--border-radius-sm); transition: var(--transition); border-left: 3px solid transparent; } .activity-log-item:hover { background: rgba(255, 255, 255, 0.06); border-left-color: var(--primary-color); transform: translateX(5px); } .log-icon { width: 45px; height: 45px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.1rem; color: white; } .log-icon-success { background: var(--gradient-success); } .log-icon-warning { background: var(--gradient-warning); } .log-icon-primary { background: var(--gradient-primary); } .log-icon-danger { background: var(--gradient-danger); } .log-icon-info { background: linear-gradient(135deg, #17a2b8, #20c997); }