:root {
	
	--magenta: #e6007e;
	--soft-pink: #fce4ec;
	--mint: #e0f2f1;
	--gold: #fff8e1;
	--bg-gray: #f8f9fa;
	--dark: #333;
}

* { box-sizing: border-box; }

body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	margin: 0;
	background-color: #fff;
	color: var(--dark);
	overflow-x: hidden;
}

main {
	max-width: 900px;
	margin: 0 auto;
	padding: 1em;
}


p {
	text-align: justify;
    hyphens: auto;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 5%;
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}



nav { display: flex; gap: 20px; }
nav a { text-decoration: none; color: #555; font-weight: 500; font-size: 14px; transition: color 0.2s; }
nav a:hover { color: var(--magenta); }

.app-download {
	background: var(--magenta);
	color: white;
	padding: 10px 22px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	transition: transform 0.2s;
}
.app-download:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(230,0,126,0.3); }

.hero {
	background-color: #ffffff;
	text-align: center;
	padding: 60px 20px 0 20px;
	position: relative;
	overflow: hidden;
	margin-bottom: 50px;
	background-image: url('/images/background/background6.svg'); 
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.hero h1 {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	letter-spacing: -0.5px;
	text-align: center;
	max-width: 900px;  
	margin: 0 auto 20px auto;
}

.hero h1 span {
	display: inline-block;
	white-space: nowrap;  
}


.hero h2 {
	font-size: clamp(16px, 2.5vw, 24px);
	font-weight: 500;
	letter-spacing: -0.5px;
	text-align: center;
	max-width: 900px;  
	margin: 0 auto 50px auto;
	color: var(--magenta);	
	text-shadow: 
        0 1px 2px rgba(0,0,0,0.2), 
        0 0 15px rgba(255,255,255,0.4);
}

.hero h2 span {
	display: inline-block;
	white-space: nowrap;  
}


.hero .stage {
	position: relative;
	padding-left:10px;
	padding-right:10px;
	margin: 0 auto;
	height: 420px;
}

.hero .phone{
	width: 270px; 
	height: 420px;
	background-color: #ffffff;
	border: 14px solid #1a1a1a; 
	border-top-width: 14px; 
	border-bottom: 0px; 
	border-radius: 40px 40px 0 0; 
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 
				inset 0 0 10px rgba(255, 255, 255, 0.1);
	background-image: url('/images/mobile/home1.jpg'); 
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	position: absolute;
	overflow: hidden;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}




@keyframes hover {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-15px); }
}

@keyframes drift {
	0%, 100% { transform: translateX(0) rotate(0deg); }
	50% { transform: translateX(10px) rotate(1deg); }
}

@keyframes move-and-flip {
	0% { transform: translateX(0) scaleX(1); }
	49% { transform: translateX(200px) scaleX(1); }
	50% { transform: translateX(200px) scaleX(-1); }
	100% { transform: translateX(0) scaleX(-1); }
}

@keyframes drive_r {
	0%, 100% { transform: translateX(0) rotate(0deg); }
	50% { transform: translateX(150px) rotate(1deg); }
}

@keyframes drive_l {
	0%, 100% { transform: translateX(-150px) rotate(0deg); }
	50% { transform: translateX(0px) rotate(1deg); }
}






.plant1 { left: 40%; bottom: 0%; width: 130px; animation: drift 2s infinite ease-in-out 0.5s; z-index:80;}	
.plant2 { right: 10%; bottom: 0%; width: 63px; animation: drift 2s infinite ease-in-out 0.5s; z-index:80;}	
.plant3 { right: 10%; bottom: 0%; width: 163px; animation: drift 2s infinite ease-in-out 0.5s; z-index:80;}	
.plant4 { left: 21%; bottom: 30%; width: 55px; animation: drift 2s infinite ease-in-out 0.5s; z-index:50;}	
.plant5 { left: 18%; bottom: 35%; width: 35px; animation: drift 2s infinite ease-in-out 0.5s; z-index:50;}	
.plant6 { right: 25%; bottom: 0%; width: 73px; animation: drift 2s infinite ease-in-out 0.5s; z-index:80;}	
.plant7 { right: 28%; bottom: 37%; width: 35px; animation: drift 2s infinite ease-in-out 0.5s; z-index:50;}	

.mode { position: absolute; transition: filter 0.3s; }
.human:hover { filter: brightness(1.1) drop-shadow(0 5px 15px rgba(230,0,126,0.2)); animation: hover ease-in-out 0.5s;}
.human { cursor: pointer; }






