@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#060a14;--bg2:#0f172a;--blue:#3b82f6;--blue-d:#1e40af;
  --cyan:#06b6d4;--cyan-l:#22d3ee;--green:#22c55e;--red:#ef4444;
  --white:#fff;--gray:#94a3b8;--muted:#64748b;--border:rgba(59,130,246,0.2)
}
/* ===== PARTICLES BG ===== */
#particles-js {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== GRID OVERLAY ===== */

/* ======================== */
/* SCROLLBAR */
/* ======================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:var(--qx-gradient);
    border-radius:20px;
}

/* ======================== */
/* NAVBAR */
/* ======================== */

.qx-navbar{
    background:rgba(5,8,22,0.75);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.qx-logo{
    font-size:34px;
    font-weight:800;
    font-family:'Orbitron',sans-serif;
    background:var(--qx-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.qx-nav-link{
    color:white !important;
    margin-left:18px;
    transition:0.4s;
}

.qx-nav-link:hover{
    color:#00F0FF !important;
}

.qx-btn{
    padding:13px 30px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
    color:white;
    font-weight:600;
    transition:0.4s;
    /*box-shadow:0 0 25px rgba(176,38,255,0.4);*/
    margin:12px;
}

.qx-btn:hover{
    transform:translateY(-5px);
}


/* ===== CSS Variables ===== */


/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--white);overflow-x:hidden}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}
a{text-decoration:none}

/* ===== Missing Bootstrap-like Utility Classes (Custom) ===== */
.text-green{color:var(--green)!important}
.text-red{color:var(--red)!important}
.text-cyan{color:var(--cyan)!important}
.text-gray{color:var(--gray)!important}
.fw-black{font-weight:900!important}
.tracking-widest{letter-spacing:.1em!important}



/* ===== Buttons ===== */
.btn-o{border:1.5px solid rgba(6,182,212,.5);color:var(--cyan);background:0 0;font-weight:600;border-radius:8px;padding:.45rem 1.8rem;font-size:.875rem;transition:.3s}
.btn-o:hover{background:rgba(6,182,212,.1);border-color:var(--cyan);color:var(--cyan-l);transform:translateY(-1px)}
.btn-g{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:600;border-radius:8px;padding:.45rem 1.8rem;font-size:.875rem;border:none;transition:.3s;position:relative;overflow:hidden}
.btn-g::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan),var(--blue));opacity:0;transition:.3s}
.btn-g:hover::before{opacity:1}
.btn-g span{position:relative;z-index:1}
.btn-g:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(59,130,246,.3)}

