/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===========================
RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Poppins,sans-serif;

    background:#050816;

    color:#fff;

    overflow-x:hidden;

}

/* ===========================
BACKGROUND
=========================== */

.background{

    position:fixed;

    inset:0;

    z-index:-10;

    overflow:hidden;

}

.background-image{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.28);

    transform:scale(1.1);

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(to bottom,

    rgba(0,0,0,.15),

    rgba(5,8,22,.85));

}

/* ===========================
GLOW
=========================== */

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.45;

}

.glow1{

    width:450px;

    height:450px;

    background:#3b82f6;

    left:-100px;

    top:-120px;

}

.glow2{

    width:450px;

    height:450px;

    background:#9333ea;

    right:-120px;

    bottom:-100px;

}

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

header{

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    position:fixed;

    top:0;

    left:0;

    z-index:100;

    backdrop-filter:blur(18px);

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

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

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:26px;

    font-weight:800;

    color:#00d4ff;

    font-family:Orbitron,sans-serif;

}

.logo i{

    font-size:30px;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    text-decoration:none;

    color:white;

    font-size:16px;

    transition:.35s;

    position:relative;

}

nav a:hover{

    color:#00d4ff;

}

nav a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    left:0;

    bottom:-6px;

    background:#00d4ff;

    transition:.4s;

}

nav a:hover::after{

    width:100%;

}

.login{

    text-decoration:none;

    color:white;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    padding:12px 30px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.login:hover{

    transform:translateY(-4px);

    box-shadow:0 0 35px #3b82f6;

}

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

.hero{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:130px 8%;

}

.left{

    width:55%;

}

.top-title{

    color:#00d4ff;

    letter-spacing:5px;

    font-size:14px;

    text-transform:uppercase;

}

.left h1{

    font-size:78px;

    line-height:90px;

    margin:20px 0;

    font-family:Orbitron,sans-serif;

}

.left p{

    color:#bcbcbc;

    font-size:18px;

    max-width:600px;

    line-height:34px;

}

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

.buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.play{

    text-decoration:none;

    color:white;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    padding:18px 42px;

    border-radius:60px;

    font-weight:bold;

    transition:.35s;

}

.play:hover{

    transform:translateY(-5px);

    box-shadow:0 0 35px #2563eb;

}

.learn{

    text-decoration:none;

    color:white;

    border:2px solid rgba(255,255,255,.2);

    padding:18px 42px;

    border-radius:60px;

    transition:.35s;

}

.learn:hover{

    background:white;

    color:#000;

}

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

.stats{

    display:flex;

    gap:70px;

    margin-top:70px;

}

.stats h2{

    font-size:42px;

    color:#00d4ff;

}

.stats p{

    color:#aaa;

    margin-top:8px;

}

/* ===========================
RIGHT IMAGE
=========================== */

.right{

    width:40%;

    display:flex;

    justify-content:center;

    position:relative;

}

.right img{

    width:460px;

    border-radius:25px;

    position:relative;

    z-index:2;

    filter:drop-shadow(0 0 60px rgba(0,212,255,.35));

}

.circle{

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(circle,#2563eb55,transparent 70%);

    filter:blur(30px);

}

/* ===========================
LOADER
=========================== */

#loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

#loader h1{

    font-size:48px;

    color:#00d4ff;

    font-family:Orbitron,sans-serif;

}

.loading-bar{

    width:320px;

    height:8px;

    background:#111;

    border-radius:50px;

    margin-top:30px;

    overflow:hidden;

}

.loading-bar span{

    display:block;

    width:40%;

    height:100%;

    background:linear-gradient(90deg,#2563eb,#00d4ff);

    border-radius:50px;

}

/*==================================
STARS
==================================*/

.stars,
.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.stars::before{
    content:"";
    position:absolute;
    width:3px;
    height:3px;
    background:white;

    box-shadow:

50px 100px white,
120px 300px white,
220px 180px white,
300px 500px white,
450px 250px white,
600px 120px white,
750px 350px white,
900px 160px white,
1050px 420px white,
1200px 240px white,
1350px 500px white,
1500px 180px white,
1650px 320px white,
1800px 100px white,
1900px 420px white,
250px 650px white,
500px 700px white,
800px 850px white,
1100px 750px white,
1500px 900px white,
1700px 650px white,
1850px 850px white;

animation:twinkle 5s infinite linear;

}

/*==================================
PARTICLES
==================================*/

.particles::before{

content:"";

position:absolute;

width:100%;
height:100%;

background-image:
radial-gradient(#00d4ff 1px,transparent 1px);

background-size:60px 60px;

opacity:.15;

animation:moveParticles 20s linear infinite;

}

/*==================================
CURSOR GLOW
==================================*/

.cursor-glow{

position:fixed;

width:220px;
height:220px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(0,212,255,.25),
transparent 70%);

transform:translate(-50%,-50%);

filter:blur(40px);

z-index:999;

}

/*==================================
FLOATING ICONS
==================================*/

.floating-icons{

position:fixed;

inset:0;

pointer-events:none;

z-index:2;

}

.floating-icons i{

position:absolute;

font-size:32px;

opacity:.15;

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

}

.floating-icons i:nth-child(1){

left:8%;
top:30%;

animation-delay:0s;

}

.floating-icons i:nth-child(2){

right:10%;
top:20%;

animation-delay:1s;

}

.floating-icons i:nth-child(3){

left:15%;
bottom:15%;

animation-delay:2s;

}

.floating-icons i:nth-child(4){

right:18%;
bottom:22%;

animation-delay:3s;

}

.floating-icons i:nth-child(5){

left:50%;
top:10%;

animation-delay:4s;

}

/*==================================
RIGHT IMAGE
==================================*/

.right img{

animation:heroFloat 6s ease-in-out infinite;

transition:.5s;

}

.right img:hover{

transform:scale(1.05);

}

/*==================================
BUTTON EFFECT
==================================*/

.play{

position:relative;

overflow:hidden;

}

.play::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

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

transform:skewX(-25deg);

transition:.7s;

}

.play:hover::before{

left:120%;

}

/*==================================
LOGIN BUTTON
==================================*/

.login{

overflow:hidden;

position:relative;

}

.login::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.6s;

}

