*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#050b18;
color:white;
overflow-x:hidden;
min-height:50vh;
position:relative;
}

/* Background Glow */

.bg-left{
position:fixed;
left:-300px;
top:-150px;
width:700px;
height:700px;
background:#0A3D91;
filter:blur(220px);
opacity:.45;
z-index:-2;
}

.bg-right{
position:fixed;
right:-300px;
top:-150px;
width:700px;
height:700px;
background:#FF6B00;
filter:blur(220px);
opacity:.25;
z-index:-2;
}

/* Header */

header{
position:absolute;
top:0;
left:0;
width:100%;
padding:25px 80px;

display:flex;
justify-content:space-between;
align-items:center;
z-index:100;
}

.logo{
font-size:32px;
font-weight:800;
letter-spacing:4px;
font-style:italic;
}

nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
opacity:.8;
transition:.3s;
}

nav a:hover{
opacity:1;
color:#FF6B00;
}

.early-btn{
padding:12px 28px;
border:none;
border-radius:40px;
background:#FF6B00;
color:white;
font-weight:600;
cursor:pointer;

box-shadow:
0 0 15px #FF6B00;
}

/* Hero */

.hero{
position:relative;
min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

padding-top:100px;
overflow:hidden;
}

/* Content */

.content{
max-width:750px;
text-align:center;
z-index:20;
}

.content h1{
font-size:5rem;
font-style:italic;
font-weight:800;
letter-spacing:6px;

text-shadow:
0 0 20px rgba(255,255,255,.3);
}

.tagline{
margin-top:20px;
font-size:1rem;
letter-spacing:5px;
color:#ddd;
}

.content h2{
margin-top:40px;
font-size:4rem;
line-height:1.1;
font-weight:700;
}

.desc{
margin-top:25px;
font-size:1.1rem;
color:#c6d4ff;
line-height:1.8;
}

.content h3{
margin-top:30px;
font-size:1.8rem;
color:#FF6B00;
letter-spacing:4px;
}

/* Buttons */

.buttons{
margin-top:35px;
margin-bottom:20px;

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
bottom:80px;
}

.notify{
padding:18px 45px;
text-decoration:none;
border-radius:50px;
font-weight:700;
color:white;
bottom:60px;

background:
linear-gradient(
45deg,
#ff6b00,
#ff9d40
);

box-shadow:
0 0 20px #FF6B00,
0 0 60px rgba(255,107,0,.4);

transition:.3s;
}

.notify:hover{
transform:translateY(-5px);
}

.contact{
padding:18px 45px;
text-decoration:none;
border-radius:50px;
font-weight:700;
color:white;

border:2px solid #3FA9F5;

box-shadow:
0 0 20px rgba(63,169,245,.5);

transition:.3s;
}

.contact:hover{
background:rgba(63,169,245,.15);
transform:translateY(-5px);
}

/* Scooter */