/* ===== Hero ===== */
.hero{position:relative;padding:6rem 0 5rem;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(59,130,246,.2),transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(6,182,212,.15),transparent 50%),linear-gradient(135deg,#060a14 0%,#0c1425 50%,#060a14 100%);z-index:0}
.fl{position:absolute;animation:fl 6s ease-in-out infinite;z-index:1;pointer-events:none}
.fl-1{top:15%;right:8%;width:70px;height:70px;background:linear-gradient(135deg,var(--cyan),var(--blue));border-radius:50%;opacity:.15}
.fl-2{bottom:25%;left:5%;width:50px;height:50px;background:linear-gradient(135deg,var(--blue),#8b5cf6);border-radius:12px;opacity:.1;transform:rotate(45deg);animation-delay:1.5s}
.fl-3{top:50%;left:12%;width:40px;height:40px;background:linear-gradient(135deg,var(--cyan),var(--green));border-radius:50%;opacity:.08;animation-delay:3s}
.fl-4{top:20%;left:40%;width:30px;height:30px;background:var(--blue);border-radius:6px;opacity:.08;transform:rotate(30deg);animation-delay:2s}
@keyframes fl{0%,100%{transform:translateY(0) rotate(0)}33%{transform:translateY(-15px) rotate(5deg)}66%{transform:translateY(10px) rotate(-3deg)}}
.h-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.4rem;background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(6,182,212,.15));border:1px solid rgba(59,130,246,.3);border-radius:50px;backdrop-filter:blur(10px);margin-bottom:1.5rem;font-size:.85rem;font-weight:600;color:var(--cyan-l)}
.h-title{font-size:3.5rem;font-weight:900;line-height:1.1;margin-bottom:1.5rem}
.h-title .ta{color:var(--cyan)}
.h-title .tb{color:var(--blue)}
.h-title .th{color:var(--cyan-l)}
@media(min-width:768px){.h-title{font-size:5rem}}
@media(min-width:992px){.h-title{font-size:5rem}}
.h-desc{font-size:1.1rem;color:var(--gray);line-height:1.7;margin-bottom:2rem}
.h-desc .tc{color:var(--cyan);font-weight:600; display:none;}
.btn-st{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:700;border-radius:16px;padding:.85rem 2.2rem;font-size:1.1rem;border:none;transition:.3s;display:inline-flex;align-items:center;gap:.6rem}
.btn-st:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(59,130,246,.35);color:#fff}
.btn-st .arr{transition:transform .3s}
.btn-st:hover .arr{transform:translateX(4px)}
.btn-wd{border:2px solid rgba(6,182,212,.5);color:var(--cyan);font-weight:700;border-radius:16px;padding:.85rem 2.2rem;font-size:1.1rem;background:rgba(6,182,212,.05);backdrop-filter:blur(10px);transition:.3s;display:inline-flex;align-items:center;gap:.6rem}
.btn-wd:hover{background:rgba(6,182,212,.15);border-color:var(--cyan);color:var(--cyan-l);transform:translateY(-2px)}
.h-stats{border-top:1px solid rgba(59,130,246,.15);padding-top:2rem;margin-top:2.5rem}
.sv{font-size:1.8rem;font-weight:900;color:var(--cyan);margin-bottom:.2rem}
.sl{color:var(--muted);font-weight:500;font-size:.9rem}

/* ===== Trading Card ===== */
.tc{background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(6,10,20,.8));backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,.25);border-radius:1.5rem;padding:2rem;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.tc::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(6,182,212,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(6,182,212,.03) 1px,transparent 1px);background-size:35px 35px;opacity:.5}
.tc .gl-tl{position:absolute;top:0;left:0;width:150px;height:150px;background:radial-gradient(circle,rgba(6,182,212,.15),transparent 70%);pointer-events:none}
.tc .gl-br{position:absolute;bottom:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(59,130,246,.15),transparent 70%);pointer-events:none}
.lb{display:inline-flex;align-items:center;gap:.4rem;background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3);border-radius:6px;padding:.2rem .6rem;font-size:.7rem;font-weight:700;letter-spacing:.05em}
.pd{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pd 2s infinite;box-shadow:0 0 8px rgba(34,197,94,.5)}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

/* FIX: rgba(59,130,24s6,.15) → rgba(59,130,246,.15) */
.pc{background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(6,10,20,.9));border:1px solid rgba(59,130,246,.15);border-radius:1rem;padding:1.3rem;transition:.3s;position:relative;overflow:hidden}
.pc:hover{border-color:rgba(34,197,94,.3);transform:translateY(-2px)}
.pc.red:hover{border-color:rgba(239,68,68,.3)}
.pc .cg{position:absolute;inset:0;opacity:.05;pointer-events:none}
.pc .gg{background:radial-gradient(circle at 80% 20%,rgba(34,197,94,.1),transparent 60%)}
.pc .rg{background:radial-gradient(circle at 20% 80%,rgba(239,68,68,.1),transparent 60%)}
.pn{color:var(--muted);font-weight:500;font-size:.9rem}
.pp{font-size:1.6rem;font-weight:900;margin:.3rem 0}
.pch{font-weight:700;font-size:.9rem}
.tg{color:var(--green)}
.tr{color:var(--red)}
.mc{background:linear-gradient(135deg,rgba(15,23,42,.6),rgba(6,10,20,.6));border:1px solid rgba(59,130,246,.1);border-radius:1rem;height:180px;position:relative;overflow:hidden}