.train1 { left: 5%; top: 25%; width:450px; animation: drive_r 8s infinite ease-in-out; z-index:30;}
.train2 { right: 0%; top: 25%; width: 350px; animation: drive_l 12s infinite ease-in-out; z-index:35;}
.bus1 { left: 30%; top: 35%; width: 200px; animation: move-and-flip 6s infinite ease-in-out;z-index:40; }		
.car2 { right: 22%; bottom: 30%; width: 200px; animation: move-and-flip 4s infinite ease-in-out; z-index:55;}
.car1 { left: 5%; top: 40%; width: 290px; animation: drift 5s infinite ease-in-out 0.5ms; z-index:45;}
.ondemand1 { left: 54%; top: 24%; width: 150px; animation: move-and-flip 4s infinite ease-in-out 0.5s; z-index:45; }		
.escooter1 { right: 35%; bottom: 5%; width: 150px; animation: move-and-flip 4.5s infinite ease-in-out 0.5s; z-index:70;}
.escooter2 { left: 25%; bottom: 15%; width: 120px; animation: move-and-flip 3.5s infinite ease-in-out 0.5s; z-index:60;}		
.bike1 { right: 20%; bottom: 15%; width: 130px; animation: move-and-flip 2.5s infinite ease-in-out 0.5s; z-index:65;}
.bike2 { left: 12%; bottom: 8%; width: 120px; animation: move-and-flip 3.5s infinite ease-in-out 0.5s; z-index:70;}		
.bike3 { left: 35%; bottom: 25%; width: 90px;  animation: move-and-flip 4.5s infinite ease-in-out 0.5s; z-index:55;}
.bike4 { left: 68%; top: 20%; width: 50px; animation: move-and-flip 4.5s infinite ease-in-out 0.5s; z-index:25; }	
.bikebox1 { right: -1%; bottom: 15%; width: 120px; animation: drift 3s infinite ease-in-out 0.5s; z-index:65;}	

.charge1 { left: 0%; bottom: 5%; width: 170px; animation: drift 3s infinite ease-in-out 0.5s; z-index:70;}	
.human1 { left: 53%; bottom: 0%; width: 170px; animation: drift 2.5s infinite ease-in-out 0.5s; z-index:90;}	




@media (max-width: 1920px) {
			
	.train1 { width: 300px; }
	.train2 { width: 250px; }
	.bus1 { width: 170px; }
	.car1 { width: 170px; }
	.car2 { width: 150px; }
	.ondemand1 { width: 120px; }
	.bike1 { width: 100px; }	
	.bike2 { width: 90px; }	
	.bike3 { width: 60px; }	
	.bike4 { width: 35px; }	
	.bikebox { width: 95px; }	
	.escooter1 { width: 120px; }	
	.escooter2 { width: 90px; }
	.charge1 { width: 120px; }
	
	.plant3 { width: 120px; }
	
	
}



@media (max-width: 1200px) {
	 .human1 , .bikebox1, .plant3, .plant1, nav { display: none; }
	 .hero { padding-top: 40px;	}
	
}






@media (max-width: 768px) {
	
	
	
	
	.hero {
		padding-top: 30px;
	}
	
	.hero h2 { margin-bottom: 0px;}
	
	.hero .phone {
		width: 220px; 
		height: 320px; 
		margin: 0 auto;
		border-width: 8px;
	}
	
	.plant2, .plant6 { width: 33px;}
	.charge1 { display: none; }
	.train1 { top: 28%;}
	.train2 { top: 35%; width: 200px;}
	.bus1 { top: 48%; left: 18%; width: 100px;}
	.plant4 { left: 6%; width: 45px;}
	.plant5 { left: 3%;}
	.plant7 { right: 15%;}
	.car1 { display: none; }
	.car2 { width: 120px; }
	.ondemand1 { top: 34%; width: 110px;}
	.bike1 { width: 70px; }
	.bike2 { left: 0%; width: 80px; }
	.bike3 { left: 5%; width: 50px; }
	.bike4 { top: 27%; width: 30px; }
	.escooter1 { bottom: 2%; width: 80px; }
	.escooter2 { left: 21%; width: 60px; }
	
	
}

@media (max-width: 525px) {
	.plant, .bike4 , .train2  { display: none; }
	.train1 { left: -25%;}
	.bus1 {left: -15%;}
	.car2 {left: -20%;}
	.escooter2 {left: 80%;}
	.bike2 {left: -15%;}
	.bike3 {left: -5%;}
}


@media (max-width: 400px) {
	.app-download  { display: none; }
}