*{
box-sizing:border-box;
}body{
font-family:'Inter',sans-serif;
margin:0;
background:#050816;
color:#E6EDF3;
scroll-behavior:smooth;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
display: flex;
flex-direction: column;
}
footer{
margin-top:auto;
}
html{
scroll-behavior:smooth;
}

.section{
padding:80px 20px;
margin-bottom:0;
text-align:center;
}
.section{
scroll-margin-top:100px;
}

.glass{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
}

.hero{
height:100vh;
align-items:center;
justify-content:center;
text-align:center;
background:radial-gradient(circle,#0B1221,#050816);
}

.primary{
background:#00E0FF;
border:none;
padding:12px 25px;
border-radius:30px;
cursor:pointer;
}

.secondary{
background:#7B61FF;
border:none;
padding:12px 25px;
border-radius:30px;
cursor:pointer;
}

.glow{
box-shadow:0 0 15px #00E0FF;
}

.cards{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.card{
padding:20px;
width:220px;
cursor:pointer;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 0 20px #14F195;
}

.steps{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
align-items:center;
justify-content:center;
}

.modal-content{
padding:30px;
width:300px;
text-align:center;
}

.close{
float:right;
cursor:pointer;
font-size:20px;
}

footer{
text-align:center;
padding:20px;
background:#0B1221;
}

body{
font-family:'Inter',sans-serif;
margin:0;
background:#050816;
color:#E6EDF3;
scroll-behavior:smooth;
overflow-x:hidden;
}



.logo{
font-weight:700;
}
.logo img{
height:60px;
}

/* GLASS UI */
.glass{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
}

/* HERO */
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:100px 20px;
background:radial-gradient(circle,#0B1221,#050816);
}

.hero h1{
font-size:48px;
max-width:700px;
margin:auto;
}

.hero p{
font-size:18px;
max-width:500px;
margin:20px auto;
}

/* BUTTONS */
.primary{
background:#00E0FF;
border:none;
padding:12px 25px;
border-radius:30px;
cursor:pointer;
color:black;
}

.secondary{
background:#7B61FF;
border:none;
padding:12px 25px;
border-radius:30px;
cursor:pointer;
color:white;
}

.glow{
box-shadow:0 0 15px #00E0FF;
}

/* SECTION */
.section{
padding:80px 20px;
text-align:center;
}

/* STEPS */
.steps{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.step{
padding:15px 20px;
background:#0B1221;
border-radius:8px;
}

/* CARDS */
.cards{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.card{
padding:20px;
width:250px;
cursor:pointer;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 0 20px #14F195;
}

/* MODAL */
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
align-items:center;
justify-content:center;
padding:20px;
}

.modal-content{
padding:30px;
width:100%;
max-width:320px;
text-align:center;
}

.close{
float:right;
cursor:pointer;
font-size:20px;
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
background:#0B1221;
}

/* =======================
   📱 MOBILE RESPONSIVE
   ======================= */

@media (max-width:768px){


.hero h1{
font-size:30px;
}

.hero p{
font-size:14px;
}

.section{
padding:50px 15px;
}

.card{
width:100%;
max-width:300px;
}


}

/* =======================
   📟 TABLET RESPONSIVE
   ======================= */

@media (min-width:769px) and (max-width:1024px){

.hero h1{
font-size:38px;
}

.card{
width:45%;
}

.steps{
flex-wrap:wrap;
}

}
#particles-js{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:0;
}

.hero{
position:relative;
overflow:hidden;
}

.hero-content{
position:relative;
z-index:2;
}.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

@media (max-width:768px){

.menu-toggle{
display:block;
}

#nav-menu{
display:none;
flex-direction:column;
background:#0B1221;
width:100%;
padding:20px;
}

#nav-menu.active{
display:flex;
}

#nav-menu a.active{
color:#00E0FF;
font-weight:600;
}

}

.slider{
width:80%;
margin-top:20px;
}


