!< DOCTYPE html >
< html lang="ar" dir="rtl >"
< head >
< meta charset="UTF-8 >"
< meta name="viewport" content="width=device-width, initial-scale=1.0 >"
< link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;800&di splay=swap" rel="stylesheet >"
< style >
: root {
--primary: #00d4ff ;
--accent: #005f73 ;
--glass: rgba(255, 255, 255, 0.03) ;
--border: rgba(255, 255, 255, 0.1) ;
}

{ * margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans
serif } ;
body { background: #000; color: #fff; overflow-x: hidden; }

# stars-canvas {
position: fixed; top: 0; left: 0; width: 100%; height: 100% ;
z-index: 0; pointer-events: none ;
}

. content-wrapper { position: relative; z-index: 1; }
. container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

nav {
display: flex; justify-content: space-between; align-items: center ;
padding: 25px 0; backdrop-filter: blur(10px) ;
}

. nav-link {
background: linear-gradient(45deg, var(--primary), #0080ff) ;
color: #000; padding: 10px 25px; border-radius: 12px ;
font-weight: 800; text-decoration: none; font-size: 0.9rem ;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3); transition: 0.3s ;
}

. hero { text-align: center; padding: 120px 0 80px; }
. hero h1 {
font-size: clamp(2rem, 8vw, 4rem); font-weight: 800 ;
background: linear-gradient(to bottom, #fff, #888) ;
-webkit-background-clip: text; -webkit-text-fill-color: transparent ;
margin-bottom: 20px ;
}

. steps-container {
display: inline-flex; gap: 15px; background: var(--glass) ;
padding: 10px 30px; border-radius: 50px; border: 1px solid var(--border) ;
margin-bottom: 40px; color: var(--primary); font-weight: 500 ;
}

. main-btn {
display: inline-block; padding: 20px 50px; border-radius: 50px ;
background: #fff; color: #000; font-weight: 800; font-size: 1.3rem ;
text-decoration: none; transition: 0.4s; position: relative ;
overflow: hidden; box-shadow: 0 0 20px rgba(255,255,255,0.2) ;
}

. main-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px var(-
primary); }

. services-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,
1fr)) ;
gap: 25px; padding: 60px 0 ;
}

. card {
background: linear-gradient(145deg, rgba(15,15,15,0.9), rgba(5,5,5,0.9)) ;
border: 1px solid var(--border); padding: 40px 30px; border-radius: 24px ;
text-decoration: none; color: #fff; transition: 0.4s ;
backdrop-filter: blur(5px); display: flex; flex-direction: column ;
}

. card:hover {
border-color: var(--primary); transform: translateY(-10px) ;
box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.1) ;
}

. card h3 { font-size: 1.4rem; color: var(--primary); margin-bottom: 15px; }

*/ مسق تازاجنلإا - مت حلاصإ عيطقت ةملكلا انه /*
. stats-section { padding: 100px 0; text-align: center; }
. stats-section h2 {
margin-bottom: 50px ;
opacity: 0.6 ;
font-weight: 800 ;
font-size: 2.5rem ;
letter-spacing: 0px */ ; مت اهريفصت اهنلأ عطقت يبرعلا /*
}
. stat-grid { display: grid; grid-template-columns: repeat(auto-fit,
minmax(200px, 1fr)); gap: 40px; }
. stat-val { font-size: 3.5rem; font-weight: 800; color: var(--primary); display:
block; }

*/ مسق ضرعم لامعلأا كرحتملا ( Slider /* )
. work-slider-section { padding: 80px 0; background:
rgba(255,255,255,0.01); }
. work-slider-title { text-align: center; margin-bottom: 40px; font-size: 2rem;
color: var(--primary); }
. work-slider { overflow: hidden; white-space: nowrap; position: relative;
padding: 20px 0; }
. work-track { display: flex; gap: 30px; animation: workScroll 40s linear
infinite; width: max-content; }

. work-item {
width: 300px ;
height: 500px ;
border-radius: 20px ;
overflow: hidden ;
border: 1px solid var(--border) ;
flex-shrink: 0 ;
transition: 0.5s ;
}
. work-item img { width: 100%; height: 100%; object-fit: cover; filter:
brightness(0.8); transition: 0.5s; }
. work-item:hover { transform: scale(1.05); border-color: var(--primary); }
. work-item:hover img { filter: brightness(1.1); }

@ keyframes workScroll {
0 { % transform: translateX(0) } ;
100 { % transform: translateX(calc(-330px * 4)) */ } ; لدع مقرلا بسح ددع روصلا
/*
}

footer { background: #050505; padding: 80px 0 40px; border-top: 1px solid
var(--border); }

@ media (max-width: 768px) {
. hero { padding: 80px 20px; }
. main-btn { width: 100%; }
}
/< style >
/< head >
< body >

< canvas id="stars-canvas">

< div class="content-wrapper >"
< div class="container >"
< nav >
< img src="https://fyanbu.sa/wp-content/uploads/2024/05/cropped-fis logo.png" style="height: 50px >";
< div style="display: flex; gap: 15px >";
< a href="https://wa.me/966535165670" class="nav-link >" باستاو /
/< div >
/< nav >

< header class="hero >"
< div class="steps-container >" راكتبلاا ← طيطختلا ← ذيفنتلا /< div >

أدبا كعورشم ينقتلا < br> نلآا /< span>

ةجمرب تاقيبطت لاوجلا /< h3>

ريوطت تاقيبطت
Native و Cross-platform يماظنل iOS و Android.

< a href="#" class="card">

عقاوملا ةينورتكللإا /< h3>

تاصنم ةلماكتم ةعيرسو
ززعت كروضح يمقرلا ديزتو كتاعيبم /<. p> فشتكا ديزملا /<← span>
< a href="#" class="card">

UI/UX ميمصت /< h3>

تاهجاو مدختسم جمدت نيب
لامجلا ةلوهسو مادختسلاا ةحارل كئلامع /<. p> فشتكا ديزملا /<← span>
< a href="https://beencard.com/" class="card" style="background: linear gradient(145deg, #001a20, #000) >";
< h3>Been Card

انعورشم روخفلا : ةصنم تاقاطبلا ةيكذلا ةيوهلاو ةيمقرلا
ةلماكتملا /<. p>
< span style="font-weight: 800 >" ةرايز ةصنملا /<← span >
/
/< div >
/< div >

< section class="stats-section" id="stats >"
< div class="container >"

انتازاجنإ /< h2 >
< div class="stat-grid >"
< div>0

قيبطت /< p>