/* ===== Marquee ===== */
.marquee-s{position:relative;border-top:1px solid rgba(59,130,246,.15);border-bottom:1px solid rgba(59,130,246,.15);background:linear-gradient(90deg,rgba(15,23,42,.9),rgba(6,10,20,.9),rgba(15,23,42,.9));backdrop-filter:blur(20px);padding:1rem 0;overflow:hidden}
.mt{display:flex;gap:1rem;animation:mqr 40s linear infinite;width:max-content}
.mt:hover{animation-play-state:paused}
@keyframes mqr{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tk{flex-shrink:0;width:300px;padding:1.2rem 1.5rem;background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(6,10,20,.8));border:1.5px solid rgba(59,130,246,.15);border-radius:1rem;backdrop-filter:blur(10px);transition:.3s;cursor:pointer;position:relative;overflow:hidden}
.tk:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.tk.up{border-color:rgba(34,197,94,.25)}
.tk.down{border-color:rgba(239,68,68,.25)}
.tk.up:hover{box-shadow:0 10px 30px rgba(34,197,94,.15)}
.tk.down:hover{box-shadow:0 10px 30px rgba(239,68,68,.15)}
.ti{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff}
.td{width:8px;height:8px;border-radius:50%;position:absolute;top:12px;left:12px;z-index:2}
.td.g{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.5);animation:pd 2s infinite}
.td.r{background:var(--red);box-shadow:0 0 8px rgba(239,68,68,.5);animation:pd 2s infinite}
.tbg{position:absolute;inset:0;opacity:.08;pointer-events:none}
.tb{font-weight:700;padding:.15rem .5rem;border-radius:6px;display:inline-block}
.tb.g{background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.tb.r{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.3)}

/* ===== Section Background ===== */
.section-bg{position:relative}
.section-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(59,130,246,.06),transparent 70%),linear-gradient(135deg,#060a14,#0c1425,#060a14);z-index:0}
.pulse-dot-sm{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pd 2s infinite}

/* FIX: var(--cyan-light) → var(--cyan-l) */
.sec-head{text-align:center;margin-bottom:3rem}
.sec-dots{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1rem}
.sec-title{font-size:clamp(1.8rem,4vw,3.5rem);font-weight:900;color:var(--cyan-l);margin-bottom:.8rem}
.sec-desc{color:var(--gray);font-size:clamp(1rem,2vw,1.15rem);max-width:720px;margin:0 auto}

/* ===== Fee Cards ===== */
.fee-card{background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(6,10,20,.8));border:1px solid rgba(59,130,246,.15);border-radius:1rem;padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden;transition:.4s}
.fee-card:hover{border-color:rgba(6,182,212,.4);transform:translateY(-4px);box-shadow:0 15px 40px rgba(6,182,212,.15)}
.fee-card.pop{border:2px solid rgba(6,182,212,.35)}
.fee-card .top-bar-green{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--green),#059669)}
.fee-card .top-bar-cyan{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--cyan),var(--blue))}
.fee-card .top-bar-blue{position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),#7c3aed)}
.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:800;padding:.4rem 1.5rem;border-radius:8px;font-size:.8rem;z-index:10;box-shadow:0 4px 15px rgba(59,130,255,.3);white-space:nowrap}
.icon-box{width:70px;height:70px;background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(5,150,105,.2));border-radius:1rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:.3s}
.fee-card:hover .icon-box{transform:scale(1.1)}
.icon-box-cyan{background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.2))}
.icon-box-blue{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(124,58,237,.2))}

/* FIX: .green-c → .greenc to match HTML */
.fee-price{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;margin-bottom:.3rem}
.fee-price.greenc{color:var(--green)}
.fee-price.cyanc{color:var(--cyan)}
.fee-price.bluec{color:var(--blue)}
.fee-sub{color:var(--muted);font-weight:500;font-size:1rem;margin-bottom:1.2rem}
.fee-check{display:flex;align-items:center;text-align:left;margin-bottom:.6rem;font-size:.95rem;color:var(--gray)}
.fee-check i{color:var(--green);margin-right:.8rem;font-size:.85rem}
.fee-check.blue-check i{color:var(--blue)}
.btn-fee{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border:none;font-weight:700;border-radius:14px;padding:.7rem 2rem;font-size:1.1rem;transition:.3s;display:inline-flex;align-items:center;gap:.5rem}
.btn-fee:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(59,130,246,.3);color:#fff}