/* ============================
   LIVE DASHBOARD
============================ */

.dashboard-section{
background:#050816;
padding:120px 20px;
text-align:center;
}

.dash-title{
font-size:36px;
margin-bottom:10px;
}

.dash-tag{
color:#7B61FF;
margin-bottom:50px;
}

/* GRID */

.dashboard-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
max-width:1000px;
margin:auto;
}

/* CARD */

.dash-card{
background:#0B1221;
padding:25px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.05);
transition:0.3s;
}

.dash-card:hover{
transform:translateY(-5px);
box-shadow:0 0 20px rgba(0,224,255,0.2);
}

/* TEXT */

.dash-card span{
font-size:13px;
color:#9CA3AF;
}

.dash-card h3{
font-size:26px;
margin-top:10px;
}

/* RISK COLOR */

.risk-medium{
color:#F59E0B;
}

/* MOBILE */

@media(max-width:900px){
.dashboard-grid{
grid-template-columns:1fr;
}
}


.section.show{
opacity:1;
transform:translateY(0);
}


#loader{
position:fixed;
width:100%;
height:100%;
background:#050816;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity 0.5s ease;
}

.loader-logo{
width:90px;
animation:pulse 2s infinite;
}

.loader-text{
margin-top:20px;
font-size:14px;
color:#00E0FF;
letter-spacing:2px;
}

@keyframes pulse{
0%{transform:scale(1);opacity:0.5;}
50%{transform:scale(1.2);opacity:1;}
100%{transform:scale(1);opacity:0.5;}
}

/* LOADER BG */

#loader{
position:fixed;
width:100%;
height:100%;
background:#050816;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:9999;
transition:0.5s;
}

/* LOGO */

.loader-logo{
width:90px;
z-index:2;
filter:
brightness(0)
invert(1)
drop-shadow(0 0 10px #00E0FF)
drop-shadow(0 0 20px #7B61FF);
}

/* AI RING */

.loader-ring{
position:absolute;
width:140px;
height:140px;
border:2px solid #00E0FF;
border-radius:50%;
animation:spin 3s linear infinite;
box-shadow:0 0 30px #00E0FF;
}

.deploy-btn{
display:inline-block;
padding:10px 20px;
background:#00E0FF;
color:#000;
border-radius:20px;
text-decoration:none;
transition:0.3s;
}

.deploy-btn:hover{
box-shadow:0 0 20px #00E0FF;
transform:scale(1.05);
}

/* BOOT TEXT */

.loader-text{
margin-top:20px;
font-size:14px;
color:#00E0FF;
letter-spacing:2px;
z-index:2;
}

/* ROTATION */

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.loader-ring::after{
content:'';
position:absolute;
width:180px;
height:180px;
border:1px dashed #7B61FF;
border-radius:50%;
top:-20px;
left:-20px;
animation:spin 6s linear infinite reverse;
}

/* REMOVE OLD RIGHT SHIFT */
#nav-menu{
margin-left:0;
}

.logo img{
height:60px;
}

.navbar{
display:flex;
align-items:center;
padding:20px 60px;
height:90px;
position:fixed;
width:100%;
top:0;
z-index:10;
}

/* LEFT ZONE */

.nav-left{
display:flex;
align-items:center;
gap:60px;
}

/* MENU */

#nav-menu{
display:flex;
gap:40px;
align-items:center;
}

/* RIGHT CTA */

.nav-right{
margin-left:auto;
}

/* LOGO */

.logo img{
height:60px;
}

#nav-menu a{
color:#ffffff;
text-decoration:none;
font-weight:500;
}

#nav-menu a:hover{
color:#00E0FF;
}
.navbar{
display:flex;
align-items:center;
padding:20px 60px;
height:90px;
position:fixed;
width:100%;
top:0;
left:0;
z-index:10;
}
.nav-right{
margin-left:auto;
flex-shrink:0;
}

