*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,sans-serif;
background:#050816;
color:#fff;
overflow-x:hidden;
}
body.rtl{
direction:rtl;
font-family:Cairo,sans-serif;
}
.language-switch{
position:fixed;
top:20px;
right:20px;
z-index:999;
display:flex;
gap:10px;
}
.lang-btn{
padding:12px 18px;
border:none;
border-radius:12px;
background:#1b2545;
color:white;
font-weight:700;
cursor:pointer;
}
.lang-btn.active{
background:#fff;
color:#050816;
}
.hero,.section,.contact{
padding:90px 8%;
}
.hero{
padding-top:120px;
background:
radial-gradient(circle at top right, rgba(70,120,255,.25), transparent 35%),
radial-gradient(circle at bottom left, rgba(0,255,180,.08), transparent 30%),
#050816;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:70px;
}
.logo{
font-size:24px;
font-weight:800;
}
.nav-links{
display:flex;
gap:30px;
}
.nav-links a{
text-decoration:none;
color:#dce5ff;
}
.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:60px;
align-items:center;
}
.badge{
display:inline-block;
padding:12px 18px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
margin-bottom:25px;
color:#8ea6ff;
}
h1{
font-size:82px;
line-height:1;
margin-bottom:28px;
}
p,.desc{
font-size:18px;
line-height:1.9;
color:#b6c1de;
}
.hero p{
margin-bottom:30px;
}
.hero-tags,.tags,.timeline,.tools{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:30px;
}
.hero-tags span,.tags div,.timeline div,.tools div{
padding:14px 20px;
background:#0d1224;
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
}
.buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin:35px 0;
}
.center{
justify-content:center;
}
.primary-btn,.secondary-btn,.third-btn{
padding:18px 28px;
border-radius:16px;
text-decoration:none;
font-weight:700;
}
.primary-btn{
background:#fff;
color:#050816;
}
.secondary-btn{
background:#1b2545;
color:white;
}
.third-btn{
background:#2e3f7d;
color:white;
}
.stats{
display:flex;
gap:40px;
flex-wrap:wrap;
}
.stats h2{
font-size:34px;
margin-bottom:6px;
}
.stats span{
color:#8a97b8;
}
.hero-image img{
width:100%;
border-radius:32px;
box-shadow:0 0 120px rgba(70,120,255,.25);
}
.section-title span{
color:#8ea6ff;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
}
.section-title h2{
font-size:56px;
margin:16px 0 35px;
}
.marquee{
overflow:hidden;
padding:10px 0;
}
.track{
display:flex;
gap:24px;
width:max-content;
}
.fast .track{
animation:marquee-fast 20s linear infinite;
}
.slow .track{
animation:marquee-slow 28s linear infinite;
}
@keyframes marquee-fast{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
@keyframes marquee-slow{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.brand{
min-width:300px;
height:110px;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:24px;
font-size:22px;
font-weight:700;
}
.glow{
box-shadow:0 0 40px rgba(70,120,255,.12);
}
.usa{
border:1px solid rgba(70,120,255,.45);
box-shadow:0 0 60px rgba(70,120,255,.25);
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}
.card{
background:rgba(255,255,255,.03);
padding:34px;
border-radius:24px;
border:1px solid rgba(255,255,255,.06);
}
.card h3{
font-size:26px;
margin-bottom:18px;
}
.card p{
color:#b7c1df;
line-height:1.8;
}
.showcase{
width:100%;
margin-top:35px;
border-radius:28px;
border:1px solid rgba(255,255,255,.08);
}
.contact{
text-align:center;
}
.contact h2{
font-size:58px;
margin-bottom:24px;
}
.contact p{
max-width:700px;
margin:0 auto;
}
footer{
padding:30px;
text-align:center;
border-top:1px solid rgba(255,255,255,.06);
color:#8a96b5;
}
@media(max-width:950px){
.hero-grid{
grid-template-columns:1fr;
}
h1{
font-size:56px;
}
.nav-links{
display:none;
}
.section-title h2,.contact h2{
font-size:40px;
}
.brand{
min-width:220px;
height:90px;
font-size:18px;
}
}