/* ===== Features ===== */
.feat-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.feat-icon{flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.15));border-radius:12px;display:flex;align-items:center;justify-content:center}
.feat-icon i{font-size:1.3rem;color:var(--cyan)}
/* FIX: var(--cyan-light) → var(--cyan-l) */
.feat-title{font-weight:900;font-size:1.15rem;color:var(--cyan-l);margin-bottom:.3rem}
.feat-desc{color:var(--muted);font-size:.95rem}

/* ===== App Section ===== */
.app-stat{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;color:var(--cyan);margin-bottom:.3rem}
.app-stat-label{color:var(--muted);font-weight:600;font-size:.9rem}
.app-stat-sub{color:var(--blue);font-size:.8rem}
.app-btn{display:inline-flex;align-items:center;background:rgba(0,0,0,.5);border:2px solid rgba(100,116,139,.5);border-radius:14px;padding:.9rem 1.8rem;color:#fff;font-size:1rem;font-weight:700;transition:.3s}
.app-btn:hover{border-color:rgba(100,116,139,.8);background:rgba(30,41,59,.8);transform:translateY(-2px);color:#fff}
.app-btn .ab-icon{width:42px;height:42px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:1rem;transition:.3s}
.app-btn:hover .ab-icon{transform:scale(1.1)}
.app-btn .ab-icon.blue-icon{background:linear-gradient(135deg,var(--blue),var(--green))}

/* ===== CTA Section ===== */
.cta-section{position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(6,182,212,.1),transparent 30%),linear-gradient(135deg,#060a14,#0c1425,#060a14);z-index:0}
.cta-btn{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:900;border-radius:18px;padding:1rem 2.5rem;font-size:clamp(1.3rem,2.5vw,1.8rem);border:none;transition:.3s;display:inline-flex;align-items:center;gap:.6rem;box-shadow:0 10px 40px rgba(59,130,246,.25)}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 15px 50px rgba(59,130,246,.35);color:#fff}
.cta-btn-o{background:0 0;border:2px solid rgba(6,182,212,.5);color:var(--cyan);box-shadow:none}
.cta-btn-o:hover{background:rgba(6,182,212,.1);border-color:var(--cyan);transform:translateY(-3px)}
.cta-stats .cs{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;color:var(--cyan)}

/* ===== Trust Cards ===== */
.trust-card{background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(6,10,20,.8));border:1px solid rgba(59,130,246,.2);border-radius:1.5rem;padding:1.8rem;text-align:center;transition:.4s;position:relative;overflow:hidden}
.trust-card::before{content:'';position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(45deg,transparent 24%,rgba(6,182,212,.1) 25%,rgba(6,182,212,.1) 26%,transparent 27%,transparent 74%,rgba(6,182,212,.1) 75%,rgba(6,182,212,.1) 76%,transparent 77%);background-size:20px 20px;pointer-events:none}
.trust-card:hover{border-color:rgba(6,182,212,.5);transform:translateY(-4px);box-shadow:0 15px 40px rgba(6,182,212,.12)}
.trust-card::after{content:'';position:absolute;top:4px;right:4px;width:50px;height:50px;border:1px solid rgba(6,182,212,.1);border-radius:16px;transform:rotate(12deg);transition:.7s}
.trust-card:hover::after{transform:rotate(45deg)}
.trust-card .bottom-deco{position:absolute;bottom:4px;left:4px;width:25px;height:25px;background:linear-gradient(to right,rgba(6,182,212,.15),rgba(59,130,246,.15));border-radius:8px;transform:rotate(45deg);transition:.7s}
.trust-card:hover .bottom-deco{transform:rotate(90deg)}
.t-icon{width:70px;height:70px;margin:0 auto 1.2rem;background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.2));border-radius:1rem;display:flex;align-items:center;justify-content:center;transition:.4s}
.trust-card:hover .t-icon{transform:scale(1.1) rotate(6deg)}
.t-icon i{font-size:1.8rem;color:var(--blue)}
.t-badge{display:inline-block;background:rgba(6,182,212,.15);color:var(--cyan);border:1px solid rgba(6,182,212,.3);font-weight:700;font-size:.7rem;padding:.3rem .8rem;border-radius:6px;margin-bottom:1rem}
/* FIX: var(--cyan-light) → var(--cyan-l) */
.t-title{font-weight:900;font-size:1.15rem;color:var(--cyan-l);margin-bottom:.6rem;transition:.3s}
.trust-card:hover .t-title{color:var(--white)}
.t-desc{color:var(--muted);font-size:.9rem;transition:.3s}
.trust-card:hover .t-desc{color:var(--gray)}

