*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#f4f8ff;
color:#0b1b3a;
overflow-x:hidden;
}


header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 6%;
background:rgba(255,255,255,.75);
backdrop-filter:blur(20px);
position:sticky;
top:0;
z-index:10;
}


.logo .brand{
font-size:32px;
font-weight:900;
letter-spacing:3px;
color:#0758d5;
}


.logo span{
display:block;
font-size:10px;
letter-spacing:3px;
color:#64748b;
}



nav{
display:flex;
align-items:center;
gap:22px;
}


nav a{
text-decoration:none;
color:#233858;
font-size:14px;
}


button{
border:0;
cursor:pointer;
padding:12px 26px;
border-radius:14px;
font-weight:bold;
}


nav button,
.primary{
background:#0758d5;
color:white;
}




.hero{
min-height:650px;
display:flex;
align-items:center;
justify-content:space-between;
padding:50px 6%;
gap:40px;
overflow:hidden;
}



.hero-content{
max-width:560px;
}



.badge{
display:inline-block;
padding:8px 18px;
background:#e7f0ff;
color:#0758d5;
border-radius:30px;
font-size:12px;
font-weight:bold;
}



h1{
font-size:62px;
line-height:1.05;
margin:25px 0;
}



.hero p{
font-size:20px;
line-height:1.6;
color:#64748b;
}



.buttons{
display:flex;
gap:15px;
margin-top:30px;
}



.secondary{
background:white;
border:1px solid #bdd0ef;
color:#0758d5;
}



.trust-box{
display:flex;
gap:12px;
margin-top:35px;
}


.trust-box div{
background:white;
padding:15px;
border-radius:18px;
font-size:14px;
box-shadow:0 15px 40px rgba(0,60,140,.08);
}
.phoenix-3d-panel{

perspective:1000px;

}



.panel-glass{

width:360px;

padding:22px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.85),
rgba(220,235,255,.5)
);


backdrop-filter:blur(25px);


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


box-shadow:

0 35px 90px rgba(0,70,180,.22);



transform:

rotateY(-10deg)

rotateX(5deg);


transition:.5s;

}



.panel-glass:hover{

transform:

rotateY(0)

rotateX(0)

translateY(-10px);

}




.panel-header{

display:flex;

justify-content:space-between;

font-size:14px;

font-weight:900;

}



.online{

color:#16a34a;

}



.market{

display:flex;

justify-content:space-between;

margin-top:25px;

font-size:20px;

font-weight:bold;

}



.price{

color:#0758d5;

}




.chart-area{

height:130px;

margin-top:22px;

border-radius:22px;

background:

linear-gradient(
135deg,
#031d4d,
#0785ff
);


padding:20px;

color:white;

}



.chart-line{

font-size:32px;

color:#9dd8ff;

}



.profit{

font-size:28px;

font-weight:900;

margin-top:15px;

}




.dashboard-grid{

display:grid;

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

gap:10px;

margin-top:20px;

}



.dashboard-grid div{

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

padding:14px 10px;

border-radius:16px;

text-align:center;

}

.dashboard-grid span{

display:block;

font-size:12px;

font-weight:600;

color:#64748b;

margin-bottom:6px;

}


.dashboard-grid b{

display:block;

font-size:18px;

font-weight:800;

color:#06142d;

letter-spacing:.2px;

line-height:1.2;

}





.features,
.product,
.pricing,
.support{

padding:80px 6%;

}




.section-title{

text-align:center;

max-width:700px;

margin:auto;

}



.section-title span{

color:#0758d5;

font-weight:bold;

letter-spacing:3px;

}



.section-title h2{

font-size:40px;

}



.cards,
.contact-box{

display:flex;

justify-content:center;

gap:25px;

margin-top:45px;

}



.card,
.product-box{

background:white;

padding:30px;

border-radius:25px;

width:300px;


box-shadow:

0 20px 50px rgba(0,50,120,.1);

}
.product-box{

width:100%;

background:

linear-gradient(
135deg,
#05255f,
#0758d5
);

color:white;

}



.feature-list div{

margin:14px 0;

font-size:17px;

}



.premium{

transform:translateY(-12px);

border:2px solid #0758d5;

}




.card button{

background:#0758d5;

color:white;

}




.language-section{

text-align:center;

padding:40px;

}



.language-section button{

background:white;

border:1px solid #bdd0ef;

color:#0758d5;

margin:8px;

}




footer{

background:#06142d;

color:white;

text-align:center;

padding:50px;

}



.footer-logo{

font-size:42px;

font-weight:900;

letter-spacing:5px;

}





@media(max-width:1000px){


header,
.hero{

flex-direction:column;

}



nav{

display:none;

}



.hero{

text-align:center;

}



.buttons{

justify-content:center;

}



.trust-box{

justify-content:center;

}



.panel-glass{

width:350px;

}



.cards,
.contact-box{

flex-direction:column;

align-items:center;

}



}



@media(max-width:600px){


h1{

font-size:45px;

}



.hero p{

font-size:17px;

}



.panel-glass{

width:320px;

}



.dashboard-grid{

grid-template-columns:1fr;

}



}
.panel-header{
align-items:center;
}

.online{
background:#dcfce7;
padding:6px 12px;
border-radius:20px;
font-size:12px;
}

