/* ======================================================================
   Alphafusion.io — Ultra Premium CSS 3.0
   World-Class Fintech & AI Trading SaaS
====================================================================== */

:root {
  --tk-blue:        #2563eb;
  --tk-blue-bright: #3b82f6;
  --tk-blue-light:  #60a5fa;
  --tk-blue-dark:   #1d4ed8;
  --tk-blue-soft:   rgba(37,99,235,0.18);
  --tk-green:       #22c55e;
  --tk-red:         #ef4444;
  --tk-yellow:      #f59e0b;
  --tk-orange:      #f97316;
  --tk-cyan:        #06b6d4;
  --tk-purple:      #a78bfa;
  --tk-bg:          #070c13;
  --tk-bg2:         #0b1220;
  --tk-card:        rgba(10,17,32,0.93);
  --tk-text:        #eef2ff;
  --tk-text-sec:    rgba(238,242,255,0.65);
  --tk-text-muted:  rgba(238,242,255,0.38);
  --tk-border:      rgba(255,255,255,0.06);
  --tk-r:    16px;
  --tk-r-lg: 22px;
  --tk-r-xl: 30px;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');
body { background: var(--tk-bg) !important; color: var(--tk-text) !important; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .tk-main-tab, .tk-sc-pair, .tk-stock-title { font-family: 'Sora', 'Manrope', sans-serif; }

@keyframes float {
  0%,100% { transform: perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(0px); }
  50%     { transform: perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(-16px); }
}
@keyframes glow-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes bar-grow { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }
@keyframes running-dot { 0%,100% { box-shadow: 0 0 4px rgba(34,197,94,0.7); transform: scale(1); } 50% { box-shadow: 0 0 12px rgba(34,197,94,1); transform: scale(1.4); } }
@keyframes countUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes arrowPulse { 0% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.4; } }
@keyframes fadeInOut { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }

/* === HERO === */
.tk-hero { background: var(--tk-bg); padding: 4.9rem 0 4.2rem; position: relative; overflow: hidden; }
.tk-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 55% at 75% 20%, rgba(37,99,235,0.24) 0%, transparent 58%),
              radial-gradient(ellipse 55% 40% at 5% 70%, rgba(37,99,235,0.11) 0%, transparent 55%),
              radial-gradient(ellipse 45% 30% at 50% 105%, rgba(6,182,212,0.07) 0%, transparent 50%),
              linear-gradient(180deg, var(--tk-bg) 0%, #080f1e 100%);
}
.tk-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(37,99,235,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.045) 1px, transparent 1px);
  background-size: 65px 65px;
}
.tk-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px; background: linear-gradient(to bottom, transparent, var(--tk-bg)); z-index: 1; pointer-events: none; }
.tk-hero > .container { position: relative; z-index: 2; }