/* ===== Stat Mini ===== */
.stat-mini{background:linear-gradient(135deg,rgba(15,23,42,.7),rgba(6,10,20,.7));border:1px solid rgba(59,130,246,.12);border-radius:1rem;padding:1.3rem;text-align:center;transition:.3s;position:relative;overflow:hidden}
.stat-mini:hover{border-color:rgba(6,182,212,.3);transform:translateY(-3px)}
.stat-mini .sm-icon{width:48px;height:48px;margin:0 auto .8rem;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.15));border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.3s}
.stat-mini:hover .sm-icon{transform:scale(1.1)}
.stat-mini .sm-val{font-size:1.6rem;font-weight:900;margin-bottom:.2rem}
.sm-val.green{color:var(--green)}
.sm-val.cyan{color:var(--cyan)}
.sm-val.blue{color:var(--blue)}
.sm-val.purple{color:#a855f7}
.sm-label{color:var(--muted);font-weight:600;font-size:.85rem}
.stat-mini .corner{position:absolute;top:6px;right:6px;width:14px;height:14px;border:1px solid rgba(6,182,212,.3);border-radius:4px;transform:rotate(45deg);transition:.7s}
.stat-mini:hover .corner{transform:rotate(90deg)}

/* ===== Trading View ===== */
.tab-bar{display:flex;justify-content:center;border-bottom:2px solid rgba(6,182,212,.4);padding-bottom:0;margin-bottom:2rem}
.tab-btn{background:none;border:none;color:var(--muted);font-weight:600;font-size:.9rem;padding:.5rem 1.5rem;cursor:pointer;transition:.3s;position:relative;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab-btn.active,.tab-btn:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.chart-card{background:linear-gradient(135deg,rgba(15,23,42,.5),rgba(6,10,20,.5));border:2px solid rgba(59,130,246,.15);border-radius:1rem;padding:1.5rem;position:relative;overflow:hidden}
/* FIX: rgba(59,130,130,246,.1) → rgba(59,130,246,.1) */
.chart-card .mini-chart{height:280px;background:rgba(6,10,20,.3);border:1px solid rgba(59,130,246,.1);border-radius:.8rem;position:relative;overflow:hidden}
.order-card{background:linear-gradient(135deg,rgba(15,23,42,.5),rgba(6,10,20,.5));border:2px solid rgba(34,197,94,.3);border-radius:1rem;padding:1.5rem;position:relative}
.order-type-btn{display:flex;gap:.5rem;margin-bottom:1.2rem}
.otb{flex:1;border:none;border-radius:12px;font-size:1rem;font-weight:700;padding:.6rem;transition:.3s;cursor:pointer}
.otb.buy-active{background:linear-gradient(135deg,rgba(34,197,94,.7),rgba(5,150,105,.7));color:#fff}
.otb.sell{background:rgba(30,41,59,.5);color:var(--gray)}
.otb.sell:hover{background:rgba(30,41,59,.7)}
.form-sel{width:100%;background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(6,10,20,.8));border:2px solid rgba(59,130,246,.2);border-radius:12px;padding:.7rem 1rem;color:#fff;font-weight:600;font-size:.9rem;transition:.3s}
.form-sel:focus{border-color:rgba(6,182,212,.5);outline:0;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.form-input{width:100%;background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(6,10,20,.8));border:2px solid rgba(59,130,246,.2);border-radius:12px;padding:.7rem 1rem;color:#fff;font-weight:600;font-size:.9rem;transition:.3s}
.form-input:focus{border-color:rgba(6,182,212,.5);outline:0;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.form-input::placeholder{color:var(--muted)}
.order-row{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.5rem}
.order-row span:first-child{color:var(--muted)}
.order-row span:last-child{color:#fff;font-weight:700}
.divider{width:100%;height:1px;background:rgba(59,130,246,.15);margin:.8rem 0}
.total-row{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:1rem}
.total-row span:first-child{color:var(--cyan);font-weight:900}
.total-row span:last-child{color:var(--cyan);font-weight:900;font-size:1.1rem}
.btn-exe{width:100%;background:linear-gradient(135deg,rgba(34,197,94,.7),rgba(5,150,105,.7));color:#fff;border:none;font-weight:700;border-radius:12px;padding:.8rem;font-size:1rem;transition:.3s;display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer}
.btn-exe:hover{box-shadow:0 5px 20px rgba(34,197,94,.3);transform:translateY(-1px)}
.ob-card{background:linear-gradient(135deg,rgba(15,23,42,.5),rgba(6,10,20,.5));border:2px solid rgba(59,130,246,.15);border-radius:1rem;padding:1.3rem}
.ob-head{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;font-size:.8rem;font-weight:700;color:var(--muted);border-bottom:1px solid rgba(59,130,246,.15);padding-bottom:.5rem;margin-bottom:.5rem}
.ob-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;font-size:.85rem;font-weight:600;padding:.4rem;border-radius:6px;transition:.2s}
.ob-row:hover{background:rgba(34,197,94,.05)}
.ob-row.red:hover{background:rgba(239,68,68,.05)}
.ob-green{color:var(--green)}
.ob-red{color:var(--red)}
/* FIX: color:ob-gray → color:var(--muted) */
.ob-gray{color:var(--muted)}
/* FIX: removed double border-radius, kept only one */
.current-p{text-align:center;padding:.6rem;background:rgba(6,182,212,.1);border-radius:6px;margin:.3rem 0}
.current-p span{font-weight:900;color:var(--cyan);font-size:1.1rem}
.current-p small{color:var(--cyan);font-size:.7rem;margin-left:.3rem}

/* ===== Search & Filter ===== */
.search-box{position:relative;max-width:600px;margin:0 auto 2.5rem}
.search-box input{width:100%;padding:1rem 1rem 1rem 3rem;background:rgba(15,23,42,.4);border:2px solid rgba(59,130,246,.2);border-radius:16px;color:#fff;font-size:1rem;transition:.3s}
.search-box input:focus{border-color:rgba(6,182,212,.5);outline:0;box-shadow:0 0 0 4px rgba(6,182,212,.15)}
.search-box input::placeholder{color:var(--muted)}
.search-box .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.15));padding:.2rem .6rem;border-radius:8px;font-size:.8rem;color:var(--cyan);font-weight:500}
.filter-pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.5rem}
.fpill{background:rgba(71,85,105,.3);border:1px solid rgba(59,130,246,.2);color:var(--gray);font-weight:600;font-size:.85rem;padding:.5rem 1.2rem;border-radius:50px;transition:.3s;cursor:pointer}
.fpill.active,.fpill:hover{background:rgba(6,182,212,.15);color:var(--cyan);border-color:rgba(6,182,212,.3)}

/* ===== FAQ ===== */
.faq-card{background:linear-gradient(135deg,rgba(15,23,42,.8),rgba(30,41,59,.6));border:1px solid rgba(71,85,105,.3);border-radius:1.2rem;transition:.4s;overflow:hidden;backdrop-filter:blur(10px)}
.faq-card:hover{border-color:rgba(6,182,212,.3);box-shadow:0 10px 30px rgba(6,182,212,.1)}
.faq-card.open .faq-body{max-height:500px;opacity:1;padding-bottom:1.5rem}
.faq-btn{width:100%;padding:1.2rem;text-align:left;background:none;border:none;color:var(--white);display:flex;align-items:flex-start;justify-content:space-between;cursor:pointer;font-size:inherit}
.faq-btn:focus{outline:none;box-shadow:none}
.faq-num{width:28px;height:28px;background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(59,130,246,.15));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--cyan);margin-right:.8rem;flex-shrink:0}
.faq-q{font-weight:900;font-size:1.05rem;color:var(--cyan-l);line-height:1.4;flex:1}
.faq-plus{width:38px;height:38px;background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(59,130,246,.1));border:1px solid rgba(6,182,212,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s;color:var(--cyan)}
.faq-card.open .faq-plus{transform:rotate(45deg);background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.2))}
.faq-body{max-height:0;opacity:0;overflow:hidden;transition:.5s ease}
.faq-answer{background:linear-gradient(135deg,rgba(15,23,42,.2),rgba(6,10,20,.2));border:1px solid rgba(59,130,246,.15);border-radius:1rem;padding:1.2rem;font-size:.95rem;color:var(--gray);line-height:1.7;margin-top:.5rem}
.faq-footer{display:flex;align-items:center;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(59,130,246,.1)}
.faq-footer i.fa-circle-check{color:var(--green);margin-right:.5rem;font-size:.85rem}
.faq-footer .thumbs{margin-left:auto;display:flex;gap:.5rem}
.faq-footer .thumbs button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:2px;transition:.2s}
.faq-footer .thumbs button:hover{color:var(--cyan)}