.login:hover::before{

left:100%;

}

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

.left h1{

background:linear-gradient(
90deg,
#ffffff,
#00d4ff,
#7c3aed,
#ffffff
);

background-size:400%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientText 8s linear infinite;

}

/*==================================
ANIMATIONS
==================================*/

@keyframes twinkle{

0%{

opacity:.4;

}

50%{

opacity:1;

}

100%{

opacity:.4;

}

}

@keyframes moveParticles{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-60px);

}

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

@keyframes gradientText{

0%{

background-position:0%;

}

100%{

background-position:400%;

}

}

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

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

}

.left{

width:100%;

}

.right{

width:100%;

margin-top:60px;

}

.left h1{

font-size:55px;

line-height:70px;

}

.stats{

justify-content:center;

}

nav{

display:none;

}

}

@media(max-width:700px){

.left h1{

font-size:40px;

line-height:50px;

}

.right img{

width:320px;

}

header{

padding:0 20px;

}

.logo{

font-size:20px;

}

.login{

padding:10px 20px;

}

.buttons{

flex-direction:column;

align-items:center;

}

.stats{

flex-direction:column;

gap:25px;

}

}

/*=============================
METEOR
=============================*/

.meteor{

position:fixed;

width:180px;

height:3px;

background:linear-gradient(90deg,#fff,#00d4ff,transparent);

transform:rotate(-25deg);

animation:meteor 2.5s linear forwards;

z-index:5;

}

@keyframes meteor{

0%{

transform:translateX(0) translateY(0) rotate(-25deg);

opacity:1;

}

100%{

transform:translateX(-2200px) translateY(600px) rotate(-25deg);

opacity:0;

}

}

/*=============================
RIPPLE
=============================*/

.play{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

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

transform:translate(-50%,-50%);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;

height:0;

opacity:1;

}

100%{

width:500px;

height:500px;

opacity:0;

}

}

canvas{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-5;

pointer-events:none;

}

/* يخلي كل العناصر تحسب الحجم صح */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* يخلي الصفحة تاخد عرض الشاشة */
body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

/* الصور متكبرش عن حجمها */
img {
    max-width: 100%;
    height: auto;
}

/* الحاوية الرئيسية */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {

    .container {
        width: 95%;
    }

    h1 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
    }

    .menu {
        flex-direction: column;
    }

    .card {
        width: 100%;
    }
}


/* للموبايلات الصغيرة */
@media (max-width: 480px) {

    h1 {
        font-size: 22px;
    }

    button {
        width: 100%;
    }
}