.tk-hero-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(37,99,235,0.07)); border: 1px solid rgba(37,99,235,0.6); color: #93c5fd; border-radius: 50px; padding: 0.45rem 1.2rem; font-size: 0.83rem; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 2rem; box-shadow: 0 0 28px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.09); backdrop-filter: blur(12px); }
.tk-hero-badge i { color: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,0.5)); }
.tk-hero-title { font-size: clamp(3rem,5.5vw,5rem); font-weight: 900; line-height: 1.04; color: #fff; margin-bottom: 1.6rem; letter-spacing: -1.5px; }
.tk-hero-win { background: linear-gradient(130deg, #3b82f6 0%, #06b6d4 45%, #60a5fa 75%, #3b82f6 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 4s ease infinite; display: block; }
.tk-hero-sub { color: var(--tk-text-sec); font-size: 1.1rem; line-height: 1.78; max-width: 520px; margin-bottom: 2.3rem; }

.tk-btn-primary { background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-dark) 100%) !important; border: 1px solid rgba(37,99,235,0.55) !important; color: #fff !important; border-radius: 11px !important; font-weight: 700 !important; font-size: 0.95rem !important; letter-spacing: 0.2px !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important; box-shadow: 0 4px 20px rgba(37,99,235,0.42), inset 0 1px 0 rgba(255,255,255,0.13) !important; position: relative; overflow: hidden !important; }
.tk-btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.13), transparent 55%); opacity: 0; transition: opacity 0.25s; }
.tk-btn-primary:hover::after { opacity: 1; }
.tk-btn-primary:hover { background: linear-gradient(135deg, var(--tk-blue-bright) 0%, var(--tk-blue) 100%) !important; transform: translateY(-3px) !important; box-shadow: 0 10px 32px rgba(37,99,235,0.58), inset 0 1px 0 rgba(255,255,255,0.16) !important; }
.tk-btn-primary:active { transform: translateY(0) !important; }
.tk-btn-outline { background: rgba(255,255,255,0.045) !important; border: 1.5px solid rgba(255,255,255,0.2) !important; color: #fff !important; border-radius: 11px !important; font-weight: 600 !important; font-size: 0.95rem !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important; backdrop-filter: blur(12px) !important; }
.tk-btn-outline:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.38) !important; transform: translateY(-3px) !important; }
.tk-trust-badge { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 0.38rem 0.92rem; font-size: 0.8rem; color: var(--tk-text-sec); display: inline-flex; align-items: center; gap: 0.38rem; backdrop-filter: blur(10px); transition: all 0.25s; }
.tk-trust-badge:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.tk-trust-row .fa-telegram { color: #2CA5E0; }
.tk-trust-row .fa-whatsapp { color: #25D366; }
.tk-trust-row .fa-satellite-dish { color: var(--tk-blue-bright); }
.tk-trust-row .fa-brain { color: var(--tk-purple); }

/* === DASHBOARD CARD === */
.tk-dashboard-card {
  background: rgba(7,13,27,0.96); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(37,99,235,0.45); border-radius: 24px; padding: 1.85rem; width: 100%; max-width: 510px;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.18), 0 0 55px rgba(37,99,235,0.28), 0 0 110px rgba(37,99,235,0.11), 0 50px 100px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(37,99,235,0.12);
  animation: float 7s ease-in-out infinite; position: relative; overflow: hidden;
}
.tk-dashboard-card::before { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(59,130,246,1), transparent); }
.tk-dashboard-card::after { content: ''; position: absolute; top: 0; left: -40%; width: 180%; height: 50%; background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.10) 0%, transparent 60%); pointer-events: none; }
.tk-dash-header { display: flex; align-items: center; gap: 5px; margin-bottom: 1.3rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.tk-dash-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.tk-dash-dot.red { background: #ef4444; box-shadow: 0 0 7px rgba(239,68,68,0.75); }
.tk-dash-dot.yellow { background: #f59e0b; box-shadow: 0 0 7px rgba(245,158,11,0.75); }
.tk-dash-dot.green { background: #22c55e; box-shadow: 0 0 7px rgba(34,197,94,0.75); }
.tk-stat-pill { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 13px; padding: 0.75rem 1rem; flex: 1; text-align: center; transition: background 0.25s; position: relative; overflow: hidden; }
.tk-stat-pill::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
.tk-stat-pill:hover { background: rgba(255,255,255,0.055); }
.tk-stat-pill.green .tk-stat-value { color: var(--tk-green); text-shadow: 0 0 10px rgba(34,197,94,0.5); }
.tk-stat-value { font-size: 1rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tk-stat-label { font-size: 0.64rem; color: var(--tk-text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.tk-mini-chart { display: flex; align-items: flex-end; gap: 3px; height: 70px; background: rgba(0,0,0,0.28); border-radius: 11px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.05); }
.tk-mini-chart.sm { height: 58px; }
.tk-bar { flex: 1; background: rgba(37,99,235,0.22); border-radius: 3px 3px 0 0; transition: background 0.3s; animation: bar-grow 0.65s cubic-bezier(0.4,0,0.2,1) both; }
.tk-bar:nth-child(1){animation-delay:.04s}.tk-bar:nth-child(2){animation-delay:.09s}.tk-bar:nth-child(3){animation-delay:.14s}.tk-bar:nth-child(4){animation-delay:.19s}.tk-bar:nth-child(5){animation-delay:.24s}.tk-bar:nth-child(6){animation-delay:.29s}.tk-bar:nth-child(7){animation-delay:.34s}.tk-bar:nth-child(8){animation-delay:.39s}.tk-bar:nth-child(9){animation-delay:.44s}.tk-bar:nth-child(10){animation-delay:.49s}
.tk-bar.active { background: linear-gradient(to top, var(--tk-blue) 0%, var(--tk-blue-bright) 65%, #93c5fd 100%); box-shadow: 0 0 14px rgba(37,99,235,0.75), 0 0 24px rgba(37,99,235,0.35); }
.tk-signal-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: 9px; margin-top: 6px; background: rgba(255,255,255,0.025); border: 1px solid transparent; font-size: 0.82rem; transition: all 0.2s; }
.tk-signal-row:hover { background: rgba(255,255,255,0.048); }
.tk-signal-row.buy { border-left: 2.5px solid rgba(34,197,94,0.55); }
.tk-signal-row.sell { border-left: 2.5px solid rgba(239,68,68,0.55); }
.tk-pair { flex: 1; font-weight: 700; color: #fff; font-size: 0.84rem; }
.tk-action { border-radius: 5px; padding: 2px 9px; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; }
.tk-action.buy { background: rgba(34,197,94,0.16); color: var(--tk-green); box-shadow: 0 0 9px rgba(34,197,94,0.18); }
.tk-action.sell { background: rgba(239,68,68,0.16); color: var(--tk-red); box-shadow: 0 0 9px rgba(239,68,68,0.18); }
.tk-conf { font-size: 0.69rem; color: var(--tk-text-muted); font-variant-numeric: tabular-nums; }

/* === PRODUCTS SECTION === */
.tk-products-section { background: var(--tk-bg); padding: 4.2rem 0 3.8rem; position: relative; }
.tk-products-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.65), transparent); }
.tk-main-tabs { border-bottom: none !important; padding: 6px !important; background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px !important; display: inline-flex !important; gap: 5px !important; margin-bottom: 1.1rem !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
.tk-main-tab { background: transparent; border: 1px solid transparent !important; border-bottom: 1px solid transparent !important; color: rgba(255,255,255,0.48); padding: 0.75rem 1.65rem; border-radius: 14px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; letter-spacing: 0.2px; position: relative; }
.tk-main-tab i { transition: transform 0.3s, filter 0.3s; }
.tk-main-tab:hover { color: rgba(255,255,255,0.88); background: rgba(255,255,255,0.06); }
.tk-main-tab:hover i { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)); }
.tk-main-tab.active { color: #fff; background: linear-gradient(145deg, rgba(37,99,235,0.4), rgba(37,99,235,0.2)) !important; border-color: rgba(37,99,235,0.58) !important; box-shadow: 0 0 24px rgba(37,99,235,0.35), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); }
.tk-main-tab.active i { color: var(--tk-blue-bright); filter: drop-shadow(0 0 7px rgba(59,130,246,0.75)); }
.tk-tab-panel { display: none; padding-top: 1.6rem; }
.tk-tab-panel.active { display: block; animation: fadeSlideIn 0.32s cubic-bezier(0.4,0,0.2,1) both; }
.tk-sub-tabs { border-bottom: 1px solid rgba(255,255,255,0.07) !important; padding-bottom: 0; margin-bottom: 1.7rem; }
.tk-sub-tab { background: transparent; border: none; color: rgba(255,255,255,0.44); padding: 0.68rem 1.55rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border-bottom: 2.5px solid transparent; transition: all 0.25s; position: relative; }
.tk-sub-tab:hover { color: rgba(255,255,255,0.82); }
.tk-sub-tab.active { color: #fff; border-bottom-color: var(--tk-blue); }
.tk-sub-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.85), transparent); filter: blur(3px); }
.tk-sub-panel { display: none; padding-top: 2rem; }
.tk-sub-panel.active { display: block; animation: fadeSlideIn 0.28s ease both; }
.tk-tab-title { font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 900; color: #fff; margin-bottom: 0.82rem; line-height: 1.18; letter-spacing: -0.5px; }
.tk-tab-sub { font-size: 1rem; color: var(--tk-blue-light); font-weight: 500; margin-bottom: 0.82rem; line-height: 1.65; }
.tk-tab-body { color: var(--tk-text-sec); margin-bottom: 1.55rem; font-size: 0.95rem; line-height: 1.75; }
.tk-feature-list { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.tk-feature-list li { display: flex; align-items: center; gap: 0.72rem; padding: 0.43rem 0; color: rgba(255,255,255,0.82); font-size: 0.92rem; line-height: 1.4; }
.tk-feature-list li i { color: var(--tk-green); font-size: 0.8rem; flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(34,197,94,0.55)); }
.tk-mini-stat { background: linear-gradient(145deg, rgba(37,99,235,0.13), rgba(37,99,235,0.04)); border: 1px solid rgba(37,99,235,0.32); border-radius: 15px; padding: 0.95rem 1.25rem; text-align: center; min-width: 100px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
.tk-mini-stat::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.75), transparent); }
.tk-mini-stat:hover { background: linear-gradient(145deg, rgba(37,99,235,0.2), rgba(37,99,235,0.07)); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(37,99,235,0.22); }
.tk-mini-stat-val { font-size: 1.6rem; font-weight: 900; color: var(--tk-blue-bright); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(59,130,246,0.45); }
.tk-mini-stat-val.green { color: var(--tk-green); text-shadow: 0 0 18px rgba(34,197,94,0.45); }
.tk-mini-stat-lbl { font-size: 0.67rem; color: var(--tk-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* === SHARED GLASS CARD BASE === */
.tk-signal-card, .tk-arb-card, .tk-stock-card, .tk-chat-card { background: rgba(9,15,30,0.94); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border-radius: var(--tk-r); position: relative; overflow: hidden; transition: box-shadow 0.3s, transform 0.3s; }
.tk-signal-card:hover, .tk-arb-card:hover, .tk-stock-card:hover { transform: translateY(-4px); }

/* Signal Card */
.tk-signal-card { border: 1px solid rgba(37,99,235,0.32); padding: 1.85rem; box-shadow: 0 0 35px rgba(37,99,235,0.14), 0 28px 65px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.05); }
.tk-signal-card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(59,130,246,0.75), transparent); }
.tk-signal-card:hover { box-shadow: 0 0 50px rgba(37,99,235,0.22), 0 35px 75px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); }
.tk-sc-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.tk-sc-pair { font-size: 1.38rem; font-weight: 900; color: #fff; letter-spacing: -0.3px; }
.tk-sc-badge { border-radius: 7px; padding: 3px 13px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.tk-sc-badge.buy { background: rgba(34,197,94,0.14); color: var(--tk-green); border: 1px solid rgba(34,197,94,0.38); box-shadow: 0 0 14px rgba(34,197,94,0.20); }
.tk-sc-badge.sell { background: rgba(239,68,68,0.14); color: var(--tk-red); border: 1px solid rgba(239,68,68,0.38); }
.tk-sc-conf { font-size: 0.8rem; color: #93c5fd; margin-left: auto; font-weight: 600; }
.tk-sc-body { border-radius: 12px; background: rgba(0,0,0,0.28); padding: 1rem 1.3rem; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 1rem; }
.tk-sc-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--tk-text-sec); }
.tk-sc-row:last-child { border-bottom: none; }
.tk-sc-row strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-sc-row.tp strong { color: var(--tk-green); text-shadow: 0 0 9px rgba(34,197,94,0.35); }
.tk-sc-row.sl strong { color: var(--tk-red); }
.tk-sc-status { font-size: 0.73rem; font-weight: 800; margin-top: 0.8rem; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 0.45rem; }
.tk-sc-status.running { color: var(--tk-green); animation: glow-pulse 2s ease-in-out infinite; }
.tk-sc-status.running::before { content: ''; width: 7px; height: 7px; background: var(--tk-green); border-radius: 50%; display: inline-block; animation: running-dot 1.5s ease-in-out infinite; box-shadow: 0 0 9px rgba(34,197,94,0.85); }
.tk-pair-tag { background: rgba(37,99,235,0.09); border: 1px solid rgba(37,99,235,0.24); border-radius: 6px; padding: 4px 13px; font-size: 0.78rem; color: #93c5fd; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.tk-pair-tag:hover { background: rgba(37,99,235,0.17); border-color: rgba(37,99,235,0.48); box-shadow: 0 0 14px rgba(37,99,235,0.22); }
.tk-pair-tag.crypto { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.28); color: #fcd34d; }

/* Arb Card */
.tk-arb-card { border: 1px solid rgba(255,255,255,0.09); padding: 1.85rem; box-shadow: 0 28px 70px rgba(0,0,0,0.50), 0 0 0 1px rgba(37,99,235,0.06), inset 0 1px 0 rgba(255,255,255,0.045); }
.tk-arb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(100,150,255,0.4) 50%, transparent 92%); }
.tk-arb-card:hover { box-shadow: 0 35px 80px rgba(0,0,0,0.55), 0 0 35px rgba(37,99,235,0.12); }
.tk-arb-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: #fff; margin-bottom: 1.35rem; font-size: 1rem; }
.tk-arb-live { font-size: 0.72rem; color: var(--tk-red); font-weight: 800; letter-spacing: 0.5px; animation: glow-pulse 1.5s ease-in-out infinite; }
.tk-arb-live.green { color: var(--tk-green); }
.tk-bet-match { color: #fff; font-weight: 700; font-size: 1rem; padding: 0.65rem 0.88rem; background: rgba(255,255,255,0.035); border-radius: 9px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 1rem; }
.tk-exchange-box { border-radius: 13px; padding: 1.08rem; text-align: center; transition: all 0.25s; }
.tk-exchange-box:hover { transform: translateY(-3px); }
.tk-exchange-box.buy { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.24); }
.tk-exchange-box.sell { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.24); }
.tk-exch-label { font-size: 0.7rem; color: var(--tk-text-muted); margin-bottom: 0.38rem; text-transform: uppercase; letter-spacing: 0.5px; }
.tk-exch-price { font-size: 1.38rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.tk-exch-asset { font-size: 0.7rem; color: var(--tk-text-muted); margin-top: 0.25rem; font-weight: 600; text-transform: uppercase; }
.tk-arb-profit { background: linear-gradient(145deg, rgba(34,197,94,0.11), rgba(34,197,94,0.04)); border: 1px solid rgba(34,197,94,0.3); border-radius: 14px; padding: 1.15rem; text-align: center; position: relative; overflow: hidden; }
.tk-arb-profit::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,197,94,0.65), transparent); }
.tk-arb-profit-label { font-size: 0.76rem; color: var(--tk-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.3rem; }
.tk-arb-profit-val { font-size: 2.5rem; font-weight: 900; color: var(--tk-green); line-height: 1; text-shadow: 0 0 28px rgba(34,197,94,0.55); font-variant-numeric: tabular-nums; }
.tk-exch-logo { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 8px; padding: 5px 14px; font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 600; transition: all 0.2s; }

/* Stock Card */
.tk-stock-card { border: 1px solid rgba(255,255,255,0.09); padding: 1.85rem; box-shadow: 0 28px 70px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.045); }
.tk-stock-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, rgba(139,92,246,0.5) 50%, transparent 90%); }
.tk-stock-title { font-weight: 800; color: #fff; margin-bottom: 1.35rem; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.9px; }
.tk-stock-row { display: flex; align-items: center; gap: 0.82rem; margin-bottom: 0.92rem; }
.tk-stock-name { font-weight: 800; color: #fff; width: 52px; font-size: 0.85rem; }
.tk-stock-bar-wrap { flex: 1; background: rgba(255,255,255,0.05); border-radius: 5px; height: 8px; overflow: hidden; }
.tk-stock-bar { height: 100%; background: linear-gradient(90deg, var(--tk-blue), var(--tk-blue-bright)); border-radius: 5px; box-shadow: 0 0 11px rgba(37,99,235,0.48); animation: bar-grow 1s cubic-bezier(0.4,0,0.2,1) both; }
.tk-stock-score { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
.tk-stock-score.buy { background: rgba(34,197,94,0.13); color: var(--tk-green); border: 1px solid rgba(34,197,94,0.32); }
.tk-stock-score.neutral { background: rgba(245,158,11,0.13); color: var(--tk-yellow); border: 1px solid rgba(245,158,11,0.32); }
.tk-popular-assets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.tk-asset-tag { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 5px 14px; font-size: 0.82rem; color: var(--tk-text-sec); font-weight: 600; transition: all 0.2s; }
.tk-asset-tag:hover { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.32); color: #93c5fd; }

/* Chat Card */
.tk-chat-card { border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 28px 70px rgba(0,0,0,0.50), 0 0 0 1px rgba(37,99,235,0.06), inset 0 1px 0 rgba(255,255,255,0.045); }
.tk-chat-header { background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(37,99,235,0.06)); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 1rem 1.45rem; font-weight: 700; color: #fff; display: flex; align-items: center; font-size: 0.9rem; }
.tk-chat-header i { color: var(--tk-blue-bright); margin-right: 0.5rem; }
.tk-chat-online { margin-left: auto; font-size: 0.72rem; color: var(--tk-green); font-weight: 700; animation: glow-pulse 2s ease-in-out infinite; }
.tk-chat-body { padding: 1.45rem; display: flex; flex-direction: column; gap: 0.95rem; min-height: 240px; background: rgba(0,0,0,0.13); }
.tk-chat-msg { max-width: 82%; padding: 0.75rem 1.05rem; border-radius: 14px; font-size: 0.84rem; line-height: 1.55; }
.tk-chat-msg.user { background: linear-gradient(135deg, var(--tk-blue), var(--tk-blue-dark)); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; box-shadow: 0 4px 20px rgba(37,99,235,0.38); }
.tk-chat-msg.ai { background: rgba(255,255,255,0.045); color: rgba(255,255,255,0.88); align-self: flex-start; border-bottom-left-radius: 3px; border: 1px solid rgba(255,255,255,0.09); }
.tk-chat-input { display: flex; border-top: 1px solid rgba(255,255,255,0.07); padding: 0.78rem 1.05rem; gap: 0.6rem; background: rgba(0,0,0,0.16); }
.tk-chat-input input { flex: 1; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 0.46rem 0.92rem; color: #fff; font-size: 0.83rem; outline: none; transition: border-color 0.2s; }
.tk-chat-input input:focus { border-color: rgba(37,99,235,0.52); }
.tk-chat-input input::placeholder { color: var(--tk-text-muted); }
.tk-qq-label { font-size: 0.73rem; color: var(--tk-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.tk-qq-pill { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); border-radius: 50px; padding: 5px 14px; font-size: 0.78rem; color: var(--tk-text-sec); cursor: pointer; transition: all 0.2s; display: inline-block; }
.tk-qq-pill:hover { background: rgba(37,99,235,0.11); border-color: rgba(37,99,235,0.32); color: #93c5fd; transform: translateY(-1px); }

/* === STEPS SECTION === */
.section-padding { padding: 3.35rem 0; }
.section-separator { display: none; }
.feature-card { background: rgba(10,17,32,0.84); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; overflow: hidden; transition: all 0.38s cubic-bezier(0.4,0,0.2,1); height: 100%; position: relative; box-shadow: 0 15px 50px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.045); }
.feature-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.55), transparent); }
.feature-card:hover { transform: translateY(-12px); border-color: rgba(37,99,235,0.38); box-shadow: 0 28px 70px rgba(0,0,0,0.48), 0 0 40px rgba(37,99,235,0.14); }
.feature-icon { margin-bottom: 1rem; transition: all 0.3s ease; }
.feature-icon i { font-size: 2.8rem !important; filter: drop-shadow(0 0 16px rgba(37,99,235,0.6)); }
.feature-card:hover .feature-icon { transform: scale(1.12) translateY(-5px); }
.feature-card:hover .feature-icon i { filter: drop-shadow(0 0 28px rgba(37,99,235,0.95)); }
.feature-card h4 { font-weight: 900 !important; margin-bottom: 0.78rem !important; color: #fff !important; font-size: 1rem !important; letter-spacing: 1.2px; position: relative; display: inline-block; }
.feature-card h4::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 28px; height: 2px; background: linear-gradient(90deg, var(--tk-blue), var(--tk-blue-bright)); border-radius: 2px; box-shadow: 0 0 10px rgba(37,99,235,0.75); }
.feature-card p { color: var(--tk-text-sec) !important; font-size: 0.88rem !important; line-height: 1.65 !important; }
.steps-flow { position: relative; z-index: 1; }
.steps-flow::before { display: none; }
.step-arrow { position: absolute; top: 38%; font-size: 1.2rem; color: var(--tk-blue-bright); animation: arrowPulse 2s infinite; z-index: 2; filter: drop-shadow(0 0 9px rgba(37,99,246,0.75)); }
.step-arrow.first { left: 33%; }
.step-arrow.second { right: 33%; }

/* === STATS SECTION === */
.stat-card { background: rgba(10,17,32,0.9); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 2.1rem 1.2rem 1.7rem; transition: all 0.38s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.38); text-align: center; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.5), transparent); }
.stat-card:hover { transform: translateY(-12px); border-color: rgba(37,99,235,0.32); box-shadow: 0 28px 70px rgba(0,0,0,0.48), 0 0 35px rgba(37,99,235,0.11); }
.tk-stat-icon { display: block; font-size: 2.4rem; margin-bottom: 1rem; opacity: 0.85; }
.tk-stat-icon-blue   { color: var(--tk-blue-bright); filter: drop-shadow(0 0 12px rgba(59,130,246,0.65)); }
.tk-stat-icon-green  { color: var(--tk-green);       filter: drop-shadow(0 0 12px rgba(34,197,94,0.65)); }
.tk-stat-icon-orange { color: var(--tk-orange);      filter: drop-shadow(0 0 12px rgba(249,115,22,0.65)); }
.tk-stats-grid .col-md-3:nth-child(1) .stat-card h2 { color: var(--tk-blue-bright); text-shadow: 0 0 22px rgba(59,130,246,0.45); -webkit-text-fill-color: unset; background: none; }
.tk-stats-grid .col-md-3:nth-child(2) .stat-card h2 { color: var(--tk-green); text-shadow: 0 0 22px rgba(34,197,94,0.40); -webkit-text-fill-color: unset; background: none; }
.tk-stats-grid .col-md-3:nth-child(3) .stat-card h2 { color: var(--tk-blue-bright); text-shadow: 0 0 22px rgba(59,130,246,0.45); -webkit-text-fill-color: unset; background: none; }
.tk-stats-grid .col-md-3:nth-child(4) .stat-card h2 { color: var(--tk-orange); text-shadow: 0 0 22px rgba(249,115,22,0.45); -webkit-text-fill-color: unset; background: none; }
.stat-card h2.display-4 { font-size: 3.3rem !important; font-weight: 900 !important; margin-bottom: 0.4rem !important; line-height: 1 !important; letter-spacing: -1px; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(20px); }
.stat-card.animate h2.display-4 { animation: countUp 0.75s cubic-bezier(0.4,0,0.2,1) 0.1s forwards; }
.stat-card p { color: var(--tk-text-sec) !important; font-size: 0.88rem !important; margin-bottom: 0 !important; font-weight: 500; }