/* ===== Help Box ===== */
.help-box{background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(59,130,246,.1));border:2px solid rgba(6,182,212,.3);border-radius:1.5rem;padding:2.5rem 1.5rem;text-align:center;position:relative;overflow:hidden}
.help-box::before{content:'';position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle at 2px 2px,rgba(6,182,212,.8) 1px,transparent 0);background-size:40px 40px;pointer-events:none}
.help-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(59,130,246,.2));border:1px solid rgba(6,182,212,.2);border-radius:1.2rem;display:flex;align-items:center;justify-content:center}
.help-icon i{font-size:2rem;color:var(--cyan)}
/* FIX: var(--cyan-light) → var(--cyan-l) */
.help-title{font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--cyan-l);margin-bottom:.8rem}
.help-desc{color:var(--muted);font-size:1rem;max-width:600px;margin:0 auto 1.5rem}
.help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.hc{background:linear-gradient(135deg,rgba(6,182,212,.08),rgba(59,130,246,.03));border:2px solid rgba(6,182,212,.25);border-radius:1rem;padding:1.5rem;text-align:center;transition:.3s;position:relative;overflow:hidden}
.hc:hover{border-color:rgba(6,182,212,.5);transform:translateY(-3px)}
.hc-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(to right,rgba(6,182,212,.15),rgba(59,130,246,.15));display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;transition:.3s}
.hc:hover .hc-icon{transform:scale(1.1)}
.hc h5{font-weight:700;color:#fff;font-size:1rem;margin-bottom:.3rem}
.hc p{color:var(--muted);font-size:.85rem}
.hc-tag{display:inline-block;padding:.2rem .7rem;border-radius:50px;font-size:.7rem;font-weight:600;margin-top:.5rem}
.hc-tag.cyan{background:rgba(6,182,212,.15);color:var(--cyan)}
.hc-tag.blue{background:rgba(59,130,246,.15);color:var(--blue)}
.hc-tag.green{background:rgba(34,197,94,.15);color:var(--green)}

/* ===== Animations ===== */
.fade-up{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.16,1,.3,1)}
.fade-up.vis{opacity:1;transform:translateY(0)}
.chart-line{stroke-dasharray:600;stroke-dashoffset:600;animation:dl 3s ease forwards}
@keyframes dl{to{stroke-dashoffset:0}}
.chart-dot{animation:cpd 2s infinite}
@keyframes cpd{0%,100%{r:4}50%{r:8;opacity:.5}}