.cta{
   cursor:pointer;
   transition:0.3s;
padding:10px 22px;
border-radius:25px;
font-weight:500;
transition:all 0.3s ease;
}
.cta:hover{
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(0,0,0,0.15);
}

.nav-light .cta{
background:#00E0FF;
color:#000;
}

.nav-dark .cta{
background:#0B1221;
color:#fff;
border:1px solid #0B1221;
}

.cta:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,224,255,0.25);
}
.section-title{
text-align:center;
font-size:32px;
margin-bottom:60px;
}

.workflow{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.workflow-step{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.circle{
width:60px;
height:60px;
border-radius:50%;
background:#0B1221;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
border:2px solid #00E0FF;
color:#00E0FF;
transition:0.3s;
}

.workflow-step:hover .circle{
box-shadow:0 0 20px #00E0FF;
transform:scale(1.1);
}

.line{
width:60px;
height:2px;
background:#7B61FF;
}

@media(max-width:768px){

.workflow{
flex-direction:column;
}

.line{
width:2px;
height:40px;
}

}

/* WHITE WORKFLOW SECTION */

.how-section{
background:#ffffff;
padding:100px 20px;
text-align:center;
}

.how-title{
font-size:32px;
margin-bottom:60px;
color:#0B1221;
}

/* STEPS */

.workflow{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.workflow-step{
display:flex;
flex-direction:column;
align-items:center;
}

.icon-circle{
width:70px;
height:70px;
border-radius:50%;
background:#F3F6FA;
display:flex;
align-items:center;
justify-content:center;
transition:0.3s;
}

.icon-circle img{
width:30px;
}

.workflow-step:hover .icon-circle{
background:#E6F7FF;
box-shadow:0 0 15px rgba(0,224,255,0.5);
transform:scale(1.1);
}

.workflow-step p{
color:#0B1221;
margin-top:10px;
font-weight:500;
}

.line{
width:60px;
height:2px;
background:#D1D5DB;
}

@media(max-width:768px){

.workflow{
flex-direction:column;
}

.line{
width:2px;
height:40px;
}

}


/* EXPANDED WHITE SECTION */

.how-section{
background:#ffffff;
padding:140px 20px;
text-align:center;
}

.how-title{
font-size:40px;
margin-bottom:10px;
color:#0B1221;
}

.how-tag{
color:#7B61FF;
margin-bottom:60px;
font-weight:600;
}

/* WORKFLOW */

.workflow{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.workflow-step{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
cursor:pointer;
}

/* ICON */

.icon-circle{
width:90px;
height:90px;
border-radius:50%;
background:#F3F6FA;
display:flex;
align-items:center;
justify-content:center;
transition:0.4s;
}

.icon-circle img{
width:50px;
}

/* HOVER */

.workflow-step:hover .icon-circle{
transform:scale(1.2);
box-shadow:0 0 20px rgba(0,224,255,0.6);
}

/* TEXT */

.workflow-step p{
color:#0B1221;
margin-top:15px;
font-size:18px;
font-weight:600;
}

/* TOOLTIP */

.workflow-step::after{
content:attr(data-tooltip);
position:absolute;
bottom:-40px;
background:#0B1221;
color:white;
padding:5px 10px;
font-size:12px;
border-radius:6px;
opacity:0;
transition:0.3s;
}

.workflow-step:hover::after{
opacity:1;
}

/* CONNECTOR */

.line{
width:80px;
height:2px;
background:#D1D5DB;
}

.workflow-step{
opacity:0;
transform:translateY(40px);
transition:0.6s;
}

.workflow-step.show{
opacity:1;
transform:translateY(0);
}
@media(max-width:768px){

.workflow{
flex-direction:column;
}

.line{
width:2px;
height:40px;
}

}
.plan-section{
background:#050816;
padding:120px 20px;
text-align:center;
}

.plan-title{
color:white;
font-size:40px;
margin-bottom:60px;
}

.plan-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:30px;
width:100%;
}



.plan-card{
width:100%;
background:linear-gradient(180deg,#0B1221,#020617);
padding:40px 30px;
border-radius:20px;
border:1px solid #00E0FF;
color:white;
transition:0.4s;
text-align:center;
}
.plan-card button{
padding:10px 25px;
border:none;
background:#00E0FF;
color:black;
border-radius:20px;
cursor:pointer;
transition:0.3s;
}

.plan-card button:hover{
box-shadow:0 0 20px #00E0FF,
0 0 40px #00E0FF;
transform:scale(1.05);
}
@media(max-width:900px){

.plan-grid{
grid-template-columns:1fr;
}

.plan-card{
width:100%;
max-width:350px;
}

}

.plan-card:hover{
transform:translateY(-10px);
box-shadow:0 0 30px #00E0FF;
}

.plan-card h3{
margin-bottom:10px;
}


.plan-card ul{
list-style:none;
padding:0;
margin:20px 0;
}

.plan-card ul li{
margin:10px 0;
}

.plan-card button{
padding:10px 20px;
border:none;
background:#00E0FF;
color:black;
border-radius:20px;
cursor:pointer;
}

.popular{
border:2px solid #14F195;
box-shadow:0 0 30px #14F195;
}

.compare-toggle{
margin-bottom:40px;
}

.toggle-btn{
padding:10px 20px;
border:none;
margin:0 5px;
cursor:pointer;
background:#0B1221;
color:white;
border-radius:6px;
}

.toggle-btn.active{
background:#00E0FF;
color:black;
}

.roi-calculator{
margin-top:60px;
color:white;
}

#roiSlider{
width:80%;
margin:20px;
}
.plan-wrapper{
width:100%;
max-width:1100px;
margin:0 auto;
}
/* ================================
   AI STRATEGY PLAN SECTION FIXED
================================ */

.plan-section{
background:#050816;
padding:120px 20px;
text-align:center;
}

.plan-title{
color:white;
font-size:40px;
margin-bottom:40px;
}

.compare-toggle{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:40px;
}

.toggle-btn{
padding:10px 20px;
border:none;
cursor:pointer;
background:#0B1221;
color:white;
border-radius:6px;
}

.toggle-btn.active{
background:#00E0FF;
color:black;
}

/* GRID FIX */

.plan-wrapper{
max-width:1100px;
margin:auto;
}

.plan-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
}

/* CARD */

.plan-card{
background:linear-gradient(180deg,#0B1221,#020617);
padding:40px 30px;
border-radius:20px;
border:1px solid #00E0FF;
color:white;
transition:0.4s;
text-align:center;
}

.plan-card:hover{
transform:translateY(-10px);
box-shadow:0 0 30px #00E0FF;
}

.plan-card button{
padding:10px 20px;
border:none;
background:#00E0FF;
color:black;
border-radius:20px;
cursor:pointer;
transition:0.3s;
}

.plan-card button:hover{
box-shadow:0 0 20px #00E0FF,
0 0 40px #00E0FF;
}

/* BADGE */

.badge{
background:#7B61FF;
padding:4px 10px;
border-radius:6px;
font-size:12px;
display:inline-block;
margin:10px 0;
}

/* MOBILE */

@media(max-width:900px){

.plan-grid{
grid-template-columns:1fr;
}

}.risk{
display:none;
}
/* STRATEGY MOBILE FIX */

@media(max-width:768px){

.plan-grid{
grid-template-columns:1fr;
justify-items:center;   /* centers cards */
}

.plan-card{
width:100%;
max-width:320px;
margin:auto;
text-align:center;
}

}

/* =========================
   RISK MANAGEMENT GRID FIX
========================= */

.risk-section{
background:#ffffff;
padding:120px 20px;
text-align:center;
}

.risk-title{
font-size:40px;
color:#0B1221;
margin-bottom:10px;
}

.risk-tag{
color:#7B61FF;
margin-bottom:60px;
}

/* GRID */

.risk-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

/* CARD */

.risk-card{
background:#F9FAFB;
padding:30px;
border-radius:12px;
text-align:center;
transition:0.3s ease;

/* IMPORTANT: override inherited styles */
width:auto;
max-width:none;
margin:0;
}

.risk-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* ICON */

.risk-card img{
width:50px;
margin-bottom:15px;
}

/* TEXT */

.risk-card h3{
color:#0B1221;
margin-bottom:10px;
}

.risk-card p{
color:#6B7280;
font-size:14px;
}

/* RESPONSIVE */
/* RISK GRID RESPONSIVE */

@media(max-width:900px){

.risk-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:500px){

.risk-grid{
grid-template-columns:1fr;
}

.risk-card{
max-width:320px;
margin:auto;
}

}

/* FORCE MOBILE FIX FOR PERFORMANCE + RISK */

@media (max-width: 768px){

.performance-grid{
display:grid !important;
grid-template-columns:1fr !important;
gap:20px;
}

.perf-card{
width:100% !important;
max-width:320px;
margin:auto !important;
}

}


/* ============================
   PLATFORM USED SECTION
============================ */


/* SECTION */

.platform-section{
background:#ffffff;
padding:140px 20px;
text-align:center;
}

.platform-title{
font-size:42px;
color:#0B1221;
margin-bottom:10px;
}

.platform-tag{
color:#7B61FF;
margin-bottom:70px;
font-weight:600;
}

/* GRID */

.platform-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

/* CARD */

.platform-card{
position:relative;
background:#F9FAFB;
padding:35px;
border-radius:16px;
transition:0.35s ease;
text-align:center;
border:1px solid rgba(0,0,0,0.05);
}

/* HOVER */

.platform-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

/* PRIMARY CARD (MT5) */

.platform-card.primary{
border:1px solid #00E0FF;
box-shadow:0 0 25px rgba(0,224,255,0.15);
}

/* LOGO */

.platform-card img{
height:60px;
margin:20px 0;
transition:0.3s;
}

.platform-card.primary img{
height:75px;
}

/* TEXT */

.platform-card h3{
color:#0B1221;
margin-bottom:10px;
}

.platform-card p{
color:#6B7280;
font-size:14px;
line-height:1.6;
}

/* TAGS */

.tag{
position:absolute;
top:15px;
left:15px;
font-size:11px;
padding:4px 10px;
border-radius:20px;
background:#00E0FF;
color:black;
}

.tag.secondary{
background:#E5E7EB;
color:#111;
}

.tag.analytics{
background:#7B61FF;
color:white;
}

/* MOBILE */

@media(max-width:900px){
.platform-grid{
grid-template-columns:1fr;
}
}


/* SECTION */

.broker-section{
background:#ffffff;
padding:120px 20px;
text-align:center;
}

/* TITLE */

.broker-title{
font-size:40px;
color:#0B1221;
margin-bottom:10px;
}

.broker-tag{
color:#7B61FF;
margin-bottom:60px;
font-weight:500;
}

/* SLIDER */

.broker-slider{
overflow:hidden;
position:relative;
}

/* TRACK */

.broker-track{
display:flex;
gap:60px;
animation:scroll 25s linear infinite;
align-items:center;
}

/* LOGOS */

.broker-track img{
height:70px;
opacity:0.6;
transition:0.3s ease;
}

/* HOVER EFFECT */

.broker-track img:hover{
opacity:1;
transform:scale(1.1);
}

/* ANIMATION */

@keyframes scroll{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* MOBILE */

@media(max-width:768px){
.broker-track{
gap:30px;
}
.broker-track img{
height:30px;
}
}
/* BROKER MOBILE FIX */

@media(max-width:768px){

.broker-track img{
height:50px;   /* increased from ~30px */
}

.broker-track{
gap:40px;
}

}


/* ============================
   PERFORMANCE SNAPSHOT
============================ */


/* SECTION */

.performance-section{
background:#F9FAFB;
padding:120px 20px;
margin-bottom:0;
padding-bottom:00px;
text-align:center;
}

/* TITLE */

.perf-title{
font-size:40px;
color:#0B1221;
margin-bottom:10px;
}

.perf-tag{
color:#7B61FF;
margin-bottom:60px;
font-weight:500;
}

/* GRID */


/* MAIN GRID */

.performance-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
max-width:1000px;
margin:0 auto;
}


/* CARD FIX */

.perf-card{
width:100%;
max-width:300px;
margin:auto;
}
/* CARD */

.perf-card{
background:#ffffff;
padding:30px;
border-radius:12px;
transition:0.3s ease;
border:1px solid rgba(0,0,0,0.05);
}

.perf-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* MAIN CONTAINER */
main{
flex:1;
}

.perf-container{
max-width:1000px;
margin:auto;
}

/* SUBHEADINGS */

.perf-sub{
text-align:center;
margin:50px 0 25px;
color:#0B1221;
font-size:22px;
}

/* GRID FIX */

.performance-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
justify-content:center;
}

/* FORCE CENTERING FOR LAST ROW */

.performance-grid:last-of-type{
grid-template-columns:repeat(3, 300px);
justify-content:center;
}

.perf-card{
width:100%;
max-width:300px;
margin:auto;
}

/* TEXT */

.perf-card span{
font-size:14px;
color:#6B7280;
}

.perf-card h3{
font-size:28px;
margin-top:10px;
color:#0B1221;
}

/* COLOR CODING (OPTIONAL) */

.perf-card h3.positive{
color:#10B981;
}

.perf-card h3.negative{
color:#EF4444;
}

/* MOBILE */

@media(max-width:900px){
.performance-grid{
grid-template-columns:1fr;
}
}
.strategy-desc{
font-size:14px;
line-height:1.6;
color:#cbd5e1;
margin:15px 0 20px 0;
}

.plan-card ul{
list-style:none;
padding:0;
margin:0 0 20px 0;
}

.plan-card ul li{
margin:8px 0;
font-size:14px;
}

/* DEFAULT (DARK BACKGROUND) */
.navbar{
color:white;
transition:0.3s;
}

/* DEFAULT (DARK BACKGROUND) */
.navbar{
transition:0.3s;
}

/* DARK MODE (WHITE BG SECTIONS) */
.navbar.nav-dark{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(10px);
}

.navbar.nav-dark #nav-menu a{
color:#0B1221;
}

.navbar.nav-dark .cta{
   cursor:pointer;
background:#0B1221;
color:#fff;
}

/* LIGHT MODE (DARK BG SECTIONS) */
.navbar.nav-light 
.navbar.nav-light .cta{
background:#00E0FF;
color:black;
}
/* MOBILE NAV */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

@media(max-width:768px){

.menu-toggle{
display:block;
}

#nav-menu{
display:none;
flex-direction:column;
background:#0B1221;
position:absolute;
top:80px;
left:0;
width:100%;
padding:20px;
}

#nav-menu.active{
display:flex;
}

}.navbar{
transition:all 0.35s ease-in-out;
}
.navbar{
transition:all 0.35s ease-in-out;
}#nav-menu a{
transition:color 0.3s;
}

