/* --- 新增：實時行情 CSS --- */ .market-card { background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); /* 手機版高度稍小，電腦版高度正常 */ height: 11rem; } @media (min-width: 768px) { .market-card { height: 14rem; } } .market-card:hover { transform: translateY(-5px); background: rgba(15, 23, 42, 0.6); border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 20px 50px -12px rgba(16, 185, 129, 0.15); } /* 綠漲紅跌閃爍動畫 */ .price-flash-green { animation: flashGreen 0.6s ease-out; color: #4ade80 !important; text-shadow: 0 0 15px rgba(74, 222, 128, 0.6); } .price-flash-red { animation: flashRed 0.6s ease-out; color: #f87171 !important; text-shadow: 0 0 15px rgba(248, 113, 113, 0.6); } @keyframes flashGreen { 0% { transform: scale(1.05); color: #fff; } 100% { transform: scale(1); } } @keyframes flashRed { 0% { transform: scale(1.05); color: #fff; } 100% { transform: scale(1); } } /* SVG 線條 */ .chart-path-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: d 0.4s linear; } .chart-path-area { transition: d 0.4s linear; } /* --- 核心架構修正 --- */ html { overflow-x: hidden; max-width: 100vw; } body { margin: 0; padding: 0; width: 100%; font-family: 'Noto Sans SC', sans-serif; background-color: #020617; color: #e2e8f0; overflow-x: hidden; position: relative; } /* 滾動條樣式優化 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #020617; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #10b981; } /* 頁面切換特效 */ .view-section { display: none; opacity: 0; min-height: 100vh; padding-top: 80px; transition: opacity 0.5s ease-in-out; width: 100%; box-sizing: border-box; } .view-section.active { display: block; opacity: 1; } /* 玻璃擬態 */ .glass-panel { background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); transition: all 0.4s ease; } .glass-panel:hover { border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); transform: translateY(-5px); } /* 文字特效 */ .text-gradient { background: linear-gradient(135deg, #4ade80 0%, #2dd4bf 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 動態長條圖動畫 */ .bar-fill { height: 100%; width: 0; transition: width 6s cubic-bezier(0.22, 1, 0.36, 1); } /* 按鈕特效 - 鏡面閃光特效 */ .btn-glow { position: relative; overflow: hidden; z-index: 1; transition: all 0.3s; } .btn-glow::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); animation: btn-shine 2s infinite linear; } @keyframes btn-shine { 0% { left: -100%; } 100% { left: 150%; } } .btn-glow:hover { transform: scale(1.05); box-shadow: 0 0 35px rgba(16, 185, 129, 0.7); } /* 表格 (增強版) */ .tech-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; } .tech-table th { background: rgba(16, 185, 129, 0.15); color: #34d399; padding: 16px; text-align: left; border-bottom: 2px solid #10b981; font-weight: bold; } .tech-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; color: #cbd5e1; vertical-align: middle; } .tech-table tr:hover td { background: rgba(255,255,255,0.05); color: white; } .table-sub-header { background: rgba(255,255,255,0.03); font-weight: bold; color: #4ade80 !important; text-align: center; letter-spacing: 1px; } /* --- Header 特效容器 --- */ .header-container { position: relative; width: 100%; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.1); padding-top: 100px; padding-bottom: 80px; } /* 1. 流星雨 (#view-advantages) */ .header-meteor { background: linear-gradient(to bottom, #0f172a, #020617); position: relative; z-index: 1; } #stars-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .star { position: absolute; height: 2px; background: linear-gradient(-45deg, #5f91ff, rgba(0,0,255,0)); filter: drop-shadow(0 0 6px #699bff); animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; opacity: 0; } .star::before, .star::after { content: ''; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(0,0,255,0), #5f91ff, rgba(0,0,255,0)); border-radius: 100%; transform: translateX(50%) rotateZ(45deg); animation: shining 3000ms ease-in-out infinite; opacity: 0; } @keyframes tail { 0% { width: 0; } 30% { width: 100px; } 100% { width: 0; } } @keyframes shooting { 0% { transform: translateX(0) translateY(0) rotateZ(45deg); opacity: 1; } 100% { transform: translateX(300px) translateY(300px) rotateZ(45deg); opacity: 0; } } /* 2. K線流動 (#view-rules) - NEW */ .header-flow { background: #020617; position: relative; z-index: 1; } #flow-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* 3. 黃金神經網絡 (#view-accounts) */ .header-gold { background: radial-gradient(circle, #1e1b4b 0%, #020617 100%); position: relative; z-index: 1; } #gold-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* 4. 脈衝能量場 (#view-info) */ .header-tech { background: #020617; position: relative; z-index: 1; } .pulsing-energy-field { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; } .pulsing-energy-field::before, .pulsing-energy-field::after { content: ''; position: absolute; border-radius: 50%; opacity: 0.2; filter: blur(50px); animation: pulse-glow 10s infinite ease-in-out alternate; } .pulsing-energy-field::before { width: 400px; height: 400px; background: #8b5cf6; top: 10%; left: 10%; } .pulsing-energy-field::after { width: 500px; height: 500px; background: #3b82f6; bottom: 5%; right: 5%; animation-delay: 2s; animation-duration: 8s; } @keyframes pulse-glow { 0% { transform: scale(0.8); opacity: 0.2; } 100% { transform: scale(1.2); opacity: 0.4; } } /* 5. 下載中心 - 黃金數據半球 */ .header-download { background: radial-gradient(ellipse at bottom, #111827 0%, #020617 100%); position: relative; z-index: 1; } #download-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* 註冊頁特效 */ #register-canvas { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); } /* 語言選單 */ .lang-menu { display: none; position: absolute; top: 100%; right: 0; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; min-width: 140px; z-index: 100; } .lang-btn:hover .lang-menu { display: block; } .lang-btn-mobile { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255,255,255,0.1); } /* 通用動畫組件 */ .shield-anim { display: inline-block; animation: shieldPulse 3s infinite ease-in-out; transform-origin: center; } @keyframes shieldPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.8)); } 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.5)); } } /* 24h 雙軌行星儀 */ .orbit-container { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; } .orbit-ring { position: absolute; width: 100%; height: 100%; border: 2px dashed rgba(59, 130, 246, 0.5); border-radius: 50%; animation: spin 10s linear infinite; } .orbit-ring-inner { position: absolute; width: 70%; height: 70%; border: 2px solid rgba(45, 212, 191, 0.3); border-top-color: #2dd4bf; border-radius: 50%; animation: spin-reverse 6s linear infinite; } .orbit-text { font-family: 'Orbitron', sans-serif; font-weight: bold; font-size: 1.2rem; color: white; text-shadow: 0 0 10px rgba(59, 130, 246, 0.8); animation: pulse-text 2s infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin-reverse { 100% { transform: rotate(-360deg); } } @keyframes pulse-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* 動態圖標特效 */ .icon-radar-container { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .icon-radar-outer { position: absolute; width: 100%; height: 100%; border: 2px dashed rgba(96, 165, 250, 0.5); border-radius: 50%; animation: spin 8s linear infinite; } .icon-radar-inner { position: absolute; width: 60%; height: 60%; border: 2px solid rgba(96, 165, 250, 0.8); border-left-color: transparent; border-radius: 50%; animation: spin-reverse 4s linear infinite; } .icon-radar-core { color: #60a5fa; font-size: 1.5rem; animation: pulse-text 2s infinite; } .icon-growth-container { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .icon-growth-outer { position: absolute; width: 100%; height: 100%; border: 2px solid rgba(74, 222, 128, 0.3); border-top-color: #4ade80; border-radius: 50%; animation: spin 3s linear infinite; } .icon-growth-core { color: #4ade80; font-size: 1.5rem; animation: floatUpIcon 2s ease-in-out infinite; } @keyframes floatUpIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* 賬戶星球特效 */ .planet-node { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.5s ease; cursor: pointer; } .planet-node:hover { transform: scale(1.1); } .planet-core { z-index: 10; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.1); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } .planet-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.2); animation: spin-slow 10s linear infinite; pointer-events: none; } .planet-ring-2 { position: absolute; border-radius: 50%; border-top: 2px solid rgba(255,255,255,0.4); border-left: 2px solid transparent; width: 120%; height: 120%; animation: spin-reverse 8s linear infinite; pointer-events: none; } @keyframes spin-slow { 100% { transform: rotate(360deg); } } .node-mini .planet-core { border-color: #94a3b8; box-shadow: 0 0 30px rgba(148, 163, 184, 0.15); } .node-mini .planet-ring { border-color: rgba(148, 163, 184, 0.3); } .node-std .planet-core { border-color: #3b82f6; box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); } .node-std .planet-ring { border-color: rgba(59, 130, 246, 0.3); } .node-gold .planet-core { border-color: #eab308; box-shadow: 0 0 40px rgba(234, 179, 8, 0.3); background: radial-gradient(circle, rgba(234,179,8,0.1) 0%, rgba(15,23,42,0.8) 100%); } .node-gold .planet-ring { border-color: rgba(234, 179, 8, 0.4); border-style: solid; border-width: 1px; } .node-gold .planet-ring-2 { border-top-color: #eab308; } .node-dia .planet-core { border-color: #a855f7; box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); } .node-dia .planet-ring { border-color: rgba(168, 85, 247, 0.4); } .float-bubble { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } /* 下載中心步驟特效 */ .download-step { position: relative; background: rgba(15, 23, 42, 0.75); border: 1px solid transparent; transition: all 0.4s ease; overflow: hidden; } .download-step:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); border-color: rgba(16, 185, 129, 0.5); } .step-number-container { position: relative; width: 80px; height: 80px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; } .step-number-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; animation: stepRotate 8s linear infinite; opacity: 0.5; } .download-step:nth-child(1) .step-number-ring { border-top-color: #4ade80; animation-duration: 5s; } .download-step:nth-child(2) .step-number-ring { border-top-color: #3b82f6; animation-direction: reverse; animation-duration: 6s; } .download-step:nth-child(3) .step-number-ring { border-top-color: #f59e0b; animation-duration: 7s; } .download-step:nth-child(4) .step-number-ring { border-top-color: #a855f7; animation-direction: reverse; animation-duration: 8s; } @keyframes stepRotate { to { transform: rotate(360deg); } } .comp-col-width { width: 130px; min-width: 130px; } /* Focus Block Styling */ .focus-feature-card { background: rgba(15, 23, 42, 0.7); padding: 24px; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; border: 1px solid transparent; position: relative; z-index: 10; } .focus-feature-card:hover { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 25px rgba(74, 222, 128, 0.2); transform: translateY(-3px); } .left-panel-grid { border-right: 1px dashed rgba(255,255,255,0.1); } .feature-icon-wrapper { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 1rem; } .icon-pulse { animation: iconPulse 2s infinite ease-in-out; } @keyframes iconPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } /* Award Carousel */ .award-card-container { perspective: 1000px; cursor: pointer; transition: all 0.3s ease; } .award-card { position: relative; background: radial-gradient(circle at top left, rgba(20, 83, 45, 0.7) 0%, rgba(16, 185, 129, 0.1) 100%); padding: 30px; border-radius: 15px; border: 1px solid rgba(16, 185, 129, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease; transform-style: preserve-3d; will-change: transform; min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; } .award-card-container:hover .award-card { transform: rotateX(5deg) rotateY(-5deg); box-shadow: 0 20px 50px rgba(16, 185, 129, 0.4); } .award-icon-wrapper { position: relative; display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 1rem; } .award-card::before { content: ''; position: absolute; inset: 0; border-radius: 15px; padding: 2px; background: conic-gradient(from var(--angle), transparent 0deg, #10b981 10deg, transparent 60deg, #4ade80 70deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; opacity: 0; transition: opacity 0.5s ease; animation: award-border-rotate 8s linear infinite; } .award-card-container:hover .award-card::before { opacity: 0.8; } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes award-border-rotate { to { --angle: 360deg; } } .award-title-text { color: #facc15; text-shadow: 0 0 5px rgba(250, 204, 21, 0.5); font-weight: bold; } .award-title-text-fixed { font-size: 1rem; line-height: 1.5rem; } .award-source-text { color: #94a3b8; font-size: 0.875rem; margin-top: 10px; } .award-carousel-viewport { overflow: hidden; padding: 40px 0 80px; max-width: 1400px; margin: 0 auto; } #award-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .carousel-card-wrapper { flex: 0 0 20%; padding: 0 10px; opacity: 0.5; transform: scale(0.85); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: grayscale(100%); } @media (max-width: 1024px) { .carousel-card-wrapper { flex: 0 0 50%; } } @media (max-width: 640px) { /* 縮減加密技術區塊的頂部間距 */ #view-home section.py-24:has(.holo-lock-container) { padding-top: 2rem !important; /* 原本是 6rem (py-24) */ padding-bottom: 4rem !important; } /* 同時縮減上方專家區塊的底部間距，讓兩個板塊更緊湊 */ #view-home section.py-24:has(.matrix-panel) { padding-bottom: 1rem !important; } } .carousel-card-wrapper.active { opacity: 1; transform: scale(1.05); filter: grayscale(0%); z-index: 10; } .carousel-card-wrapper.active .award-card { transform: rotateX(0deg) rotateY(0deg); box-shadow: 0 20px 50px rgba(16, 185, 129, 0.5); border-color: rgba(16, 185, 129, 0.5); } .carousel-card-wrapper.active .award-card::before { opacity: 0.9; } /* 黃河優勢區塊 */ .adv-card-wrapper { perspective: 1000px; cursor: pointer; position: relative; z-index: 10; } .adv-card-3d { position: relative; background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.85) 0%, rgba(2, 6, 23, 0.95) 100%); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); border-radius: 1.5rem; padding: 3rem; text-align: center; overflow: hidden; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .adv-card-wrapper:hover .adv-card-3d { transform: rotateX(2deg) rotateY(-2deg) translateY(-5px); border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 20px 60px rgba(16, 185, 129, 0.5); } .adv-card-3d::before { content: ''; position: absolute; inset: -2px; border-radius: 1.5rem; opacity: 0; transition: opacity 0.5s; pointer-events: none; background: conic-gradient(from var(--border-angle), transparent 0deg, var(--ring-color) 30deg, transparent 90deg, var(--ring-color) 120deg, transparent 180deg, var(--ring-color) 210deg, transparent 270deg, var(--ring-color) 300deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; animation: node-border-rotate 8s linear infinite; } .adv-card-3d::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--ring-color) 20%, transparent 80%); opacity: 0.5; filter: blur(1px); animation: data-flow 5s linear infinite; transform: translateY(10px); z-index: 1; } @property --border-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes node-border-rotate { to { --border-angle: 360deg; } } @keyframes data-flow { 0% { transform: translateX(-100%) translateY(0px); } 50% { transform: translateX(100%) translateY(0px); } 50.1% { transform: translateX(-100%) translateY(0px); } 100% { transform: translateX(100%) translateY(0px); } } .adv-card-wrapper:hover .adv-card-3d::before { opacity: 0.8; } .adv-icon-ring { position: relative; width: 96px; height: 96px; margin: 0 auto 2rem; display: flex; align-items: center; justify-content: center; } .adv-icon-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--ring-color); border-right-color: var(--ring-color); opacity: 0.6; animation: spin 5s linear infinite; } .adv-icon-ring::after { content: ''; position: absolute; width: 80%; height: 80%; border-radius: 50%; background: var(--ring-color); opacity: 0.1; filter: blur(15px); animation: inner-pulse 2s infinite ease-in-out alternate; } @keyframes inner-pulse { 0% { transform: scale(0.9); opacity: 0.1; } 100% { transform: scale(1.1); opacity: 0.25; } } .adv-icon-ring .fa-solid { z-index: 10; position: relative; filter: drop-shadow(0 0 10px var(--ring-color)); } /* 信任之盾 */ .trust-shield-block { background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.05) 0%, rgba(15, 23, 42, 0.95) 100%); border: 1px solid rgba(16, 185, 129, 0.2); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5); border-radius: 2rem; overflow: hidden; position: relative; z-index: 10; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .trust-shield-block:hover { box-shadow: 0 0 60px rgba(16, 185, 129, 0.3); transform: translateY(-8px); } .data-globe-container { perspective: 800px; margin: 0 auto 2rem; width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; } .globe-core { position: relative; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 222, 128, 0.5) 0%, rgba(16, 185, 129, 0.1) 100%); box-shadow: 0 0 25px #4ade80; display: flex; align-items: center; justify-content: center; z-index: 10; animation: corePulse 2s infinite ease-in-out alternate; } .globe-core .fa-solid { color: white; font-size: 2.5rem; text-shadow: 0 0 8px #4ade80; } .globe-orbit { position: absolute; border-radius: 50%; border: 2px solid rgba(74, 222, 128, 0.6); opacity: 0.8; pointer-events: none; z-index: 5; } .globe-orbit-1 { width: 120px; height: 120px; border-top-color: transparent; border-bottom-color: transparent; transform: rotateX(75deg) rotateZ(0deg); animation: orbitSpin 15s infinite linear; } .globe-orbit-2 { width: 100px; height: 100px; border-left-color: transparent; border-right-color: transparent; border-color: rgba(59, 130, 246, 0.6); transform: rotateY(75deg) rotateZ(0deg); animation: orbitSpinReverse 10s infinite linear; } .data-stream { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 10px #2dd4bf; animation: streamFlow 5s infinite linear; z-index: 15; } @keyframes corePulse { 0% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 20px #4ade80; } 100% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 35px #4ade80; } } @keyframes orbitSpin { to { transform: rotateX(75deg) rotateZ(360deg); } } @keyframes orbitSpinReverse { to { transform: rotateY(75deg) rotateZ(-360deg); } } @keyframes streamFlow { 0% { transform: translate(-60px, 0) rotateZ(0deg); } 100% { transform: translate(60px, 0) rotateZ(360deg); } } /* 監管認證徽章 */ .reg-badge-card { position: relative; background: rgba(15, 23, 42, 0.9); border: 2px solid #3b82f6; box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); padding: 30px; border-radius: 1.5rem; text-align: center; transition: all 0.4s ease; transform-style: preserve-3d; transform: rotateX(5deg) rotateY(5deg); } .reg-badge-card:hover { box-shadow: 0 0 50px rgba(59, 130, 246, 0.5); transform: rotateX(0deg) rotateY(0deg); } .reg-badge-icon { position: relative; width: 100px; height: 100px; margin: 0 auto 1.5rem; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; animation: badgePulse 3s infinite ease-in-out; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); } .reg-badge-icon::before { content: '196'; position: absolute; top: -10px; right: -10px; background: #10b981; color: white; font-size: 1rem; font-weight: bold; padding: 5px 10px; border-radius: 10px; z-index: 10; } @keyframes badgePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } /* 榮譽獲獎卡片 (V19) */ .award-3d-card-wrapper { position: relative; perspective: 1000px; cursor: pointer; transition: all 0.4s ease; } .award-3d-card-wrapper[data-color="green"] { --main-color: #4ade80; --shadow-color: rgba(74, 222, 128, 0.6); } .award-3d-card-wrapper[data-color="blue"] { --main-color: #3b82f6; --shadow-color: rgba(59, 130, 246, 0.6); } .award-3d-card-wrapper[data-color="yellow"] { --main-color: #facc15; --shadow-color: rgba(250, 204, 21, 0.6); } .award-3d-card-wrapper[data-color="purple"] { --main-color: #a855f7; --shadow-color: rgba(168, 85, 247, 0.6); } .award-card-inner { position: relative; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 30px; text-align: center; min-height: 200px; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); overflow: hidden; z-index: 10; } .award-3d-card-wrapper:hover .award-card-inner { transform: rotateX(5deg) rotateY(-5deg) translateY(-8px); box-shadow: 0 25px 50px var(--shadow-color); } .award-card-inner::before { content: ''; position: absolute; inset: -2px; border-radius: 1.5rem; background: conic-gradient(from var(--angle), transparent 0deg, var(--main-color) 10deg, transparent 60deg, var(--main-color) 70deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; opacity: 0.5; animation: award-border-rotate 8s linear infinite; } .award-icon-container { position: relative; width: 80px; height: 80px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; } .award-icon-float { animation: iconFloating 3s infinite ease-in-out alternate; } @keyframes iconFloating { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-5px) scale(1.05); } } .award-icon-container::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: var(--main-color); opacity: 0.15; filter: blur(20px); animation: award-glow 4s infinite ease-in-out alternate; } @keyframes award-glow { 0% { transform: scale(0.8); opacity: 0.1; } 100% { transform: scale(1.1); opacity: 0.3; } } .award-icon-container .fa-solid { font-size: 3rem; color: var(--main-color); filter: drop-shadow(0 0 12px var(--main-color)); z-index: 10; } .award-3d-card-wrapper h3 { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); font-family: 'Orbitron', sans-serif; } /* 未來脈衝 & 時間軸 */ .future-pulse-ring { position: absolute; width: 100%; height: 100%; border: 2px solid rgba(251, 191, 36, 0.3); border-radius: 50%; animation: future-pulse 3s infinite ease-out; } @keyframes future-pulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } .journey-timeline { position: relative; max-width: 1200px; margin: 0 auto; padding: 60px 20px; } .timeline-path { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, transparent, #10b981, #f59e0b, #3b82f6, transparent); transform: translateX(-50%); z-index: 0; } .timeline-item { position: relative; margin-bottom: 60px; display: flex; align-items: center; z-index: 1; } .timeline-item:nth-child(odd) { flex-direction: row-reverse; } .timeline-item:nth-child(odd) .timeline-content { margin-right: 50%; margin-left: 40px; } .timeline-item:nth-child(even) .timeline-content { margin-left: 50%; margin-right: 40px; } .timeline-dot { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; background: #020617; border-radius: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 2; } .timeline-dot-inner { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #3b82f6); animation: timeline-dot-pulse 2s infinite; } @keyframes timeline-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } 50% { box-shadow: 0 0 0 20px rgba(245, 158, 11, 0); } } .timeline-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .timeline-content { flex: 1; transition: all 0.3s ease; } .timeline-content:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2); } .slogan-text-pc { font-size: 2.6rem; line-height: 1.2; } @media (min-width: 768px) { .slogan-text-pc { font-size: 4.5rem; line-height: 1.1; } } /* CTA Block */ .cta-glow-panel { position: relative; background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, #020617 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3rem; padding: 4rem; overflow: hidden; z-index: 10; } .cta-header-icon { position: relative; display: inline-flex; width: 100px; height: 100px; align-items: center; justify-content: center; margin-bottom: 2rem; } .cta-header-icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #facc15; opacity: 0.15; filter: blur(25px); animation: award-glow 4s infinite ease-in-out alternate; } .cta-header-icon .fas { font-size: 3.5rem; color: #facc15; filter: drop-shadow(0 0 15px #facc15); animation: iconFloating 3s infinite ease-in-out alternate; } .cta-stat-item { position: relative; padding: 1rem; border-left: 3px solid #10b981; transition: all 0.3s ease; cursor: pointer; } .cta-stat-item:hover { background: rgba(16, 185, 129, 0.1); border-color: #4ade80; } @media (max-width: 768px) { .timeline-path { left: 40px; } .timeline-item { flex-direction: column !important; align-items: flex-start; } .timeline-dot { left: 40px; } .timeline-item:nth-child(odd) .timeline-content, .timeline-item:nth-child(even) .timeline-content { margin-left: 80px; margin-right: 20px; width: calc(100% - 100px); } .future-pulse-ring { width: 300px; height: 300px; } .left-panel-grid { border-right: none; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 1.5rem; margin-bottom: 1.5rem; padding-right: 0; } .cta-glow-panel { padding: 2rem; border-radius: 2rem; } .cta-glow-panel .text-4xl { font-size: 2.25rem; } .cta-glow-panel .text-xl { font-size: 1.15rem; } .cta-glow-panel .text-2xl { font-size: 1.5rem; } } /* Mobile Menu */ #mobile-menu { transform: translateX(100%); overflow-y: scroll; } .mobile-menu-open { transform: translateX(0) !important; } .menu-close-icon { transform: rotate(90deg) scale(0.9); color: #4ade80; } @media (max-width: 640px) { .mobile-en-compact #nav-logo-text { font-family: 'Noto Sans SC', sans-serif !important; font-size: 1rem; letter-spacing: normal; line-height: 1.25rem; } .mobile-en-compact .btn-glow { padding: 0.5rem 0.75rem; font-size: 0.75rem; white-space: nowrap; } .mobile-en-compact .flex.justify-between.items-center { gap: 0.5rem; } .mobile-en-compact .flex.items-center.gap-3 { gap: 0.25rem !important; } .mobile-en-compact .flex.items-center.gap-3 img { height: 2.25rem; } .mobile-en-compact #mobile-menu-toggle { margin-left: 0.5rem; } #view-home .md\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-home .md\:grid-cols-3 > div:last-child { grid-column: span 2 / span 2; text-align: center; max-width: 50%; margin-left: auto; margin-right: auto; } #view-home .lg\:block.h-\[600px\] { display: block !important; height: 400px !important; margin-top: 3rem; } #view-home .w-80 { width: 250px !important; } #view-home .w-80.h-\[500px\] { height: 380px !important; } #view-home .w-80.h-\[500px\] .rounded-\[3rem\] { border-radius: 2rem !important; } #view-home .w-80.h-\[500px\] .rounded-\[2\.5rem\] { border-radius: 1.5rem !important; padding: 1.5rem !important; } #view-home .w-80.h-\[500px\] .text-4xl { font-size: 2rem !important; } #view-home .md\:grid-cols-2 > div { padding: 1.5rem; } #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; } #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 > div { padding: 1rem !important; } #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 .icon-radar-container, #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 .icon-growth-container { width: 50px !important; height: 50px !important; } #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 .icon-radar-core, #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 .icon-growth-core { font-size: 1.25rem !important; } #view-home .max-w-5xl.mx-auto.glass-panel .grid.md\:grid-cols-2 .text-2xl { font-size: 1.25rem !important; } #view-home .max-w-5xl.mx-auto.glass-panel .max-w-3xl.mx-auto { padding: 1.5rem !important; } #view-home .max-w-5xl.mx-auto.glass-panel .max-w-3xl.mx-auto .text-lg { font-size: 0.875rem !important; line-height: 1.5; } #view-rules .md\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-accounts .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-accounts .glass-panel { padding: 1.5rem !important; } #view-accounts .flex-col.md\:flex-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; padding: 0 !important; } #view-accounts .hidden.md\:block.absolute { display: none !important; } #view-accounts .planet-node { margin: 0 auto !important; transform: none !important; width: 120px !important; height: 120px !important; } #view-accounts .node-gold { transform: none !important; } #view-download .md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-download .download-step .text-7xl { font-size: 3rem; } #view-download .download-step .step-number-container { width: 60px; height: 60px; } #view-download .comp-col-width { min-width: 100px; width: 100px; font-size: 0.875rem; } #view-download .flex.justify-between.items-center span { font-size: 0.875rem; } #view-download .flex.flex-col.sm\:flex-row { flex-direction: column !important; gap: 1rem; } #view-download .max-w-6xl.mx-auto.text-center h2 { font-size: 2rem !important; white-space: pre-wrap !important; overflow-wrap: break-word !important; line-height: 1.15; } #view-download .max-w-6xl.mx-auto.text-center p { font-size: 1.15rem !important; line-height: 1.4; } #view-download .left-panel-grid h3, #view-download .lg\:pl-6 h3 { font-size: 1.75rem !important; } #view-advantages .md\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-advantages .adv-card-3d { padding: 2rem !important; } #view-advantages .md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; } #view-advantages .award-card-inner { padding: 20px !important; min-height: 180px; } #view-advantages .award-icon-container { width: 60px; height: 60px; margin-bottom: 0.5rem; } #view-advantages .award-icon-container .fa-solid { font-size: 2rem; } #view-advantages .award-3d-card-wrapper h3 { font-size: 1rem; line-height: 1.25rem; } #view-info .md\:grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-info .glass-panel { padding: 1.5rem !important; } #view-info .w-24.h-24 { width: 60px !important; height: 60px !important; } #view-info .w-24.h-24 .fa-4xl { font-size: 2rem !important; } #view-info .font-bold.text-2xl { font-size: 1.25rem !important; } #view-info .text-sm.text-slate-400 { font-size: 0.75rem !important; } footer .md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem; } #view-advantages .trust-shield-block { padding: 1.5rem !important; } #view-advantages .trust-shield-block .border-b.pb-8 { padding-bottom: 1.5rem !important; } #view-advantages .trust-shield-block .text-4xl.font-black { font-size: 1.75rem; } #view-advantages .trust-shield-block .text-lg.text-center { font-size: 1rem; } #view-advantages .reg-badge-card { padding: 1.5rem !important; } #view-advantages .reg-badge-card .text-2xl.font-black { font-size: 1.25rem; } #view-register .lg\:grid-cols-2 > div:first-child { display: none !important; } #view-register .lg\:grid-cols-2 > div:last-child { grid-column: span 2 / span 2; padding-top: 2rem; } #view-register .glass-panel { padding: 2rem !important; margin-top: 0 !important; border-radius: 1.5rem !important; } .slogan-text-pc { font-size: 2.6rem !important; } } @media (min-width: 1024px) { #view-home .container.lg\:grid-cols-2 > div:first-child { transform: translateY(-90px); } #view-home .container.lg\:grid-cols-2 > div:last-child { transform: translateY(-30px); } } /* --- 新增：守護者卡片自動發光動畫 --- */ .guardian-card.active-glow { border-color: #22c55e !important; /* 強制變成綠色邊框 */ box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); /* 增加一點發光暈影 */ transform: translateY(-5px); /* 微微上浮 */ } .guardian-card.active-glow i { color: #4ade80 !important; /* 強制變綠色 */ transform: scale(1.1); /* 圖標微微放大 */ transition: all 0.3s ease; } /* --- 量子矩陣卡片新樣式 (開始) --- */ .matrix-card { position: relative; background: #0f172a; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px; /* 流光邊框粗細 */ transition: transform 0.4s ease; height: 100%; z-index: 1; min-height: 320px; /* 確保高度一致 */ } /* 流光旋轉層 */ .matrix-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, transparent, transparent, var(--matrix-color)); animation: rotate-border 4s linear infinite; z-index: -2; } /* 內部內容遮罩層 */ .matrix-inner { background: rgba(10, 15, 30, 0.95); width: 100%; height: 100%; border-radius: 17px; padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* 科技網格背景 */ background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; transition: background 0.3s ease; } /* Hover 交互效果 */ .matrix-card:hover { transform: translateY(-10px); box-shadow: 0 0 50px -10px var(--matrix-glow); } .matrix-card:hover::before { /* 刪除了加速動畫，保留加亮的光束效果 */ background: conic-gradient(transparent, var(--matrix-color), transparent, var(--matrix-color)); } .matrix-card:hover .matrix-inner { background: rgba(10, 15, 30, 0.85); } @keyframes rotate-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 圖標樣式 */ .tech-icon { font-size: 3.5rem; margin-bottom: 1.5rem; background: linear-gradient(to bottom, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px var(--matrix-glow)); transition: all 0.4s ease; } .matrix-card:hover .tech-icon { transform: scale(1.1); -webkit-text-fill-color: var(--matrix-color); } /* 數字角標 */ .corner-num { position: absolute; top: 15px; left: 20px; font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.1); transition: all 0.4s; } .matrix-card:hover .corner-num { color: var(--matrix-color); text-shadow: 0 0 10px var(--matrix-glow); } /* 顏色變量 */ .mx-green { --matrix-color: #4ade80; --matrix-glow: rgba(74, 222, 128, 0.5); } .mx-blue { --matrix-color: #3b82f6; --matrix-glow: rgba(59, 130, 246, 0.5); } .mx-yellow { --matrix-color: #facc15; --matrix-glow: rgba(250, 204, 21, 0.5); } .mx-purple { --matrix-color: #d946ef; --matrix-glow: rgba(217, 70, 239, 0.5); } /* --- 量子矩陣卡片新樣式 (結束) --- */ /* --- 新增：量子矩陣按鈕與背景樣式 --- */ /* --- 修改後：量子矩陣按鈕 (手機版強制一排) --- */ .matrix-btn { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 8px; color: white; font-weight: bold; backdrop-filter: blur(5px); /* 核心佈局設定 */ display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); white-space: nowrap; /* 防止文字換行 */ /* 手機版尺寸 (緊湊模式) */ flex: 1; /* 讓按鈕平分寬度 */ min-width: 0; /* 允許按鈕縮小 */ padding: 10px 4px; /* 極小的左右內距 */ font-size: 0.75rem;/* 較小的字體 */ gap: 4px; /* 圖標與文字間距縮小 */ } .matrix-btn i { font-size: 1.1em; /* 手機版圖標稍微縮小 */ } /* 電腦版尺寸 (恢復大尺寸) */ @media (min-width: 768px) { .matrix-btn { flex: initial; /* 取消平分寬度，回復原本大小 */ padding: 16px 40px; font-size: 1.1rem; gap: 12px; min-width: 180px; } .matrix-btn i { font-size: 1.25em; } } .matrix-btn:hover { background: rgba(16, 185, 129, 0.1); border-color: #4ade80; box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); transform: translateY(-3px); } .matrix-btn i { font-size: 1.25em; } /* --- [新] 專家區塊專用樣式 (開始) --- */ .matrix-panel { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid #4ade80; position: relative; } .feature-grid-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); padding: 1.25rem; transition: all 0.3s; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .feature-grid-box:hover { background: rgba(74, 222, 128, 0.05); border-color: rgba(74, 222, 128, 0.3); } .perspective-floor { position: absolute; bottom: -50%; left: -20%; width: 140%; height: 100%; background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.05) 0%, transparent 70%); transform: perspective(1000px) rotateX(60deg); background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* 浮動動畫 */ .float-card { animation: float 6s ease-in-out infinite; } .float-card-delay { animation: float 6s ease-in-out infinite; animation-delay: -3s; } /* 負值延遲，讓動畫立即從中間開始 */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /* --- [新] 專家區塊專用樣式 (結束) --- */ /* --- 新增：數據驅動與監管護航區塊 (Bento Grid) --- */ .glass-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; position: relative; } .glass-card:hover { border-color: rgba(74, 222, 128, 0.3); transform: translateY(-5px); box-shadow: 0 20px 50px -12px rgba(16, 185, 129, 0.15); } /* 數據流動背景特效 */ .data-stream-bg { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; background-image: linear-gradient(0deg, transparent 24%, rgba(74, 222, 128, .3) 25%, rgba(74, 222, 128, .3) 26%, transparent 27%, transparent 74%, rgba(74, 222, 128, .3) 75%, rgba(74, 222, 128, .3) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(74, 222, 128, .3) 25%, rgba(74, 222, 128, .3) 26%, transparent 27%, transparent 74%, rgba(74, 222, 128, .3) 75%, rgba(74, 222, 128, .3) 76%, transparent 77%, transparent); background-size: 50px 50px; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* 掃描線 */ .pulse-line { height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #4ade80, transparent); position: absolute; top: 30%; opacity: 0.5; animation: scanLine 3s ease-in-out infinite; } @keyframes scanLine { 0%, 100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(100px); opacity: 0.8; } } /* 數據小方塊 */ .stat-box { background: rgba(2, 6, 23, 0.5); border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; } .glass-card:hover .stat-box { background: rgba(74, 222, 128, 0.05); border-color: rgba(74, 222, 128, 0.2); } /* 196 金牌晶片特效 */ .license-chip { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 1px solid rgba(251, 191, 36, 0.3); box-shadow: inset 0 0 30px rgba(251, 191, 36, 0.05); position: relative; overflow: hidden; } .license-chip::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(251, 191, 36, 0.3), transparent 30%); animation: rotateGold 4s linear infinite; opacity: 0; transition: opacity 0.5s; } .glass-card:hover .license-chip::before { opacity: 1; } @keyframes rotateGold { 100% { transform: rotate(360deg); } } .gold-glow-text { color: #fbbf24; text-shadow: 0 0 15px rgba(251, 191, 36, 0.5); } .verified-badge { animation: pulseBadge 2s infinite; } @keyframes pulseBadge { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* --- 新增：全息數位防護區塊 CSS (開始) --- */ .holo-lock-container { position: relative; width: 320px; height: 320px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .holo-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; transition: all 0.5s ease; } .holo-ring-1 { width: 100%; height: 100%; border-top-color: rgba(74, 222, 128, 0.3); border-bottom-color: rgba(74, 222, 128, 0.1); animation: spin 10s linear infinite; } .holo-ring-1::before { content: ''; position: absolute; top: -2px; left: 50%; width: 4px; height: 4px; background: #4ade80; box-shadow: 0 0 10px #4ade80; border-radius: 50%; } .holo-ring-2 { width: 80%; height: 80%; border: 2px dashed rgba(59, 130, 246, 0.3); animation: spin-reverse 15s linear infinite; } .holo-shield-core { position: relative; z-index: 10; width: 120px; height: 120px; background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2), rgba(2, 6, 23, 0.8)); border: 1px solid rgba(74, 222, 128, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); backdrop-filter: blur(5px); } .scanner-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #4ade80, transparent); top: 0; animation: scan-vertical 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; opacity: 0.8; z-index: 5; } @keyframes scan-vertical { 0% { top: 10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 90%; opacity: 0; } } .sec-feature-item { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sec-feature-item:hover { background: rgba(16, 185, 129, 0.05); border-color: rgba(74, 222, 128, 0.4); transform: translateX(10px); box-shadow: -5px 0 20px -5px rgba(16, 185, 129, 0.1); } .sec-feature-item:hover .sec-icon { color: #4ade80; transform: scale(1.1); } @media (max-width: 640px) { .holo-lock-container { width: 280px; height: 280px; } } /* --- 新增：全息數位防護區塊 CSS (結束) --- */ /* --- 新增：智慧金融生態系統 (動力支柱) CSS --- */ .pillar-card { position: relative; height: 350px; /* 高度設定 */ border-radius: 1.5rem; overflow: hidden; cursor: pointer; transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; } .pillar-bg { position: absolute; inset: 0; opacity: 0.6; transition: transform 0.7s ease, opacity 0.5s ease; z-index: 0; background-size: cover; background-position: center; } .pillar-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 6, 23, 1) 0%, rgba(2, 6, 23, 0.6) 50%, rgba(2, 6, 23, 0.3) 100%); z-index: 1; } .watermark-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8) rotate(-15deg); font-size: 10rem; opacity: 0.05; transition: all 0.7s ease; z-index: 0; pointer-events: none; } .pillar-content { position: relative; z-index: 10; transform: translateY(20px); transition: all 0.5s ease; } .pillar-details { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s ease; font-size: 0.9rem; line-height: 1.5; color: #94a3b8; } .pillar-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; } .pillar-icon-box { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); transition: all 0.3s; } /* 電腦版互動 */ @media (min-width: 768px) { .pillars-container { display: flex; gap: 1.5rem; height: 350px; } .pillar-card { flex: 1; } .pillar-card:hover { flex: 3; } .pillars-container:not(:hover) .pillar-card.active { flex: 3; } .pillar-card:hover, .pillars-container:not(:hover) .pillar-card.active { border-color: var(--theme-color); box-shadow: 0 0 30px var(--glow-color); } } /* 手機版互動 */ @media (max-width: 767px) { .pillars-container { display: flex; flex-direction: column; gap: 1rem; } .pillar-card { height: 120px; } .pillar-card:active, .pillar-card:hover, .pillar-card.active { height: 300px; } } /* 共用效果 */ .pillar-card:hover .pillar-bg, .pillars-container:not(:hover) .pillar-card.active .pillar-bg { transform: scale(1.1); opacity: 1; } .pillar-card:hover .watermark-icon, .pillars-container:not(:hover) .pillar-card.active .watermark-icon { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 0.15; color: var(--theme-color); } .pillar-card:hover .pillar-content, .pillars-container:not(:hover) .pillar-card.active .pillar-content { transform: translateY(0); } .pillar-card:hover .pillar-details, .pillars-container:not(:hover) .pillar-card.active .pillar-details { max-height: 200px; opacity: 1; margin-top: 1rem; } .pillar-card:hover .pillar-icon-box, .pillars-container:not(:hover) .pillar-card.active .pillar-icon-box { background: var(--theme-color); color: #000; } .pillar-card:hover h3, .pillars-container:not(:hover) .pillar-card.active h3 { color: white; text-shadow: 0 0 20px var(--glow-color); } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--theme-color); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; z-index: 20; box-shadow: 0 0 10px var(--theme-color); } .pillar-card:hover .scan-line, .pillars-container:not(:hover) .pillar-card.active .scan-line { transform: scaleX(1); transition-delay: 0.1s; } /* --- 新增：洞察市場區塊專用 CSS --- */ .text-gradient-gold { background: linear-gradient(135deg, #facc15 0%, #a16207 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .chart-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawChart 3s ease-out forwards; } @keyframes drawChart { to { stroke-dashoffset: 0; } } .chart-area { opacity: 0; animation: fadeInArea 3s ease-out forwards; } @keyframes fadeInArea { 0% { opacity: 0; } 100% { opacity: 1; } } .banner-glow { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); animation: bannerShine 3s infinite; } @keyframes bannerShine { 0% { left: -100%; } 100% { left: 200%; } } /* 確保儀表盤指針動畫正確 */ .gauge-needle { transform-origin: bottom center; animation: gaugeMove 4s ease-in-out infinite alternate; } @keyframes gaugeMove { 0% { transform: rotate(-45deg); } 100% { transform: rotate(45deg); } } /* 呼吸燈 */ .live-dot { width: 8px; height: 8px; background-color: #4ade80; border-radius: 50%; animation: livePulse 1.5s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* --- 新增：聚光燈與榮譽區塊 (Design #5) --- */ .spotlight-container { position: relative; overflow: hidden; } /* 3D 卡片樣式 */ .podium-card { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 10; } /* 中間 C 位卡片 (電腦版放大，手機版置頂) */ .card-center { border-color: rgba(234, 179, 8, 0.5); box-shadow: 0 0 50px rgba(234, 179, 8, 0.15); transform: scale(1.02) translateY(-5px); z-index: 20; } @media (min-width: 1024px) { .card-center { transform: scale(1.05) translateY(-10px); } } .card-center:hover { transform: scale(1.05) translateY(-10px); box-shadow: 0 0 70px rgba(234, 179, 8, 0.3); } @media (min-width: 1024px) { .card-center:hover { transform: scale(1.08) translateY(-15px); } } /* 兩側卡片 */ .card-side { transform: scale(1); filter: brightness(1); } @media (min-width: 1024px) { .card-side { transform: scale(0.95); filter: brightness(0.8); } } .card-side:hover { transform: scale(1) translateY(-5px); filter: brightness(1); border-color: rgba(255,255,255,0.3); } .badge-icon { animation: float-badge 3s ease-in-out infinite; } @keyframes float-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* --- Logo 跑馬燈容器 --- */ .logo-section { width: 100%; overflow: hidden; position: relative; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; margin-top: 3rem; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } /* 通用 Logo 樣式 */ .logo-item { padding: 0 40px; opacity: 0.4; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 60px; white-space: nowrap; filter: grayscale(100%); } .logo-item:hover { opacity: 1; transform: scale(1.1); filter: grayscale(0%); text-shadow: 0 0 15px currentColor; } /* 電腦版動畫 (單排) */ .desktop-track { display: flex; width: max-content; animation: scroll-left 40s linear infinite; } .desktop-track:hover { animation-play-state: paused; } /* 手機版動畫 (雙排) */ .mobile-track-row { display: flex; width: max-content; margin-bottom: 1rem; } .scroll-left { animation: scroll-left 30s linear infinite; } .scroll-right { animation: scroll-right 30s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* 響應式調整 */ @media (max-width: 768px) { .logo-item { padding: 0 20px; height: 40px; } .logo-text-lg { font-size: 1.2rem !important; } .logo-icon-lg { font-size: 1.4rem !important; } } /* === [A-01 升級攻略] 核心樣式 (AOS 連動修正版) === */ /* 1. 灰色軌道 (背景線) */ .ascension-track { position: absolute; top: 42px; /* 垂直對齊圖標中心 */ left: 10%; /* 左右縮排 */ width: 80%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; z-index: 0; /* 最底層 */ } /* 2. 彩色進度條 (會動的線) */ .ascension-progress { position: absolute; top: 42px; left: 10%; height: 4px; background: linear-gradient(90deg, #64748b 0%, #eab308 50%, #a855f7 100%); border-radius: 4px; z-index: 1; /* 比灰色軌道高 */ width: 0%; /* 初始寬度必須為 0 */ box-shadow: 0 0 15px rgba(234, 179, 8, 0.6); /* 這裡不直接寫 animation，改由下方的 aos-animate 觸發 */ } /* ★關鍵修正：只有當父容器 (.glass-panel) 被 AOS 觸發顯示後(加上了 aos-animate class)，才開始跑動畫 */ .glass-panel.aos-animate .ascension-progress { animation: lineRun 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.5s; /* 延遲 0.5秒，讓卡片先浮現，線再跑 */ } /* 定義動畫：從 0% 跑到 80% (填滿軌道) */ @keyframes lineRun { 0% { width: 0%; } 100% { width: 80%; } } /* 3. 節點圖標 (必須蓋住線條) */ .node-circle-bg { background-color: #0f172a; /* 使用深色背景遮擋穿過的線 */ z-index: 10; /* 層級最高，蓋在線上面 */ position: relative; } /* 4. 脈衝特效 */ .node-pulse { animation: nodePulse 3s infinite ease-in-out; } @keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } } /* 互動微效 */ .rule-card { transition: all 0.3s ease; } .rule-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); } /* ========================================= A-018 財富進階之路 (雷射全息版) CSS ========================================= */ /* 1. 雷射線容器 & 動畫 */ .prism-line-container { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; z-index: 0; transform: translateY(-50%); /* 兩側淡出遮罩 */ mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); } .prism-line-bg { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.05); } .prism-line-active { position: absolute; top: 0; left: 0; height: 100%; width: 50%; /* 絲滑流動光束 */ background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%); box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); opacity: 0.8; animation: smoothLaser 4s linear infinite; } @keyframes smoothLaser { 0% { left: -50%; } 100% { left: 100%; } } /* 2. 全息卡片本體 */ .holo-card { position: relative; width: 160px; height: 240px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 10; cursor: pointer; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .holo-card::before { content: ''; position: absolute; top: 15px; left: 15px; right: 15px; height: 1px; background: rgba(255,255,255,0.1); } .holo-card::after { content: ''; position: absolute; bottom: 15px; left: 15px; right: 15px; height: 1px; background: rgba(255,255,255,0.1); } /* 3. 掃描光效 */ .scan-beam { position: absolute; top: -50%; left: -50%; width: 200%; height: 20px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent); transform: rotate(45deg) translateY(-300px); transition: transform 0.6s; opacity: 0; } .holo-card:hover .scan-beam { opacity: 1; transform: rotate(45deg) translateY(300px); transition: transform 0.8s ease-in-out; } /* 4. Hover 狀態 */ .holo-card:hover { transform: translateY(-15px) scale(1.05); border-color: var(--card-color); box-shadow: 0 20px 50px var(--card-glow); background: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7)); } .holo-card:hover i { color: var(--card-color); transform: scale(1.2); text-shadow: 0 0 15px var(--card-color); } .holo-card:hover .card-title { color: var(--card-color); } .holo-card:hover .level-badge { color: var(--card-color); } /* 5. 等級標籤與配色 */ .level-badge { position: absolute; top: 18px; right: 15px; font-family: 'Orbitron', sans-serif; font-size: 0.6rem; color: rgba(255,255,255,0.3); } .hc-mini { --card-color: #94a3b8; --card-glow: rgba(148, 163, 184, 0.2); } .hc-std { --card-color: #3b82f6; --card-glow: rgba(59, 130, 246, 0.3); } .hc-gold { --card-color: #eab308; --card-glow: rgba(234, 179, 8, 0.4); } .hc-dia { --card-color: #d946ef; --card-glow: rgba(217, 70, 239, 0.3); } .hc-gold { border: 1px solid rgba(234, 179, 8, 0.3); box-shadow: 0 0 20px rgba(234, 179, 8, 0.1); } /* 6. 手機適配 */ @media (max-width: 768px) { .prism-line-container { display: none; } .holo-card { width: 100%; height: 100px; flex-direction: row; justify-content: flex-start; padding: 0 2rem; gap: 1.5rem; } .holo-card::before, .holo-card::after { display: none; } .card-content { text-align: left; } .mobile-arrow { display: block; margin-left: auto; color: rgba(255,255,255,0.2); } } @media (min-width: 769px) { .mobile-arrow { display: none; } } /* --- Z-07 賬戶分層專用樣式 (新增) --- */ .feature-group { display: flex; flex-direction: row; /* 強制橫向排列 */ flex-wrap: nowrap; /* 禁止換行 */ justify-content: center; align-items: center; gap: 20px; /* 電腦版間距 */ pointer-events: auto; width: 100%; max-width: 800px; margin: 0 auto; margin-top: 3rem; } .feature-node { display: flex; align-items: center; gap: 12px; padding: 10px 0; transition: transform 0.3s ease; white-space: nowrap; } .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(59, 130, 246, 0.3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); flex-shrink: 0; } .node-text { color: #cbd5e1; font-size: 1rem; font-weight: 500; } .separator { width: 1px; height: 24px; background: rgba(255,255,255,0.15); flex-shrink: 0; } .feature-node:hover .icon-circle { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); color: #60a5fa; transform: scale(1.05); } /* 手機版適配：強制單排 */ @media (max-width: 768px) { .feature-group { gap: 6px; /* 項目之間的間距 */ padding: 0 24px; /* ★ 關鍵修改：增加左右與螢幕邊緣的距離 (原為 5px) */ flex-wrap: nowrap !important; justify-content: space-between; /* 讓三個項目在留白後均勻分佈 */ width: 100%; box-sizing: border-box; /* 確保 padding 不會撐大寬度 */ } .feature-node { gap: 4px; /* 圖標與文字的間距微調 */ flex: 1; /* 讓項目平分剩餘空間 */ justify-content: center; } .icon-circle { width: 28px; /* 縮小圖標圓圈以適應手機 */ height: 28px; font-size: 0.8rem; flex-shrink: 0; /* 防止圖標被壓扁 */ } .node-text { font-size: 0.75rem; /* 字體縮小一點點，防止字太長換行 */ white-space: nowrap; } .separator { height: 12px; margin: 0; align-self: center; /* 確保分隔線垂直置中 */ opacity: 0.5; } } @media (max-width: 370px) { .node-text { font-size: 0.75rem; } .feature-group { gap: 2px; } } /* --- 新增：Design E (安全防護系統) 樣式 --- */ .command-wrapper { display: grid; gap: 1.5rem; width: 100%; min-height: 450px; } @media (min-width: 1024px) { .command-wrapper { grid-template-columns: 300px 1fr; height: 480px; } } .security-tabs { display: flex; flex-direction: column; gap: 1rem; height: 100%; } .tab-btn { position: relative; padding: 0 1.5rem; background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex: 1; } .tab-btn.active, .tab-btn:hover { background: rgba(30, 41, 59, 0.8); border-color: rgba(74, 222, 128, 0.5); transform: translateX(5px); box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.3); } .tab-btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #4ade80; opacity: 0; transition: opacity 0.3s; } .tab-btn.active::before { opacity: 1; } .tab-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.3s; flex-shrink: 0; } .tab-btn.active .tab-icon { background: #4ade80; color: #020617; } .display-screen { background: radial-gradient(circle at center, #0f172a, #020617); border: 1px solid rgba(74, 222, 128, 0.2); border-radius: 1rem; position: relative; overflow: hidden; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); height: 100%; display: flex; flex-direction: column; justify-content: center; } .screen-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(74, 222, 128, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } .screen-scanline { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(74, 222, 128, 0.02) 51%, transparent 52%); background-size: 100% 4px; animation: scanline 6s linear infinite; pointer-events: none; z-index: 20; } @keyframes scanline { 0% { top: -10%; } 100% { top: 110%; } } .screen-content { position: absolute; inset: 0; padding: 3rem; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: scale(0.95); transition: all 0.4s ease-in-out; pointer-events: none; } .screen-content.active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 10; } .big-icon-bg { position: absolute; right: -20px; bottom: -50px; font-size: 15rem; opacity: 0.05; transform: rotate(-15deg); pointer-events: none; } .corner-deco { position: absolute; width: 20px; height: 20px; border: 2px solid #4ade80; transition: all 0.3s; } .top-left { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .top-right { top: 10px; right: 10px; border-left: 0; border-bottom: 0; } .bottom-left { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .bottom-right { bottom: 10px; right: 10px; border-left: 0; border-top: 0; } @media (max-width: 1023px) { .command-wrapper { display: flex; flex-direction: column; height: auto; min-height: auto; } .security-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; height: auto; flex: none; } .tab-btn { flex-direction: column; padding: 1rem; text-align: center; justify-content: center; gap: 0.5rem; border-radius: 0.5rem; height: auto; } .tab-btn:hover, .tab-btn.active { transform: none; box-shadow: none; background: rgba(30, 41, 59, 0.9); border-color: #4ade80; } .tab-btn::before { display: none; } .display-screen { height: 400px; min-height: 400px; } .screen-content { padding: 1.5rem; justify-content: flex-start; padding-top: 3rem; } .big-icon-bg { font-size: 8rem; right: -10px; bottom: -10px; } .security-tabs .fa-chevron-right { display: none !important; } } /* --- zz01 榮譽獲獎區塊樣式 (開始) --- */ .font-mono-tech { font-family: 'Share Tech Mono', monospace; } .font-hud { font-family: 'Rajdhani', sans-serif; } /* Grid 佈局 (手機雙欄) */ .terminal-grid { display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); /* 手機預設雙欄 */ gap: 0.75rem; } @media (min-width: 768px) { .terminal-grid { gap: 1.5rem; } } @media (min-width: 1280px) { .terminal-grid { grid-template-columns: repeat(4, 1fr); } } /* 卡片本體 */ /* --- 方案 B：磨砂黑玻 (高對比、更通透) --- */ /* 卡片外框 (極淡的白色玻璃光澤) */ .tech-card { position: relative; background: rgba(30, 41, 59, 0.4); /* 極淡白 */ border: 1px solid rgba(148, 163, 184, 0.1); /* 更亮的白邊框 */ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); padding: 1px; transition: all 0.3s ease; cursor: pointer; height: 100%; } /* 卡片內部 (純黑) */ .tech-card-inner { /* 純黑底色，讓黃色光效對比最強 */ background: #0f172a; height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; padding: 1.25rem 0.75rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } @media (min-width: 768px) { .tech-card-inner { padding: 2rem 1.5rem; } } /* 裝飾：角落括號 */ .bracket { position: absolute; width: 8px; height: 8px; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .b-tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .b-tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .b-bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .tech-card:hover .bracket { border-color: #eab308; width: 12px; height: 12px; } /* Hover 發光與動效 */ .tech-card:hover { border-color: #eab308; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .tech-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 40%, rgba(234, 179, 8, 0.5) 50%, transparent 60%); background-size: 200% 200%; z-index: 0; opacity: 0; transition: opacity 0.3s; } .tech-card:hover::before { opacity: 1; animation: shine 1.5s infinite linear; } @keyframes shine { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* 內容元素 */ .icon-zone { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .main-icon { font-size: 2rem; color: #52525b; transition: all 0.3s; } .tech-card:hover .main-icon { color: #eab308; text-shadow: 0 0 15px rgba(234, 179, 8, 0.6); transform: scale(1.1); } .serial-no { font-size: 2rem; font-weight: 900; color: rgba(255, 255, 255, 0.03); font-family: 'Rajdhani', sans-serif; line-height: 1; } .tech-title { color: white; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 6px; min-height: 2.5em; } .tech-title::before { content: ''; display: block; width: 4px; height: 4px; background: #eab308; border-radius: 50%; box-shadow: 0 0 5px #eab308; flex-shrink: 0; } .tech-desc { color: #9ca3af; font-size: 0.75rem; line-height: 1.5; margin-bottom: 1.5rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 768px) { .main-icon { font-size: 2.5rem; } .serial-no { font-size: 3rem; } .tech-title { font-size: 1.25rem; gap: 10px; min-height: auto; } .tech-desc { font-size: 0.875rem; line-height: 1.6; margin-bottom: 2rem; -webkit-line-clamp: unset; } } /* 數據儀表板 */ .data-panel { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 0.75rem; margin-top: auto; } .data-label { font-size: 0.65rem; color: #6b7280; margin-bottom: 0.1rem; } .data-value { font-size: 1rem; color: #eab308; font-weight: bold; font-family: 'Share Tech Mono', monospace; } @media (min-width: 768px) { .data-label { font-size: 0.75rem; margin-bottom: 0.25rem; } .data-value { font-size: 1.2rem; } } /* 動畫組件 */ .tech-progress-bg { width: 100%; height: 3px; background: #333; margin-top: 4px; position: relative; overflow: hidden; } .tech-progress-bar { height: 100%; background: #eab308; width: 0; transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); } .tech-card:hover .tech-progress-bar { width: var(--w); } .wave-line { display: flex; align-items: flex-end; gap: 2px; height: 15px; } .wave-bar { width: 2px; background: #333; animation: wave 1s infinite ease-in-out; } .tech-card:hover .wave-bar { background: #eab308; } @keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } } .status-dot { width: 5px; height: 5px; background: #333; border-radius: 50%; display: inline-block; margin-right: 4px; } .tech-card:hover .status-dot { background: #10b981; box-shadow: 0 0 5px #10b981; animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0.5; } } /* --- zz01 榮譽獲獎區塊樣式 (結束) --- */ /* --- [修改] 優化後的玻璃擬態 (更圓潤、更緩慢) --- */ .glass-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; /* 保持大圓角 */ position: relative; overflow: hidden; /* 修改：時間改為 0.6s，曲線改為更平滑的 ease-out，營造緩慢高級感 */ transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); } .glass-card:hover { /* 修改：上浮距離增加到 -10px，配合慢速動畫更明顯 */ transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); background: rgba(15, 23, 42, 0.8); } /* --- [新增] 進度條流光特效 --- */ @keyframes progress-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .animate-progress-shimmer { animation: progress-shimmer 2s infinite linear; } .arrow-bounce { animation: bounceRight 1.5s infinite; } @keyframes bounceRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* --- L01-4 核心引擎儀表板 (最終定稿版) --- */ .engine-container { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); } .engine-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at center, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%); pointer-events: none; } /* 儀表板核心組件 */ .speedometer-wrapper { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* 色環與刻度 */ .dial-track { position: absolute; inset: 13px; border-radius: 50%; background: conic-gradient(from 135deg, rgba(255,255,255,0.05) 0deg, rgba(255,255,255,0.05) 270deg, transparent 270deg); mask-image: radial-gradient(transparent 68%, black 69%); -webkit-mask-image: radial-gradient(transparent 68%, black 69%); } .dial-energy { position: absolute; inset: 13px; border-radius: 50%; background: conic-gradient(from 135deg, #3b82f6 0deg, #4ade80 120deg, #fbbf24 200deg, #ef4444 240deg, #ef4444 270deg, transparent 270deg); mask-image: radial-gradient(transparent 68%, black 69%); -webkit-mask-image: radial-gradient(transparent 68%, black 69%); opacity: 0.8; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4)); } .ticks { position: absolute; inset: 13px; background: repeating-conic-gradient(from 135deg, rgba(255, 255, 255, 0.3) 0deg, rgba(255, 255, 255, 0.3) 0.6deg, transparent 0.6deg, transparent 10deg); z-index: 5; mask-image: radial-gradient(transparent 58%, black 58%, black 66%, transparent 66%); -webkit-mask-image: radial-gradient(transparent 58%, black 58%, black 66%, transparent 66%); } /* 指針系統 (由 JS 控制旋轉，不寫 animation) */ .needle-assembly { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; transform: rotate(-135deg); will-change: transform; } .needle { position: absolute; top: 20px; height: 110px; /* 長指針設定 */ width: 3px; background: #ef4444; border-radius: 4px; box-shadow: 0 0 15px #ef4444; transform-origin: bottom center; } .center-cap { position: absolute; width: 20px; height: 20px; background: #e2e8f0; border-radius: 50%; z-index: 10; box-shadow: 0 0 10px rgba(255,255,255,0.5); } /* 破表紅光 (由 JS 觸發 .max-load) */ .red-alert-glow { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%); opacity: 0; transition: opacity 0.1s ease-out; z-index: 0; } .speedometer-wrapper.max-load .red-alert-glow { opacity: 1; animation: glow-pulse-sync 0.2s infinite alternate; } @keyframes glow-pulse-sync { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 1; } } /* 特性卡片 */ .spec-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 16px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; height: 100%; } .spec-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent-color); opacity: 0.5; transition: all 0.4s; } .spec-card:hover { transform: translateY(-5px) translateX(5px); background: rgba(15, 23, 42, 0.9); border-color: var(--accent-color); box-shadow: 0 10px 30px -10px var(--glow-color); } .spec-card:hover::before { opacity: 1; width: 6px; } .neon-num { text-shadow: 0 0 10px var(--glow-color); font-family: 'Orbitron', sans-serif; } /* --- L01-4 樣式結束 --- */ /* --- H12 全像引力引擎 (嵌入式專用版) --- */ .stage-wrapper { position: relative; width: 100%; min-height: 800px; /* 電腦版高度 */ display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; /* 透明背景，透出網頁底色 */ } /* 裝飾性元素 */ .scan-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; pointer-events: none; z-index: 0; opacity: 0.5; } .energy-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(74, 222, 128, 0.05); border-radius: 50%; animation: ringRotate var(--t) infinite linear; pointer-events: none; } .streamer { position: absolute; top: 50%; left: 50%; height: 2px; background: linear-gradient(90deg, transparent, #4ade80, transparent); transform-origin: left center; animation: streamMove 3s infinite ease-out; opacity: 0; pointer-events: none; } /* 動畫定義 */ @keyframes ringRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes streamMove { 0% { width: 0; opacity: 0; transform: rotate(var(--r)) translateX(0); } 30% { opacity: 1; } 100% { width: 600px; opacity: 0; transform: rotate(var(--r)) translateX(100px); } } .glitch-text { animation: glitch 4s infinite; } @keyframes glitch { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-2px, 2px); color: #4ade80; } 95% { transform: translate(2px, -2px); color: #3b82f6; } } /* 節點文字設定 */ .gravity-node { position: absolute; z-index: 20; font-style: normal !important; } .gravity-node h3, .gravity-node p { font-style: normal !important; } /* --- 電腦版佈局 --- */ @media (min-width: 768px) { .node-tl { top: 15%; left: 15%; } .node-tr { top: 15%; right: 15%; text-align: right; } .node-bl { bottom: 15%; left: 15%; } .node-br { bottom: 15%; right: 15%; text-align: right; } } /* --- 手機版佈局 (強制顯示文字) --- */ @media (max-width: 767px) { .stage-wrapper { min-height: 650px; } /* 手機版高度 */ .gravity-node { width: 42%; } /* 座標定位：上下 20%，左右 5% */ .node-tl { top: 20% !important; left: 5% !important; } .node-tr { top: 20% !important; right: 5% !important; text-align: right; } .node-bl { bottom: 20% !important; left: 5% !important; } .node-br { bottom: 20% !important; right: 5% !important; text-align: right; } /* 字體調整 */ .gravity-node h3 { font-size: 1rem !important; margin-bottom: 2px !important; } /* ★關鍵：強制顯示副標題 */ .gravity-node p { font-size: 0.65rem !important; line-height: 1.3; display: block !important; opacity: 0.8; } /* 手機版激光調整 */ @keyframes streamMove { 0% { width: 0; opacity: 0; transform: rotate(var(--r)) translateX(0); } 20% { opacity: 0.9; } 100% { width: 45vw; opacity: 0; transform: rotate(var(--r)) translateX(10vw); } } .streamer { height: 3px; } .energy-ring { transform: translate(-50%, -50%) scale(0.65); } } /* --- 新增：全息鏡面金卡特效 (Holographic Gold Card) --- */ .holo-gold-card { position: relative; width: 100%; /* 改為 100% 以適應 Grid 佈局 */ max-width: 400px; /* 限制最大寬度保持美感 */ margin: 0 auto; /* 居中 */ min-height: 380px; /* 確保高度一致 */ display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 20px; z-index: 10; overflow: hidden; transition: transform 0.3s ease; box-shadow: 0 0 40px rgba(0,0,0,0.5); } .holo-gold-card:hover { transform: scale(1.02); box-shadow: 0 0 60px rgba(234, 179, 8, 0.3); } /* 1. 流動光束層 (旋轉金邊) */ .holo-gold-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( transparent 0deg, transparent 80deg, #facc15 100deg, #ffffff 110deg, #facc15 120deg, transparent 140deg, transparent 360deg ); animation: border-rotate 4s linear infinite; z-index: -2; } @keyframes border-rotate { 100% { transform: rotate(360deg); } } /* 2. 內部遮罩層 (網格背景) */ .card-body-mask { position: absolute; inset: 3px; /* 控制邊框粗細 */ background: rgba(15, 23, 42, 0.95); border-radius: 17px; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; } /* 3. 靜態鏡面反光 */ .glass-glare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at 50% 0%, rgba(255, 255, 255, 0.15) 0%, transparent 60% ); pointer-events: none; z-index: 0; } /* 文字特效 */ .gold-title { background: linear-gradient(to bottom, #fff, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.3)); } .gold-amount { font-family: 'Orbitron', sans-serif; background: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #a16207 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 10px 30px rgba(0,0,0,0.5); } /* 按鈕特效 */ .btn-claim { background: linear-gradient(90deg, #ca8a04, #facc15, #ca8a04); background-size: 200% auto; color: black; border: 1px solid #fde047; transition: all 0.3s; animation: btn-shine-loop 3s linear infinite; cursor: pointer; /* 強制手型 */ } .btn-claim:hover { box-shadow: 0 0 30px rgba(234, 179, 8, 0.6); transform: translateY(-2px); } @keyframes btn-shine-loop { to { background-position: 200% center; } } /* === 新增：交易時間卡片 (Holo Clock 風格) === */ .time-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(59, 130, 246, 0.2); /* 已移除左側藍色邊框 */ border-radius: 1.5rem; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 0 30px rgba(0,0,0,0.3); } .time-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); } /* 背景網格動效 */ .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom right, black, transparent); pointer-events: none; } /* 全息時鐘動畫 */ .holo-clock-container { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } .clock-ring { position: absolute; border-radius: 50%; border: 1px solid transparent; } .ring-outer { width: 100%; height: 100%; border-top-color: #3b82f6; border-right-color: rgba(59, 130, 246, 0.3); animation: spin 8s linear infinite; } .ring-middle { width: 70%; height: 70%; border: 1px dashed rgba(96, 165, 250, 0.6); animation: spin-reverse 12s linear infinite; } .ring-inner { width: 40%; height: 40%; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.5); box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); animation: pulse 2s infinite ease-in-out; } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes spin-reverse { 100% { transform: rotate(-360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } } /* 時間條膠囊樣式 */ .time-capsule { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; } .time-card:hover .time-capsule { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); } .font-orbitron { font-family: 'Orbitron', sans-serif; } /* --- 新增：光速軌道槓桿卡片 CSS --- */ .track-bg { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); } .bar-static { background: linear-gradient(90deg, #475569, #64748b); width: 2%; position: relative; } .bar-active { width: 0%; /* 由 JS 統一控制，確保同步 */ background: linear-gradient(90deg, #059669, #10b981, #34d399); box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); position: relative; overflow: hidden; /* 注意：這裡移除了 transition，改由 JS 驅動以保證與數字同步 */ } .flow-effect { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size: 200% 100%; animation: flowStream 1.5s linear infinite; transform: skewX(-20deg); } @keyframes flowStream { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .text-glow { text-shadow: 0 0 10px rgba(74, 222, 128, 0.6); } /* --- 量子數據網格表格樣式 (Quantum Data Grid) --- */ .specs-container { position: relative; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); margin-top: 20px; } .grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.1; background-image: linear-gradient(rgba(74, 222, 128, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.2) 1px, transparent 1px); background-size: 30px 30px; } .quantum-table { width: 100%; border-collapse: collapse; text-align: left; } .quantum-table th { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%); padding: 20px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #4ade80; } .th-highlight-gold { color: #facc15; text-shadow: 0 0 10px rgba(250, 204, 21, 0.3); } .th-highlight-silver { color: #cbd5e1; text-shadow: 0 0 10px rgba(203, 213, 225, 0.3); } .quantum-table td { padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #94a3b8; font-size: 0.95rem; vertical-align: middle; transition: all 0.3s ease; } /* Hover 特效 */ .quantum-table tbody tr:not(.section-header):hover { background-color: rgba(255, 255, 255, 0.08); cursor: default; } .quantum-table tbody tr:not(.section-header):hover td { color: #ffffff; } .quantum-table tbody tr:not(.section-header):hover td:first-child { color: #4ade80; padding-left: 30px; text-shadow: 0 0 8px rgba(74, 222, 128, 0.4); } /* 分類標題 */ .section-header td { background: rgba(74, 222, 128, 0.05); color: #4ade80 !important; font-weight: bold; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; padding: 12px 20px; border-bottom: 1px dashed rgba(74, 222, 128, 0.3); } /* 字體與工具 */ .font-num { font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; } .text-accent { color: #facc15; font-weight: bold; } .text-danger { color: #f87171; font-weight: bold; } .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; margin-right: 6px; } .badge-fixed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); } /* 手機響應式 */ @media (max-width: 768px) { .quantum-table thead { display: none; } .quantum-table tbody, .quantum-table tr, .quantum-table td { display: block; width: 100%; border: none; } .quantum-table tr { margin-bottom: 16px; background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; } .quantum-table tr.section-header { background: transparent; border: none; margin-bottom: 4px; margin-top: 24px; } .quantum-table tr.section-header td { background: transparent; padding: 0 4px 8px 4px; border-bottom: none; } .quantum-table tr:not(.section-header) { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "gold silver"; } .quantum-table td:first-child { grid-area: header; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent); color: #e2e8f0; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); } .quantum-table tbody tr:not(.section-header):hover td:first-child { padding-left: 16px; } /* 手機版取消位移 */ .quantum-table td:nth-child(2) { grid-area: gold; padding: 16px; background: rgba(250, 204, 21, 0.02); border-right: 1px solid rgba(255,255,255,0.05); position: relative; } /* 手機版標籤自動翻譯需要靠JS，這裡暫時用CSS偽元素顯示固定文字，或進階版用attr() */ .quantum-table td:nth-child(2)::before { content: "XAU"; display: block; font-size: 0.7rem; color: #facc15; margin-bottom: 6px; opacity: 0.7; } .quantum-table td:nth-child(3) { grid-area: silver; padding: 16px; position: relative; } .quantum-table td:nth-child(3)::before { content: "XAG"; display: block; font-size: 0.7rem; color: #e2e8f0; margin-bottom: 6px; opacity: 0.7; } .quantum-table tr:not(.section-header) td:last-child:nth-child(2) { grid-column: 1 / -1; border-right: none; background: transparent; } .quantum-table tr:not(.section-header) td:last-child:nth-child(2)::before { display: none; } } /* --- 新增：T02 投資規則卡片優化樣式 --- */ .calc-section-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* 卡片共用 */ .cyber-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; padding: 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.3s; } .cyber-card:hover { border-color: rgba(74, 222, 128, 0.3); transform: translateY(-5px); box-shadow: 0 10px 40px -10px rgba(16, 185, 129, 0.15); } /* 左側：公式模組 */ .math-block { background: rgba(2, 6, 23, 0.6); border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 1rem; padding: 1.5rem; margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } @media (min-width: 1024px) { .math-block { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; padding: 1.5rem 1rem; justify-content: center; } } .math-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .math-variable { display: inline-block; padding: 5px 8px; border-radius: 6px; margin: 2px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: all 0.3s; } .math-variable:hover { transform: scale(1.05); } .var-green { background: rgba(74, 222, 128, 0.1); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); } .var-blue { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); } .var-yellow { background: rgba(250, 204, 21, 0.1); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.2); } .var-gray { background: rgba(148, 163, 184, 0.1); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.2); } .var-op { color: #94a3b8; font-weight: bold; margin: 0 4px; font-family: monospace; font-size: 1.1em; } /* 底部情境模組 (T02) */ .scenario-container { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.05); } .scenario-box { background: rgba(30, 41, 59, 0.4); border-radius: 1rem; padding: 1rem; border: 1px solid transparent; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; text-align: center; } .mode-day:hover { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); } .icon-day { font-size: 1.5rem; color: #fbbf24; margin-bottom: 0.5rem; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4)); } .mode-night:hover { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); } .icon-night { font-size: 1.5rem; color: #818cf8; margin-bottom: 0.5rem; filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.4)); } .sc-title { font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; } .sc-desc { font-size: 0.7rem; color: #94a3b8; line-height: 1.4; } .sc-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; margin-top: 0.5rem; font-weight: bold; } .badge-free { background: rgba(74, 222, 128, 0.2); color: #4ade80; } .badge-cost { background: rgba(248, 113, 113, 0.2); color: #f87171; } /* 右側：交易票據 */ .trade-ticket { background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1rem; padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; } .trend-line-svg { width: 100%; height: 60px; overflow: visible; } .trend-path { fill: none; stroke: #4ade80; stroke-width: 3; stroke-linecap: round; } .trend-area { fill: url(#gradientGreen); opacity: 0.2; } .profit-highlight { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); color: #4ade80; box-shadow: 0 0 15px rgba(74, 222, 128, 0.1); } /* --- 帳戶體系 (Hub Style 最終版) CSS --- */ .font-orbitron { font-family: 'Orbitron', sans-serif; } /* 容器玻璃擬態 */ .hub-glass { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } /* 左側導航 (Nav) */ .nav-item { cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; position: relative; overflow: hidden; } .nav-item:hover { background: rgba(255,255,255,0.03); } .nav-item.active { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); } /* 指示條 */ .nav-indicator { position: absolute; left: 0; width: 4px; height: 100%; background: transparent; transition: background 0.3s; } .nav-item.active .nav-indicator { background: currentColor; box-shadow: 2px 0 15px currentColor; } /* 顏色定義 */ .theme-mini { color: #94a3b8; } /* 灰 */ .theme-std { color: #3b82f6; } /* 藍 */ .theme-gold { color: #eab308; } /* 金 */ .theme-dia { color: #a855f7; } /* 紫 */ /* 右側內容 (Content) */ .tier-panel { display: none; animation: fadeSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .tier-panel.active { display: flex; flex-direction: column; height: 100%; justify-content: center; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .benefit-box { background: rgba(255,255,255,0.03); border-left-width: 3px; } /* RWD 手機版優化 */ @media (max-width: 1023px) { .nav-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; } .nav-item { border-radius: 12px; padding: 10px; text-align: center; flex-direction: column; justify-content: center; aspect-ratio: 2.2/1; } .nav-indicator, .nav-desc { display: none; } .nav-title-text { font-size: 0.85rem; } .content-area { padding: 1.5rem; min-height: auto; } .benefits-grid-mobile { display: grid; grid-template-columns: 1fr 1fr !important; gap: 10px; } .benefit-box { padding: 0.75rem; } .benefit-box .val-text { font-size: 1rem; } .benefit-box .lbl-text { font-size: 0.7rem; } } @media (min-width: 1024px) { .nav-grid-mobile { display: block; padding: 2rem 0; } .nav-item { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; margin-bottom: 4px; border-radius: 0; text-align: left; } .content-area { padding: 3rem; } .benefits-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .benefit-box { padding: 1rem; } .benefit-box .val-text { font-size: 1.125rem; } .benefit-box .lbl-text { font-size: 0.75rem; } } *, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline }h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.-bottom-2{bottom:-0.5rem}.-bottom-4{bottom:-1rem}.-bottom-8{bottom:-2rem}.-right-10{right:-2.5rem}.-right-4{right:-1rem}.-top-10{top:-2.5rem}.bottom-0{bottom:0px}.bottom-10{bottom:2.5rem}.left-0{left:0px}.left-1\/2{left:50%}.left-4{left:1rem}.left-6{left:1.5rem}.left-\[20px\]{left:20px}.right-0{right:0px}.right-4{right:1rem}.right-\[0px\]{right:0px}.top-0{top:0px}.top-1\/2{top:50%}.top-4{top:1rem}.top-\[160px\]{top:160px}.top-\[60\%\]{top:60%}.top-\[60px\]{top:60px}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.order-3{order:3}.col-span-2{grid-column:span 2 / span 2}.m-\[1px\]{margin:1px}.mx-auto{margin-left:auto;margin-right:auto}.my-3{margin-top:0.75rem;margin-bottom:0.75rem}.mb-0{margin-bottom:0px}.mb-0\.5{margin-bottom:0.125rem}.mb-1{margin-bottom:0.25rem}.mb-1\.5{margin-bottom:0.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:0.75rem}.mb-32{margin-bottom:8rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:0.25rem}.ml-2{margin-left:0.5rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:0.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[-20px\]{margin-top:-20px}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1{height:0.25rem}.h-1\.5{height:0.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-28{height:7rem}.h-32{height:8rem}.h-4{height:1rem}.h-40{height:10rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[1px\]{height:1px}.h-\[300px\]{height:300px}.h-\[380px\]{height:380px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-\[600px\]{height:600px}.h-\[80px\]{height:80px}.h-\[900px\]{height:900px}.h-full{height:100%}.min-h-\[600px\]{min-height:600px}.min-h-screen{min-height:100vh}.w-1{width:0.25rem}.w-1\.5{width:0.375rem}.w-1\/3{width:33.333333%}.w-1\/4{width:25%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-\[400px\]{width:400px}.w-\[600px\]{width:600px}.w-\[85\%\]{width:85%}.w-\[90\%\]{width:90%}.w-\[900px\]{width:900px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[300px\]{max-width:300px}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-\[-200\%\]{--tw-translate-x:-200%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-\[-6deg\]{--tw-rotate:-6deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-skew-x-12{--tw-skew-x:-12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.animate-bounce{animation:bounce 1s infinite}@keyframes ping{75%, 100%{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.\!justify-start{justify-content:flex-start !important}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:0.125rem}.gap-1{gap:0.25rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:0.5rem}.gap-20{gap:5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-10 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}.space-y-16 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem * var(--tw-space-y-reverse))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2\.5rem\]{border-radius:2.5rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-none{border-radius:0px}.rounded-xl{border-radius:0.75rem}.rounded-bl-full{border-bottom-left-radius:9999px}.rounded-br-3xl{border-bottom-right-radius:1.5rem}.rounded-tr-3xl{border-top-right-radius:1.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0px}.border-l-4{border-left-width:4px}.border-l-8{border-left-width:8px}.border-r-4{border-right-width:4px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-blue-500\/20{border-color:rgb(59 130 246 / 0.2)}.border-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}.border-current{border-color:currentColor}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-green-500\/20{border-color:rgb(34 197 94 / 0.2)}.border-green-500\/30{border-color:rgb(34 197 94 / 0.3)}.border-green-500\/50{border-color:rgb(34 197 94 / 0.5)}.border-orange-500\/30{border-color:rgb(249 115 22 / 0.3)}.border-pink-500\/30{border-color:rgb(236 72 153 / 0.3)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.border-purple-500\/30{border-color:rgb(168 85 247 / 0.3)}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-red-500\/20{border-color:rgb(239 68 68 / 0.2)}.border-red-500\/30{border-color:rgb(239 68 68 / 0.3)}.border-slate-400\/20{border-color:rgb(148 163 184 / 0.2)}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139 / var(--tw-border-opacity, 1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-900{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\/10{border-color:rgb(255 255 255 / 0.1)}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.border-white\/30{border-color:rgb(255 255 255 / 0.3)}.border-white\/5{border-color:rgb(255 255 255 / 0.05)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.border-yellow-500\/20{border-color:rgb(234 179 8 / 0.2)}.border-yellow-500\/30{border-color:rgb(234 179 8 / 0.3)}.border-yellow-500\/50{border-color:rgb(234 179 8 / 0.5)}.border-l-blue-500{--tw-border-opacity:1;border-left-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-l-purple-500{--tw-border-opacity:1;border-left-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.border-l-slate-400{--tw-border-opacity:1;border-left-color:rgb(148 163 184 / var(--tw-border-opacity, 1))}.border-l-yellow-500{--tw-border-opacity:1;border-left-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.bg-\[\#02040a\]{--tw-bg-opacity:1;background-color:rgb(2 4 10 / var(--tw-bg-opacity, 1))}.bg-\[\#020617\]{--tw-bg-opacity:1;background-color:rgb(2 6 23 / var(--tw-bg-opacity, 1))}.bg-\[\#020617\]\/80{background-color:rgb(2 6 23 / 0.8)}.bg-\[\#0f172a\]{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-\[\#0f172a\]\/70{background-color:rgb(15 23 42 / 0.7)}.bg-\[\#0f172a\]\/80{background-color:rgb(15 23 42 / 0.8)}.bg-black\/20{background-color:rgb(0 0 0 / 0.2)}.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}.bg-black\/80{background-color:rgb(0 0 0 / 0.8)}.bg-blue-400\/10{background-color:rgb(96 165 250 / 0.1)}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/10{background-color:rgb(59 130 246 / 0.1)}.bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}.bg-blue-500\/5{background-color:rgb(59 130 246 / 0.05)}.bg-blue-500\/50{background-color:rgb(59 130 246 / 0.5)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-current{background-color:currentColor}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/10{background-color:rgb(34 197 94 / 0.1)}.bg-green-500\/20{background-color:rgb(34 197 94 / 0.2)}.bg-green-500\/5{background-color:rgb(34 197 94 / 0.05)}.bg-green-500\/50{background-color:rgb(34 197 94 / 0.5)}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-green-900\/30{background-color:rgb(20 83 45 / 0.3)}.bg-orange-500\/10{background-color:rgb(249 115 22 / 0.1)}.bg-pink-500\/10{background-color:rgb(236 72 153 / 0.1)}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-purple-500\/10{background-color:rgb(168 85 247 / 0.1)}.bg-purple-500\/20{background-color:rgb(168 85 247 / 0.2)}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-purple-900\/10{background-color:rgb(88 28 135 / 0.1)}.bg-purple-900\/40{background-color:rgb(88 28 135 / 0.4)}.bg-red-500\/10{background-color:rgb(239 68 68 / 0.1)}.bg-red-500\/20{background-color:rgb(239 68 68 / 0.2)}.bg-red-500\/5{background-color:rgb(239 68 68 / 0.05)}.bg-red-900\/30{background-color:rgb(127 29 29 / 0.3)}.bg-slate-400\/10{background-color:rgb(148 163 184 / 0.1)}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.bg-slate-700\/50{background-color:rgb(51 65 85 / 0.5)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-800\/30{background-color:rgb(30 41 59 / 0.3)}.bg-slate-800\/50{background-color:rgb(30 41 59 / 0.5)}.bg-slate-800\/80{background-color:rgb(30 41 59 / 0.8)}.bg-slate-900\/50{background-color:rgb(15 23 42 / 0.5)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-yellow-500\/10{background-color:rgb(234 179 8 / 0.1)}.bg-yellow-500\/20{background-color:rgb(234 179 8 / 0.2)}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-yellow-900\/10{background-color:rgb(113 63 18 / 0.1)}.bg-yellow-900\/40{background-color:rgb(113 63 18 / 0.4)}.bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4\=\'\)\]{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')}.bg-\[url\(\'https\:\/\/images\.unsplash\.com\/photo-1639322537228-f710d846310a\?q\=80\&w\=2000\&auto\=format\&fit\=crop\'\)\]{background-image:url('https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=2000&auto=format&fit=crop')}.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/carbon-fibre\.png\'\)\]{background-image:url('https://www.transparenttextures.com/patterns/carbon-fibre.png')}.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/cubes\.png\'\)\]{background-image:url('https://www.transparenttextures.com/patterns/cubes.png')}.bg-\[url\(\'https\:\/\/www\.transparenttextures\.com\/patterns\/dark-matter\.png\'\)\]{background-image:url('https://www.transparenttextures.com/patterns/dark-matter.png')}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500\/5{--tw-gradient-from:rgb(59 130 246 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-900{--tw-gradient-from:#1e3a8a var(--tw-gradient-from-position);--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-400{--tw-gradient-from:#4ade80 var(--tw-gradient-from-position);--tw-gradient-to:rgb(74 222 128 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgb(34 197 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500\/5{--tw-gradient-from:rgb(34 197 94 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(34 197 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-600{--tw-gradient-from:#16a34a var(--tw-gradient-from-position);--tw-gradient-to:rgb(22 163 74 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-900{--tw-gradient-from:#14532d var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 83 45 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-900\/20{--tw-gradient-from:rgb(20 83 45 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 83 45 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-500\/5{--tw-gradient-from:rgb(168 85 247 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-600{--tw-gradient-from:#475569 var(--tw-gradient-from-position);--tw-gradient-to:rgb(71 85 105 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-500\/20{--tw-gradient-from:rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);--tw-gradient-to:rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-500\/5{--tw-gradient-from:rgb(234 179 8 / 0.05) var(--tw-gradient-from-position);--tw-gradient-to:rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-900{--tw-gradient-from:#713f12 var(--tw-gradient-from-position);--tw-gradient-to:rgb(113 63 18 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-slate-700{--tw-gradient-to:rgb(51 65 85 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #334155 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-slate-900{--tw-gradient-to:rgb(15 23 42 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white\/20{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position)}.to-green-500{--tw-gradient-to:#22c55e var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.to-slate-500{--tw-gradient-to:#64748b var(--tw-gradient-to-position)}.to-slate-800{--tw-gradient-to:#1e293b var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-800{--tw-gradient-to:#115e59 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-fixed{background-attachment:fixed}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-center{background-position:center}.object-contain{object-fit:contain}.p-0{padding:0px}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-12{padding:3rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[2px\]{padding:2px}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0px;padding-bottom:0px}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:0.25rem}.pb-2{padding-bottom:0.5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:0.75rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-16{padding-left:4rem}.pl-3{padding-left:0.75rem}.pl-6{padding-left:1.5rem}.pr-1{padding-right:0.25rem}.pr-2{padding-right:0.5rem}.pr-3{padding-right:0.75rem}.pr-5{padding-right:1.25rem}.pt-10{padding-top:2.5rem}.pt-16{padding-top:4rem}.pt-2{padding-top:0.5rem}.pt-20{padding-top:5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.font-\[Orbitron\]{font-family:Orbitron}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-9xl{font-size:8rem;line-height:1}.text-\[0\.6rem\]{font-size:0.6rem}.text-\[10px\]{font-size:10px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-light{font-weight:300}.uppercase{text-transform:uppercase}.leading-loose{line-height:2}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.2em\]{letter-spacing:0.2em}.tracking-\[0\.3em\]{letter-spacing:0.3em}.tracking-tight{letter-spacing:-0.025em}.tracking-tighter{letter-spacing:-0.05em}.tracking-wide{letter-spacing:0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-500\/30{color:rgb(59 130 246 / 0.3)}.text-blue-500\/50{color:rgb(59 130 246 / 0.5)}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-green-100{--tw-text-opacity:1;color:rgb(220 252 231 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-green-300\/80{color:rgb(134 239 172 / 0.8)}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-green-400\/80{color:rgb(74 222 128 / 0.8)}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-green-500\/30{color:rgb(34 197 94 / 0.3)}.text-green-500\/80{color:rgb(34 197 94 / 0.8)}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-purple-100{--tw-text-opacity:1;color:rgb(243 232 255 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.text-purple-500\/50{color:rgb(168 85 247 / 0.5)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-100{--tw-text-opacity:1;color:rgb(254 249 195 / var(--tw-text-opacity, 1))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-yellow-500\/50{color:rgb(234 179 8 / 0.5)}.text-yellow-500\/80{color:rgb(234 179 8 / 0.8)}.accent-green-500{accent-color:#22c55e}.opacity-10{opacity:0.1}.opacity-20{opacity:0.2}.opacity-30{opacity:0.3}.opacity-40{opacity:0.4}.opacity-5{opacity:0.05}.opacity-50{opacity:0.5}.opacity-60{opacity:0.6}.opacity-80{opacity:0.8}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(168\2c 85\2c 247\2c 0\.5\)\]{--tw-shadow:0 0 10px rgba(168,85,247,0.5);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(234\2c 179\2c 8\2c 0\.3\)\]{--tw-shadow:0 0 15px rgba(234,179,8,0.3);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(234\2c 179\2c 8\2c 0\.5\)\]{--tw-shadow:0 0 15px rgba(234,179,8,0.5);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0 0 20px rgba(0,0,0,0.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(234\2c 179\2c 8\2c 0\.5\)\]{--tw-shadow:0 0 20px rgba(234,179,8,0.5);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(255\2c 255\2c 255\2c 0\.3\)\]{--tw-shadow:0 0 20px rgba(255,255,255,0.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(59\2c 130\2c 246\2c 0\.15\)\]{--tw-shadow:0 0 20px rgba(59,130,246,0.15);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_20px_rgba\(74\2c 222\2c 128\2c 0\.15\)\]{--tw-shadow:0 0 20px rgba(74,222,128,0.15);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_30px_\#10b981\]{--tw-shadow:0 0 30px #10b981;--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(168\2c 85\2c 247\2c 0\.4\)\]{--tw-shadow:0 0 30px rgba(168,85,247,0.4);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(234\2c 179\2c 8\2c 0\.2\)\]{--tw-shadow:0 0 30px rgba(234,179,8,0.2);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(234\2c 179\2c 8\2c 0\.4\)\]{--tw-shadow:0 0 30px rgba(234,179,8,0.4);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_0_80px_rgba\(16\2c 185\2c 129\2c 0\.15\)\]{--tw-shadow:0 0 80px rgba(16,185,129,0.15);--tw-shadow-colored:0 0 80px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-blue-900\/50{--tw-shadow-color:rgb(30 58 138 / 0.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-purple-900\/50{--tw-shadow-color:rgb(88 28 135 / 0.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-yellow-900\/50{--tw-shadow-color:rgb(113 63 18 / 0.5);--tw-shadow:var(--tw-shadow-colored)}.blur-\[100px\]{--tw-blur:blur(100px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[1px\]{--tw-blur:blur(1px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[50px\]{--tw-blur:blur(50px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[80px\]{--tw-blur:blur(80px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_10px_rgba\(234\2c 179\2c 8\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 0 10px rgba(234,179,8,0.8));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_10px_rgba\(74\2c 222\2c 128\2c 0\.8\)\]{--tw-drop-shadow:drop-shadow(0 0 10px rgba(74,222,128,0.8));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-100{transition-delay:100ms}.delay-150{transition-delay:150ms}.delay-75{transition-delay:75ms}.duration-1000{transition-duration:1000ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:translate-x-4:hover{--tw-translate-x:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-0:hover{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:\!border-blue-500:hover{--tw-border-opacity:1 !important;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1)) !important}.hover\:\!border-green-500:hover{--tw-border-opacity:1 !important;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1)) !important}.hover\:\!border-purple-500:hover{--tw-border-opacity:1 !important;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1)) !important}.hover\:border-purple-500:hover{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity, 1))}.hover\:border-slate-500:hover{--tw-border-opacity:1;border-color:rgb(100 116 139 / var(--tw-border-opacity, 1))}.hover\:border-yellow-500:hover{--tw-border-opacity:1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.hover\:bg-green-400:hover{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.hover\:bg-green-500\/20:hover{background-color:rgb(34 197 94 / 0.2)}.hover\:bg-purple-500:hover{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.hover\:bg-red-500\/10:hover{background-color:rgb(239 68 68 / 0.1)}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800\/50:hover{background-color:rgb(30 41 59 / 0.5)}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}.hover\:bg-yellow-400:hover{--tw-bg-opacity:1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.hover\:bg-yellow-500:hover{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_0_30px_rgba\(74\2c 222\2c 128\2c 0\.4\)\]:hover{--tw-shadow:0 0 30px rgba(74,222,128,0.4);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:shadow-\[0_0_30px_rgba\(74\2c 222\2c 128\2c 0\.6\)\]:hover{--tw-shadow:0 0 30px rgba(74,222,128,0.6);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:shadow-yellow-500\/50:hover{--tw-shadow-color:rgb(234 179 8 / 0.5);--tw-shadow:var(--tw-shadow-colored)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-green-500:focus{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.focus\:shadow-\[0_0_20px_rgba\(16\2c 185\2c 129\2c 0\.2\)\]:focus{--tw-shadow:0 0 20px rgba(16,185,129,0.2);--tw-shadow-colored:0 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:focus-within .group-focus-within\:text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:translate-x-2{--tw-translate-x:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-\[200\%\]{--tw-translate-x:200%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-3{--tw-rotate:3deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.group:hover .group-hover\:animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.group:hover .group-hover\:border-green-500\/50{border-color:rgb(34 197 94 / 0.5)}.group\/bank:hover .group-hover\/bank\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-blue-500\/20{background-color:rgb(59 130 246 / 0.2)}.group:hover .group-hover\:bg-green-500\/20{background-color:rgb(34 197 94 / 0.2)}.group:hover .group-hover\:bg-slate-400\/20{background-color:rgb(148 163 184 / 0.2)}.group:hover .group-hover\:bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:bg-yellow-500\/20{background-color:rgb(234 179 8 / 0.2)}.group\/item:hover .group-hover\/item\:text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-fuchsia-400{--tw-text-opacity:1;color:rgb(232 121 249 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:opacity-20{opacity:0.2}.group:hover .group-hover\:grayscale-0{--tw-grayscale:grayscale(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 640px){.sm\:block{display:block}.sm\:hidden{display:none}.sm\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-2{padding-top:0.5rem;padding-bottom:0.5rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width: 768px){.md\:col-span-12{grid-column:span 12 / span 12}.md\:col-span-4{grid-column:span 4 / span 4}.md\:col-span-5{grid-column:span 5 / span 5}.md\:col-span-7{grid-column:span 7 / span 7}.md\:my-4{margin-top:1rem;margin-bottom:1rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-2{margin-bottom:0.5rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-0{margin-top:0px}.md\:mt-24{margin-top:6rem}.md\:block{display:block}.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:hidden{display:none}.md\:h-14{height:3.5rem}.md\:h-20{height:5rem}.md\:h-28{height:7rem}.md\:h-40{height:10rem}.md\:h-\[340px\]{height:340px}.md\:h-\[400px\]{height:400px}.md\:w-12{width:3rem}.md\:w-14{width:3.5rem}.md\:w-2\/3{width:66.666667%}.md\:w-20{width:5rem}.md\:w-24{width:6rem}.md\:w-28{width:7rem}.md\:w-auto{width:auto}.md\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:justify-start{justify-content:flex-start}.md\:\!justify-center{justify-content:center !important}.md\:gap-2{gap:0.5rem}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:whitespace-nowrap{white-space:nowrap}.md\:rounded-2xl{border-radius:1rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-16{padding:4rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-2{padding-top:0.5rem;padding-bottom:0.5rem}.md\:py-3{padding-top:0.75rem;padding-bottom:0.75rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:pt-0{padding-top:0px}.md\:pt-24{padding-top:6rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-8xl{font-size:6rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:0.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-xs{font-size:0.75rem;line-height:1rem}}@media (min-width: 1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:order-3{order:3}.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-12{grid-column:span 12 / span 12}.lg\:col-span-5{grid-column:span 5 / span 5}.lg\:col-span-7{grid-column:span 7 / span 7}.lg\:mb-0{margin-bottom:0px}.lg\:mb-2{margin-bottom:0.5rem}.lg\:mr-\[50px\]{margin-right:50px}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-1\/3{width:33.333333%}.lg\:w-8{width:2rem}.lg\:w-full{width:100%}.lg\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:flex-row{flex-direction:row}.lg\:justify-end{justify-content:flex-end}.lg\:border-b-0{border-bottom-width:0px}.lg\:border-r{border-right-width:1px}.lg\:p-10{padding:2.5rem}.lg\:p-12{padding:3rem}.lg\:text-left{text-align:left}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}