.market{
background:rgba(255,255,255,.5);
padding:12px;
border-radius:15px;
}

.chart-area{
position:relative;
overflow:hidden;
}

.chart-area:after{
content:"";
position:absolute;
right:-50px;
top:-50px;
width:140px;
height:140px;
background:rgba(255,255,255,.15);
border-radius:50%;
}

.dashboard-grid div{
transition:.3s;
}

.dashboard-grid div:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,80,200,.15);
}

.dashboard-grid div{

-webkit-font-smoothing:antialiased;

}
.hero-content h1{
font-weight:900;
letter-spacing:-1.5px;
}


.hero-content h1::first-line{
color:#06142d;
}


.hero-content p{
max-width:520px;
}


.primary{
box-shadow:0 15px 35px rgba(7,88,213,.35);
transition:.3s;
}


.primary:hover{
transform:translateY(-4px);
box-shadow:0 25px 45px rgba(7,88,213,.45);
}


.secondary{
transition:.3s;
}


.secondary:hover{
background:#eaf2ff;
transform:translateY(-4px);
}


.trust-box div{

min-width:120px;

transition:.3s;

}


.trust-box div:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(0,70,160,.15);

}


.trust-box b{

font-size:18px;

color:#0758d5;

}

.features{
background:linear-gradient(
180deg,
#f4f8ff 0%,
#ffffff 100%
);

border-top:1px solid rgba(7,88,213,.08);

}



.features .card{

transition:.35s;

border:1px solid rgba(7,88,213,.06);

}



.features .card:hover{

transform:translateY(-10px);

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

}



.features .card h3{

color:#06142d;

font-size:22px;

}



.features .card p{

color:#64748b;

line-height:1.6;

}



.section-title h2{

font-weight:900;

letter-spacing:-.5px;

}

header{

border-bottom:1px solid rgba(7,88,213,.08);

}


.logo .brand{

background:linear-gradient(
90deg,
#0758d5,
#00a8ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.logo span{

font-weight:600;

}



nav a{

position:relative;

transition:.3s;

}



nav a:hover{

color:#0758d5;

}



nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#0758d5;

transition:.3s;

}



nav a:hover::after{

width:100%;

}



nav button{

box-shadow:

0 12px 30px rgba(7,88,213,.3);

transition:.3s;

}



nav button:hover{

transform:translateY(-3px);

box-shadow:

0 20px 40px rgba(7,88,213,.4);

}
.pricing{

background:linear-gradient(
180deg,
#ffffff,
#f4f8ff
);

}



.pricing .card{

position:relative;

overflow:hidden;

transition:.35s;

border:1px solid rgba(7,88,213,.08);

}



.pricing .card:hover{

transform:translateY(-10px);

box-shadow:

0 35px 80px rgba(0,70,160,.18);

}



.pricing .card h3{

font-size:24px;

color:#06142d;

}



.pricing .card h2{

font-size:42px;

color:#0758d5;

margin:20px 0;

}



.pricing .card p{

color:#64748b;

}



.pricing .card button{

margin-top:20px;

width:100%;

box-shadow:

0 12px 30px rgba(7,88,213,.25);

}



.pricing .premium{

background:

linear-gradient(
145deg,
#ffffff,
#eaf3ff
);

border:2px solid #0758d5;

}



.pricing .premium::before{

content:"POPULAR";

position:absolute;

top:15px;

right:-35px;

background:#0758d5;

color:white;

padding:6px 45px;

font-size:11px;

transform:rotate(45deg);

}
.support{

background:linear-gradient(
180deg,
#f4f8ff,
#ffffff
);

}



.support .card{

background:

rgba(255,255,255,.85);

backdrop-filter:blur(15px);

border:1px solid rgba(7,88,213,.08);

transition:.35s;

}



.support .card:hover{

transform:translateY(-8px);

box-shadow:

0 30px 70px rgba(0,70,160,.15);

}



.support .card h3{

color:#06142d;

font-size:22px;

}



.support .card p{

color:#64748b;

line-height:1.6;

}




footer{

position:relative;

overflow:hidden;

}



footer::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(0,120,255,.15);

border-radius:50%;

top:-120px;

left:50%;

transform:translateX(-50%);

filter:blur(40px);

}



.footer-logo{

position:relative;

font-size:48px;

background:linear-gradient(
90deg,
#ffffff,
#7fc8ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



footer p{

color:#cbd5e1;

}

html{
scroll-behavior:smooth;
}


section{
scroll-margin-top:80px;
}



h2,
h3{

letter-spacing:-.3px;

}



p{

margin-top:10px;

}



.card{

min-height:220px;

}



.product-box{

box-shadow:

0 35px 80px rgba(0,50,150,.25);

}



.hero,
.features,
.product,
.pricing,
.support{

overflow:hidden;

}




@media(max-width:1000px){

.hero{

gap:60px;

}



.hero-content{

max-width:100%;

}



.panel-glass{

transform:none;

}



.panel-glass:hover{

transform:translateY(-8px);

}

}



@media(max-width:600px){

header{

padding:18px 5%;

}



.logo .brand{

font-size:26px;

}



h1{

font-size:42px;

}



.cards .card,
.contact-box .card{

width:100%;

}



.trust-box{

flex-direction:column;

}



}