/* ==========================================================
   TradeSignal AI Pro
   style.css Alpha 1.0
   PART 1 / 8
========================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#060b14;
color:#ffffff;
line-height:1.6;
overflow-x:hidden;

}

a{

text-decoration:none;
color:inherit;

}

img{

max-width:100%;
display:block;

}

ul{

list-style:none;

}

.container{

width:92%;
max-width:1400px;
margin:auto;

}

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

.navbar{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

background:rgba(8,12,20,.88);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

height:78px;

}

.logo{

font-size:28px;

font-weight:800;

letter-spacing:.5px;

}

.logo .blue{

color:#00CFFF;

}

.logo .green{

color:#00FFA3;

margin-left:5px;

}

nav ul{

display:flex;

gap:34px;

}

nav a{

font-size:15px;

color:#d6deeb;

transition:.30s;

}

nav a:hover{

color:#00CFFF;

}

.btn-login{

display:inline-flex;

align-items:center;

justify-content:center;

padding:13px 24px;

border-radius:12px;

font-weight:700;

background:linear-gradient(135deg,#00CFFF,#00FFA3);

color:#061018;

transition:.35s;

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(0,207,255,.30);

}

/* ==========================================================
   HERO
========================================================== */

.hero{

padding-top:150px;
padding-bottom:100px;

background:

radial-gradient(circle at top right,#11335d 0%,transparent 40%),

radial-gradient(circle at bottom left,#06363a 0%,transparent 35%),

#060b14;

}

.hero-grid{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:70px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:rgba(0,207,255,.12);

border:1px solid rgba(0,207,255,.25);

color:#00CFFF;

font-size:13px;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.05;

margin-bottom:28px;

}

.hero h1 span{

display:block;

margin-top:12px;

color:#00CFFF;

}

.hero p{

max-width:650px;

font-size:18px;

color:#aebccd;

margin-bottom:36px;

line-height:1.9;

}
/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:14px;

font-weight:700;

background:linear-gradient(135deg,#00CFFF,#00FFA3);

color:#061018;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 22px 45px rgba(0,207,255,.30);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:14px;

border:1px solid rgba(255,255,255,.10);

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

transition:.35s;

}

.btn-secondary:hover{

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

}

/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats{

display:flex;

gap:22px;

}

.stat{

flex:1;

padding:26px;

background:#101a2d;

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

transition:.35s;

}

.stat:hover{

transform:translateY(-6px);

border-color:#00CFFF;

box-shadow:0 18px 40px rgba(0,207,255,.18);

}

.stat h2{

font-size:36px;

margin-bottom:8px;

color:#00CFFF;

}

.stat p{

font-size:14px;

color:#97a8be;

}

/* ==========================================================
   AI CONSOLE
========================================================== */

.console{

background:#101a2d;

border-radius:22px;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 30px 70px rgba(0,0,0,.40);

}

.console-title{

display:flex;

align-items:center;

gap:10px;

padding:18px 22px;

background:#162338;

border-bottom:1px solid rgba(255,255,255,.06);

font-weight:700;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

}

.red{

background:#ff4d5a;

}

.yellow{

background:#ffc947;

}

.green{

background:#00ff99;

}

.console-body{

padding:25px;

}

.row{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid rgba(255,255,255,.05);

}

.row:last-child{

border:none;

}

.row span{

color:#9db0c8;

}

.row strong{

font-weight:700;

}

.online{

color:#00ff99;

}

.buy{

color:#00CFFF;

}
/* ==========================================================
   GLOBAL SECTIONS
========================================================== */

section{

padding:110px 0;

}

.section-header{

text-align:center;

max-width:900px;

margin:0 auto 70px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

border-radius:40px;

background:rgba(0,207,255,.12);

border:1px solid rgba(0,207,255,.25);

color:#00CFFF;

font-size:13px;

font-weight:700;

margin-bottom:20px;

}

.section-header h2{

font-size:48px;

font-weight:800;

margin-bottom:20px;

}

.section-header p{

font-size:18px;

color:#9db0c8;

line-height:1.8;

}

/* ==========================================================
   AI THINKING
========================================================== */

.thinking{

background:#08111f;

}

.thinking-panel{

max-width:1100px;

margin:auto;

padding:40px;

background:#101a2d;

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.thinking-line{

display:flex;

align-items:center;

gap:30px;

padding:18px 0;

border-bottom:1px solid rgba(255,255,255,.05);

}

.thinking-line:last-child{

border:none;

}

.time{

width:120px;

font-weight:700;

color:#00CFFF;

}

.success{

color:#00FF99;

font-weight:600;

}

.warning{

color:#FFC947;

font-weight:600;

}

.buy{

color:#00CFFF;

font-weight:700;

}

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

.dashboard{

background:#060d18;

}

.dashboard-grid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:28px;

}

.dashboard-card{

padding:32px;

background:#101a2d;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.dashboard-card:hover{

transform:translateY(-8px);

border-color:#00CFFF;

box-shadow:0 25px 60px rgba(0,207,255,.20);

}

.dashboard-card h4{

font-size:16px;

color:#8fa4bd;

margin-bottom:18px;

}

.dashboard-card h1{

font-size:44px;

margin-bottom:12px;

font-weight:800;

}

.dashboard-card p{

color:#9db0c8;

line-height:1.8;

}
/* ==========================================================
   FEATURES
========================================================== */

.features{

background:#08111f;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:30px;

}

.feature-card{

padding:35px;

background:#101a2d;

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

transition:.35s;

box-shadow:0 20px 45px rgba(0,0,0,.28);

}

.feature-card:hover{

transform:translateY(-8px);

border-color:#00CFFF;

box-shadow:0 28px 65px rgba(0,207,255,.18);

}

.feature-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

border-radius:18px;

background:linear-gradient(135deg,#00CFFF,#00FFA3);

margin-bottom:24px;

}

.feature-card h3{

font-size:24px;

margin-bottom:18px;

}

.feature-card p{

color:#9db0c8;

line-height:1.9;

}

/* ==========================================================
   ROADMAP
========================================================== */

.roadmap{

background:#060d18;

}

.roadmap-grid{

display:grid;

grid-template-columns:repeat(4,minmax(0,1fr));

gap:28px;

}

.roadmap-card{

padding:35px;

background:#101a2d;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.roadmap-card:hover{

transform:translateY(-8px);

border-color:#00CFFF;

}

.roadmap-card.done{

border-color:#00FF99;

}

.roadmap-card.active{

border-color:#00CFFF;

}

.roadmap-card h3{

font-size:15px;

color:#00CFFF;

margin-bottom:12px;

}

.roadmap-card h4{

font-size:24px;

margin-bottom:20px;

}

.roadmap-card p{

color:#9db0c8;

line-height:1.9;

}
/* ==========================================================
   PRICING
========================================================== */

.pricing{

background:#08111f;

}

.pricing-grid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:30px;

}

.price-card{

position:relative;

padding:42px;

background:#101a2d;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

text-align:center;

transition:.35s;

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

.price-card:hover{

transform:translateY(-8px);

border-color:#00CFFF;

}

.price-card.featured{

border:2px solid #00CFFF;

transform:scale(1.03);

}

.popular{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

padding:8px 18px;

border-radius:30px;

background:#00CFFF;

color:#061018;

font-size:12px;

font-weight:700;

}

.price-card h3{

font-size:28px;

margin-bottom:20px;

}

.price{

font-size:56px;

font-weight:800;

color:#00CFFF;

margin-bottom:8px;

}

.price span{

font-size:18px;

color:#9db0c8;

font-weight:500;

}

.price-card ul{

margin:35px 0;

}

.price-card li{

padding:14px 0;

border-bottom:1px solid rgba(255,255,255,.06);

color:#b6c3d5;

}

.price-card li:last-child{

border:none;

}

/* ==========================================================
   CTA
========================================================== */

.cta{

background:linear-gradient(180deg,#060d18,#08111f);

}

.cta-box{

padding:70px;

border-radius:28px;

text-align:center;

background:linear-gradient(135deg,#0f1c31,#152846);

border:1px solid rgba(0,207,255,.20);

box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.cta-box h2{

font-size:54px;

margin-bottom:22px;

}

.cta-box p{

max-width:800px;

margin:0 auto 35px;

font-size:20px;

line-height:1.9;

color:#b6c3d5;

}
/* ==========================================================
   FOOTER
========================================================== */

.footer{

background:#050910;

border-top:1px solid rgba(255,255,255,.08);

padding:70px 0 40px;

text-align:center;

}

.footer-logo{

font-size:36px;

font-weight:800;

margin-bottom:18px;

}

.footer-logo span{

color:#00CFFF;

}

.footer p{

color:#9db0c8;

margin-bottom:10px;

}

.footer-links{

display:flex;

justify-content:center;

gap:35px;

margin:35px 0;

flex-wrap:wrap;

}

.footer-links a{

color:#d5dfec;

transition:.30s;

}

.footer-links a:hover{

color:#00CFFF;

}

.footer-copy{

margin-top:25px;

font-size:14px;

color:#7d8ea5;

}

/* ==========================================================
   COLORS
========================================================== */

.green{

color:#00FF99 !important;

}

.warning{

color:#FFC947 !important;

}

.online{

color:#00FF99 !important;

}

.buy{

color:#00CFFF !important;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111f;

}

::-webkit-scrollbar-thumb{

background:#00CFFF;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#00FFA3;

}
/* ==========================================================
   RESPONSIVE TABLET
========================================================== */

@media (max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-left{

text-align:center;

}

.hero p{

margin-left:auto;
margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.dashboard-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

}

.feature-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

}

.roadmap-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

}

.pricing-grid{

grid-template-columns:repeat(2,minmax(0,1fr));

}

}

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

@media (max-width:768px){

.navbar .container{

height:auto;

padding:18px 0;

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding-top:180px;

}

.hero h1{

font-size:46px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

}

.dashboard-grid,
.feature-grid,
.roadmap-grid,
.pricing-grid{

grid-template-columns:1fr;

}

.thinking-panel{

padding:25px;

}

.thinking-line{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.time{

width:auto;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:36px;

}

.section-header h2{

font-size:36px;

}

.price{

font-size:46px;

}

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

.container{

width:94%;

}

.hero h1{

font-size:38px;

}

.logo{

font-size:24px;

}

.btn-primary,
.btn-secondary,
.btn-login{

width:100%;

}

.feature-card,
.dashboard-card,
.roadmap-card,
.price-card{

padding:25px;

}

}
/* ==========================================================
   TSAP UI ANIMATIONS
   STYLE.CSS Alpha 1.0
   PART 8 / 8
========================================================== */

/* Fade In */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/* Floating */

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

/* Glow */

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(0,207,255,0);

}

50%{

box-shadow:0 0 30px rgba(0,207,255,.35);

}

100%{

box-shadow:0 0 0 rgba(0,207,255,0);

}

}

/* Hero */

.hero-left{

animation:fadeUp .9s ease;

}

.hero-right{

animation:fadeUp 1.2s ease;

}

/* Cards */

.dashboard-card,
.feature-card,
.roadmap-card,
.price-card,
.stat{

animation:fadeUp .8s ease;

}

/* Console */

.console{

animation:floating 5s ease-in-out infinite;

}

/* CTA */

.cta-box{

animation:glow 6s infinite;

}

/* Hover */

.dashboard-card:hover,
.feature-card:hover,
.roadmap-card:hover,
.price-card:hover,
.stat:hover{

cursor:pointer;

}

/* Selection */

::selection{

background:#00CFFF;

color:#061018;

}

/* Focus */

button:focus,
a:focus{

outline:none;

}

/* Smooth */

.dashboard-card,
.feature-card,
.roadmap-card,
.price-card,
.btn-primary,
.btn-secondary,
.btn-login{

transition:all .35s ease;

}

/* ==========================================================
   END
========================================================== */