/* PLATFORM GRID */

.platform-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1000px;
margin:50px auto;
}

/* CARD */

.platform-card{
background:#F9FAFB;
padding:30px;
border-radius:12px;
transition:all 0.3s ease;
text-align:center;
}

.platform-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* LOGO */

.platform-card img{
height:50px;
margin-bottom:15px;
transition:transform 0.3s ease;
}

/* BIGGER FOR MT4 & MT5 */

.platform-card img[src*="mt4"],
.platform-card img[src*="mt5"]{
height:70px;

margin-bottom:15px;
transition:transform 0.3s ease;
}


.platform-card:hover img{
transform:scale(1.1);
}

/* TEXT */

.platform-card h3{
color:#0B1221;
margin-bottom:10px;
}

.platform-card p{
color:#6B7280;
font-size:14px;
}

/* MOBILE */

@media(max-width:900px){
.platform-grid{
grid-template-columns:1fr;
}
}

/* FOOTER */

.footer{
background:#050816;
color:#E6EDF3;
padding:80px 20px 30px;
border-top:1px solid rgba(255,255,255,0.05);

}

/* GRID */

.footer-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
max-width:1200px;
margin:auto;
align-items:flex-start;
}

/* LOGO */

.footer-logo{
height:50px;
margin-bottom:15px;
}