/* === CTA SECTION === */
.tk-cta-section { position: relative; overflow: hidden; border-radius: var(--tk-r-xl); margin: 0 1rem 1.8rem; background: linear-gradient(135deg, rgba(18,32,61,0.95) 0%, rgba(11,22,46,0.98) 40%, rgba(18,32,61,0.95) 100%); border: 1px solid rgba(37,99,235,0.36); box-shadow: 0 0 95px rgba(37,99,235,0.18), 0 30px 65px rgba(0,0,0,0.45); padding: 3.15rem 1.4rem; }
.tk-cta-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,99,235,0.7), transparent); }
.tk-cta-section::after { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 500px; height: 200px; background: radial-gradient(ellipse, rgba(37,99,235,0.14) 0%, transparent 70%); pointer-events: none; }
.tk-cta-section h2.fw-bold { color: #fff; font-size: clamp(1.8rem,3vw,2.6rem) !important; letter-spacing: -0.5px; }
.tk-cta-section .lead { color: var(--tk-text-sec); font-size: 1.05rem; }

.tk-market-overview { padding-top: 2.3rem; padding-bottom: 2.3rem; }
.tk-overview-sub { color: var(--tk-text-sec); margin: 0 auto; max-width: 720px; }
.tk-market-card { background: rgba(9,16,30,0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 1rem; height: 100%; box-shadow: 0 14px 34px rgba(0,0,0,0.35); transition: all .25s ease; }
.tk-market-card:hover { transform: translateY(-5px); border-color: rgba(37,99,235,0.4); box-shadow: 0 20px 42px rgba(0,0,0,0.44), 0 0 26px rgba(37,99,235,0.12); }
.tk-market-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.tk-market-top h5 { margin: 0; font-size: .95rem; font-weight: 800; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 12px currentColor; }
.tk-dot.forex { color: #22c55e; background: #22c55e; }
.tk-dot.crypto { color: #f59e0b; background: #f59e0b; }
.tk-dot.stocks { color: #3b82f6; background: #3b82f6; }
.tk-dot.betting { color: #a78bfa; background: #a78bfa; }
.tk-market-card p { color: var(--tk-text-sec); font-size: .86rem; margin-bottom: .4rem; }
.tk-market-mini { font-size: .78rem; color: rgba(238,242,255,0.78); }
.tk-market-mini .pos { color: var(--tk-green); }
.tk-market-mini .neg { color: var(--tk-red); }

.tk-tab-live-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-bottom: .2rem; }
.tk-live-card { background: rgba(7,14,28,0.84); border: 1px solid rgba(255,255,255,0.08); border-radius: 13px; padding: .62rem .68rem; transition: all .25s ease; opacity: .62; }
.tk-live-card.active { opacity: 1; border-color: rgba(37,99,235,0.54); box-shadow: 0 0 24px rgba(37,99,235,0.25); }
.tk-live-card:hover { opacity: .9; transform: translateY(-2px); border-color: rgba(96,165,250,0.45); }
.tk-live-card .k { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tk-text-muted); margin-bottom: .22rem; font-weight: 700; }
.tk-live-card .v { font-size: .78rem; color: rgba(238,242,255,0.92); }
.tk-live-card .pos { color: var(--tk-green); }
.tk-live-card .neg { color: var(--tk-red); }

.tk-step-no { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto .75rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(96,165,250,0.15)); border: 1px solid rgba(37,99,235,0.42); color: #dbeafe; font-weight: 800; }

.tk-trust-section { padding-top: 2.2rem; padding-bottom: 2.6rem; }
.tk-trust-card { background: rgba(10,18,33,0.9); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1rem .95rem; height: 100%; }
.tk-trust-card h5 { font-size: .92rem; margin-bottom: .45rem; color: #fff; font-weight: 800; }
.tk-trust-card p { margin: 0; font-size: .83rem; color: var(--tk-text-sec); line-height: 1.65; }

.tk-cta-actions .tk-btn-primary { box-shadow: 0 0 0 1px rgba(37,99,235,0.35), 0 10px 30px rgba(37,99,235,0.48), 0 0 48px rgba(37,99,235,0.26) !important; }
.tk-cta-actions .tk-btn-outline { border-color: rgba(96,165,250,0.45) !important; }

@media (max-width: 1200px) {
  .tk-main-tab { padding: 0.68rem 1.15rem; font-size: 0.84rem; }
}

/* === MISC / LEGACY === */
.hero-stat-item { display: none; animation: fadeInOut 1s ease-in-out; }
.hero-stat-item.active { display: block; }
.hero-section { position: relative; overflow: hidden; padding: 2rem 0; }
.market-data-container { border-radius: 12px; overflow: hidden; background: rgba(14,17,23,0.7); border: 1px solid rgba(255,255,255,0.05); }
.market-data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.market-data-table th { background-color: rgba(0,0,0,0.3); color: #fff; font-weight: 600; padding: 12px 8px; position: sticky; top: 0; z-index: 10; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.market-data-table tbody tr { transition: all 0.2s ease; border-top: 1px solid rgba(255,255,255,0.05); }
.market-data-table tbody tr:hover { background-color: rgba(255,255,255,0.05); }
.market-data-table td { padding: 12px 8px; }
.pricing-card { border-radius: 15px; overflow: hidden; transition: all 0.3s ease; background: rgba(22,27,34,0.5); border: 1px solid rgba(255,255,255,0.05); }
.pricing-card:hover { transform: translateY(-10px); }
.pricing-card.border-primary { border: 2px solid var(--tk-blue) !important; box-shadow: 0 0 20px rgba(37,99,235,0.22); }
.testimonial-card { border-radius: 15px; overflow: hidden; background: rgba(22,27,34,0.5); border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease; }
.testimonial-card:hover { transform: translateY(-5px); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--tk-bg); }
::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.65); }

@media (max-width: 992px) {
  .tk-main-tabs { width: 100%; justify-content: center; }
  .tk-main-tab { flex: 1 1 calc(50% - 8px); text-align: center; }
  .step-arrow { display: none; }
  .tk-tab-live-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .tk-hero { padding: 3.9rem 0 3.2rem; }
  .section-padding { padding: 2.5rem 0; }
  .tk-products-section { padding: 3rem 0 2.6rem; }
  .tk-hero-title { font-size: clamp(2.15rem, 8.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.8px; }
  .tk-hero-sub { font-size: 0.98rem; line-height: 1.65; }
  .tk-main-tab { flex: 1 1 100%; }
  .tk-feature-list li { font-size: 0.88rem; }
  .tk-cta-section { margin: 0 0.65rem 1.2rem; padding: 2.4rem 1rem; }
  .tk-cta-actions .btn { width: 100%; justify-content: center; }
  .tk-trust-row { gap: 0.55rem !important; }
  .tk-trust-badge { font-size: 0.74rem; padding: 0.34rem 0.72rem; }
  .tk-tab-live-row { grid-template-columns: 1fr; }
}