/* ===== Mobile Menu ===== */
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(6,10,20,.98);backdrop-filter:blur(20px);z-index:999;padding:5rem 2rem 2rem}
.mobile-menu.show{display:flex;flex-direction:column}
.mobile-menu a{color:var(--white);font-size:1.2rem;font-weight:600;padding:1rem 0;border-bottom:1px solid rgba(59,130,246,.1);transition:.3s}
.mobile-menu a:hover{color:var(--cyan)}
.close-menu{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}
.hamburger{background:none;border:1px solid transparent;color:#fff;font-size:1.3rem;cursor:pointer;padding:.3rem .5rem;border-radius:6px;transition:.3s}
.hamburger:hover{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.1)}

/* ===== Logo & Brand ===== */
.logo-icon{width:32px;height:32px}
.brand-text{font-weight:800;font-size:1.25rem;color:#fff!important}

/* ===== Dropdown ===== */
.dropdown-menu-c{background:rgba(15,23,42,.95);backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,.2);border-radius:12px;padding:.5rem;margin-top:.5rem!important}
.dropdown-menu-c .dropdown-item{color:var(--gray);padding:.5rem 1rem;border-radius:8px;font-size:.875rem;transition:.2s}
.dropdown-menu-c .dropdown-item:hover{background:rgba(59,130,246,.1);color:var(--cyan)}
.dropdown-toggle::after{display:none!important}
.da{font-size:.65rem;margin-left:.3rem;transition:transform .3s}
.dropdown.show .da{transform:rotate(180deg)}