/* TEXT */

.footer-col h4{
margin-bottom:15px;
font-size:16px;
}

.footer-col p{
font-size:14px;
color:#9CA3AF;
line-height:1.6;
}

/* LINKS */

.footer-col a{
display:block;
color:#E6EDF3;
text-decoration:none;
margin:6px 0;
font-size:14px;
transition:0.3s;
}

.footer-col a:hover{
color:#00E0FF;
}

/* SOCIAL */

.social-links a{
display:block;
}

/* BADGES */


.footer{
background:#050816;
padding:80px 20px;
color:#E6EDF3;
}
.footer-container{
display:grid;
grid-template-columns:1fr 1.5fr 1fr;
gap:50px;
max-width:1200px;
margin:auto;
align-items:flex-start;
}

/* NAV LEFT ALIGN FIX */

.nav-col{
text-align:left;
}

.nav-col a{
display:block;
margin:8px 0;
}

/* ABOUT CENTER */

.about-col{
text-align:center;
}

/* LOGO */

.footer-logo{
height:55px;
margin-bottom:15px;
}

/* SOCIAL CENTERED */

.social-icons{
margin-top:20px;
display:flex;
justify-content:center;
gap:15px;
}

.social-icons a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#0B1221;
border-radius:50%;
transition:0.3s;
}

