*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}


body{

background:#050505;
color:white;

}


html{

scroll-behavior:smooth;

}



.navbar{

position:fixed;
top:0;
width:100%;
padding:20px 8%;

display:flex;
justify-content:space-between;

background:rgba(0,0,0,.6);

backdrop-filter:blur(20px);

z-index:1000;

}


.logo{

font-size:25px;
font-weight:800;

}

.logo span{

color:#d4af37;

}



.nav-links a{

margin-left:25px;

color:white;

text-decoration:none;

}



.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-around;

padding:120px 8%;


}


.hero-text{

max-width:600px;

}



h1{

font-size:55px;

line-height:1.1;

}


p{

color:#aaa;

margin:20px 0;

line-height:1.7;

}




button{

padding:14px 30px;

background:#d4af37;

border:none;

border-radius:30px;

cursor:pointer;

}



.outline{

background:transparent;

border:1px solid #d4af37;

color:white;

}




.terminal{


width:400px;

height:300px;

background:#111;

border:1px solid #333;

border-radius:20px;

padding:20px;

box-shadow:0 0 50px #d4af3730;

}




.chart{

height:180px;

overflow:hidden;

}



.line{

height:100%;

background:

linear-gradient(

120deg,

transparent,

#00ff99,

transparent

);


animation:move 3s infinite;

}



@keyframes move{

from{

transform:translateX(-100%);

}

to{

transform:translateX(100%);

}

}



.section{

padding:120px 8%;

}



h2{

font-size:40px;

margin-bottom:40px;

}



.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:40px;

}



.cards div,
.project{

background:rgba(255,255,255,.05);

padding:30px;

border-radius:20px;

border:1px solid #333;

backdrop-filter:blur(15px);

}



.flow{

margin:40px auto;

text-align:center;

font-size:22px;

color:#d4af37;

}



.dashboard{

margin-top:40px;

background:#111;

padding:30px;

border-radius:20px;

}



.backtest-preview{


background:rgba(255,255,255,0.05);

border:1px solid #333;

padding:30px;

border-radius:20px;

text-align:center;

margin-top:40px;


}



.backtest-preview button{


margin-top:20px;

}



form{

max-width:600px;

display:flex;

flex-direction:column;

gap:20px;

}



input,textarea{

padding:15px;

background:#111;

border:1px solid #333;

color:white;

border-radius:10px;

}


textarea{

height:150px;

}


@media(max-width:900px){

.hero{

flex-direction:column;

}

h1{

font-size:38px;

}

.terminal{

margin-top:40px;

}


}

/* =========================
   MOBILE RESPONSIVE DESIGN
========================= */


@media(max-width:768px){


body{

overflow-x:hidden;

}



/* NAVBAR */


.navbar{

padding:15px 20px;

flex-direction:column;

gap:15px;

}


.logo{

font-size:20px;

}



.nav-links{

display:flex;

width:100%;

overflow-x:auto;

gap:18px;

padding-bottom:5px;

}


.nav-links a{

font-size:13px;

margin:0;

white-space:nowrap;

}



/* HERO */


.hero{

padding:140px 20px 60px;

display:flex;

flex-direction:column;

text-align:center;

}



.hero-text{

width:100%;

}



h1{

font-size:32px;

line-height:1.2;

}



p{

font-size:15px;

}



.buttons{

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}



button{

width:90%;

}




/* TERMINAL */


.terminal{

width:100%;

height:auto;

margin-top:40px;

padding:15px;

}



.chart{

height:150px;

}




/* SECTIONS */


.section{

padding:70px 20px;

}



h2{

font-size:30px;

text-align:center;

}




/* CARDS */


.cards{

grid-template-columns:1fr;

gap:20px;

}



.cards div,
.project{


padding:22px;

border-radius:15px;


}




/* FLOW */


.flow{

font-size:16px;

line-height:2;

padding:20px 0;

}



/* DASHBOARD */


.dashboard{

padding:20px;

}



.equity{

height:140px;

}





/* BACKTEST IMAGE */


.backtest{

padding:15px;

overflow:hidden;

}



.backtest img{

width:100%;

height:auto;

object-fit:contain;

}





/* CONTACT */


form{

width:100%;

}

@media(max-width:768px){


footer{

padding:40px 20px;

}


.footer-container{

grid-template-columns:1fr;

text-align:center;

}


}

input,
textarea{


font-size:16px;

width:100%;


}




}

.mobile-terminal{

animation:float 5s infinite;

}


@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

footer{


background:#080808;

border-top:1px solid #222;

padding:50px 8% 20px;


}


.footer-container{


display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;


}


footer h3{


color:#d4af37;

margin-bottom:20px;

}



footer p{


color:#aaa;

margin:8px 0;

}



.copyright{


margin-top:40px;

text-align:center;

color:#777;

font-size:14px;


}

.report-page{


min-height:100vh;

background:#050505;

padding:40px;

text-align:center;


}


.report-page h1{

color:#d4af37;

}



.report-image{


margin:40px auto;

max-width:1400px;


}


.report-image img{


width:100%;

border-radius:20px;

border:1px solid #333;


}