/* ===== Phone SVG ===== */
.phone-svg{transform:rotate(-6deg);transition:.5s}
.phone-svg:hover{transform:rotate(0)}
.phone-row{display:flex;justify-content:center;gap:2rem}
@media(max-width:575px){.phone-row{gap:1rem}.phone-svg{width:220px;height:420px}}
@media(min-width:576px){.phone-svg{width:250px;height:480px}}

/* ===== Footer ===== */
.footer-section{background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(6,10,20,.95));border-top:1px solid rgba(59,130,246,.15);position:relative;overflow:hidden}
.footer-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.05),transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(6,182,212,.05),transparent 50%);pointer-events:none}
.footer-link{color:var(--muted);font-size:.9rem;transition:.3s;display:inline-block;padding:.2rem 0}
.footer-link:hover{color:var(--cyan);transform:translateX(4px)}
.footer-title{color:var(--cyan-l);font-weight:800;font-size:1rem;margin-bottom:1.2rem}
.footer-bottom{border-top:1px solid rgba(59,130,246,.1);padding-top:1.5rem}
.social-icon{width:40px;height:40px;border-radius:10px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);display:inline-flex;align-items:center;justify-content:center;color:var(--gray);transition:.3s;font-size:.9rem}
.social-icon:hover{background:rgba(6,182,212,.15);border-color:rgba(6,182,212,.4);color:var(--cyan);transform:translateY(-2px)}

/* ===== Responsive Fixes ===== */
@media(max-width:991px){
  .hero{padding:7rem 0 3rem;min-height:auto}
  .h-title{font-size:3rem}
  .h-stats{margin-top:1.5rem;padding-top:1.5rem}
}
@media(max-width:767px){
  .h-title{font-size:2.5rem}
  .h-desc{font-size:1rem}
  .sv{font-size:1.4rem}
  .fee-card{padding:1.5rem 1rem}
}
@media(max-width:575px){
  .h-title{font-size:3rem}
  .btn-st,.btn-wd{padding:.7rem 1.5rem;font-size:.95rem}
  .tk{width:260px;padding:1rem}
}
@media(max-width:576px){
    .qx-logo img{
        width:230px !important;
    }
}

@media (max-width:576px) {
    .hero {
        padding: 3rem 0 3rem;
        min-height: auto;
    }
}