.social-icons a:hover{
background:#00E0FF;
color:black;
transform:translateY(-3px);
}

/* BADGES */

.footer-badges{
display:flex;
justify-content:center;
gap:30px;
margin-top:40px;
flex-wrap:wrap;
}

.footer-badges img{
height:40px;
opacity:0.7;
}

.footer-bottom{
text-align:center;
margin-top:40px;
font-size:13px;
color:#9CA3AF;
}

/* MOBILE */

@media(max-width:900px){
.footer-container{
grid-template-columns:1fr;
text-align:center;
}
.social-icons{
justify-content:center;
}
}

.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
transition:0.3s;
}

.whatsapp-float img{
width:70px;   /* adjust if needed */
height:auto;
display:block;
}


.whatsapp-float:hover{
transform:scale(1.1);
}
.whatsapp-float img{
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}
.whatsapp-float::after{
content:"Chat with us";
position:absolute;
right:70px;
background:#0B1221;
color:white;
padding:6px 10px;
border-radius:6px;
font-size:12px;
opacity:0;
transition:0.3s;
}

.whatsapp-float:hover::after{
opacity:1;
}

.demo-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
justify-content:center;
align-items:center;
z-index:999;
}

.demo-box{
background:#0B1221;
padding:30px;
border-radius:15px;
width:320px;
display:flex;
flex-direction:column;
gap:12px;
animation:fadeIn 0.3s ease;
}

.demo-box input,
.demo-box select{
padding:10px;
border:none;
border-radius:6px;
background:#111827;
color:white;
}

.demo-box h2{
text-align:center;
}

.close{
cursor:pointer;
align-self:flex-end;
}

@keyframes fadeIn{
from{transform:scale(0.9);opacity:0;}
to{transform:scale(1);opacity:1;}
}