.scooter{
position:absolute;
left:140px;
bottom:40px;
width:320px;
z-index:70;


filter:
drop-shadow(0 0 25px #3FA9F5)
drop-shadow(0 0 80px #3FA9F5);
}

/* Bike */

.bike{
position:absolute;
right:120px;
bottom:50px;
width:340px;
z-index:30;


filter:
drop-shadow(0 0 25px #FF6B00)
drop-shadow(0 0 80px #FF6B00);
}
@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

}

/* Neon Ring */

.platform-blue{
position:absolute;
left:120px;
bottom:30px;

width:380px;
height:110px;

border-radius:50%;

border:8px solid #3FA9F5;

box-shadow:
0 0 20px #3FA9F5,
0 0 50px #3FA9F5,
0 0 100px #3FA9F5;

z-index:1;
}

.platform-orange{
position:absolute;
right:120px;
bottom:30px;

width:380px;
height:110px;

border-radius:50%;

border:8px solid #FF6B00;

box-shadow:
0 0 20px #FF6B00,
0 0 50px #FF6B00,
0 0 100px #FF6B00;

z-index:1;
}

/* Features */

.features{
max-width:1300px;
margin:auto;
position:relative;
top:20px;

padding:50px 30px;

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

gap:25px;
}

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

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

border-radius:20px;

padding:30px;

text-align:center;

backdrop-filter:blur(10px);

transition:.4s;
}

.feature:hover{
transform:translateY(-8px);
border-color:#FF6B00;
}

.icon{
font-size:40px;
margin-bottom:15px;
}

.feature h4{
margin-bottom:10px;
}

.feature p{
color:#d1d7e6;
line-height:1.6;
}

/* Footer */

footer{
padding:70px 20px;
text-align:center;
}

footer h2{
font-size:2rem;
color:#FF6B00;
margin-bottom:20px;
}


.socials{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
margin-top:20px;
}

.socials a{
width:55px;
height:55px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

border-radius:50%;

transition:.3s;
}

.socials a:hover{
transform:translateY(-5px);
border-color:#FF6B00;

box-shadow:
0 0 20px rgba(255,107,0,.5);
}

.socials img{
width:60px;
height:60px;
object-fit:contain;
}

/* ===== PREMIUM LIGHT BEAMS ===== */

.beam-left{
position:absolute;
left:-100px;
top:0;
width:400px;
height:100%;

background:
linear-gradient(
90deg,
rgba(63,169,245,.4),
transparent
);

filter:blur(90px);

animation:beamBlue 5s infinite;
}

.beam-right{
position:absolute;
right:-100px;
top:0;
width:400px;
height:100%;

background:
linear-gradient(
-90deg,
rgba(255,107,0,.4),
transparent
);

filter:blur(90px);

animation:beamOrange 5s infinite;
}

@keyframes beamBlue{
50%{
opacity:.5;
}
}

@keyframes beamOrange{
50%{
opacity:.5;
}
}




@keyframes ringBlue{
50%{
transform:scale(1.03);
}
}

@keyframes ringOrange{
50%{
transform:scale(1.03);
}
}

/* ===== PREMIUM LOGO ===== */

.logo span{
color:#FF6B00;
}
.content h1 span{
color:#FF6B00;
}
/* ===== SOCIAL ICONS ===== */

.socials a{
width:55px;
height:55px;

display:flex;
justify-content:center;
align-items:center;

border-radius:50%;

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

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

transition:.3s;
}

.socials a:hover{
transform:
translateY(-5px);

box-shadow:
0 0 20px rgba(255,107,0,.5);
}

.socials img{
width:26px;
height:26px;
object-fit:contain;
}

/* ===== FEATURE CARDS ===== */

.feature{
background:
rgba(255,255,255,.03);

backdrop-filter:
blur(12px);

transition:.4s;
}

.feature:hover{
transform:
translateY(-10px);

box-shadow:
0 0 30px rgba(255,107,0,.25);
}

/* ===== BUTTON ANIMATION ===== */

.notify,
.contact{
transition:.3s;
}

.notify:hover,
.contact:hover{
transform:
translateY(-4px)
scale(1.03);
}

.particle{
position:fixed;

width:4px;
height:4px;

background:white;

border-radius:50%;

opacity:.2;

pointer-events:none;

animation:particleFloat linear infinite;
}

@keyframes particleFloat{

0%{
transform:translateY(0);
opacity:0;
}

20%{
opacity:.3;
}

100%{
transform:translateY(-250px);
opacity:0;
}

}
/* LEFT BLUE GLOW */

.beam-left{
position:absolute;
left:0;
top:0;
width:400px;
height:100%;

background:
linear-gradient(
90deg,
rgba(63,169,245,.35),
transparent
);

filter:blur(80px);
z-index:0;
}

/* RIGHT ORANGE GLOW */

.beam-right{
position:absolute;
right:0;
top:0;
width:400px;
height:100%;

background:
linear-gradient(
-90deg,
rgba(255,107,0,.35),
transparent
);

filter:blur(80px);
z-index:0;
}

/* BLUE LIGHT BARS */

.line-blue{
position:absolute;

left:70px;
top:100px;

width:5px;
height:450px;

background:#3FA9F5;

box-shadow:
0 0 15px #3FA9F5,
0 0 40px #3FA9F5,
0 0 80px #3FA9F5;

transform:skew(-15deg);

z-index:1;
}

.line-blue.second{
left:140px;
height:380px;
opacity:.7;
}

/* ORANGE LIGHT BARS */

.line-orange{
position:absolute;

right:70px;
top:100px;

width:5px;
height:450px;

background:#FF6B00;

box-shadow:
0 0 15px #FF6B00,
0 0 40px #FF6B00,
0 0 80px #FF6B00;

transform:skew(15deg);

z-index:1;
}

.line-orange.second{
right:140px;
height:380px;
opacity:.7;
}

/* ANIMATION */

.line-blue,
.line-orange{
animation:pulseLight 3s ease-in-out infinite;
}

@keyframes pulseLight{

0%,100%{
opacity:.5;
}

50%{
opacity:1;
}

}.particle{
position:fixed;
width:3px;
height:3px;
background:white;
border-radius:50%;
opacity:.25;
pointer-events:none;
animation:particleMove linear infinite;
z-index:0;
}

@keyframes particleMove{

0%{
transform:translateY(0);
opacity:0;
}

20%{
opacity:.3;
}

100%{
transform:translateY(-250px);
opacity:0;
}

}

.pulse{
animation:ringPulse 1s ease;
}

@keyframes ringPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

@media (max-width:768px){

header{
    padding:15px 20px;
}

nav{
    display:none;
}

.logo{
    font-size:24px;
}

.early-btn{
    padding:10px 18px;
    font-size:12px;
}

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:auto;
    padding:120px 20px 50px;
}

.content h1{
    font-size:3rem;
}

.content h2{
    font-size:2.2rem;
}

.desc{
    font-size:15px;
    line-height:1.7;
}

.buttons{
    margin-top:30px;
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

/* VEHICLE SECTION */

.scooter,
.bike{
    position:relative;
    width:180px;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:40px;
}

.platform-blue,
.platform-orange{
    position:relative;
    width:220px;
    height:70px;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:-40px;
}

/* scooter + ring */
.scooter{
    order:1;
    z-index:5;
}

.platform-blue{
    order:2;
    margin-bottom:30px;
}

/* bike + ring */
.bike{
    order:3;
    z-index:5;
}

.platform-orange{
    order:4;
}

.features{
    grid-template-columns:1fr;
}

}