/* ================= GLOBAL ================= */

body{
margin:0;
font-family:'Inter',sans-serif;
color:white;
text-align:center;
overflow-x:hidden;

/* night sky gradient */

background:linear-gradient(
to bottom,
#020617,
#0f172a,
#1e293b
);

}

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

/* sky glow */

body::before{
content:"";
position:fixed;
top:-200px;
left:-200px;

width:600px;
height:600px;

background:radial-gradient(circle,
rgba(59,130,246,0.35),
transparent);

z-index:-3;
}

/* ================= CLOUDS ================= */

.cloud{
position:fixed;

width:220px;
height:70px;

background:white;
border-radius:50px;

opacity:0.8;

z-index:-2;
}

.cloud::before,
.cloud::after{
content:"";
position:absolute;
background:white;
border-radius:50%;
}

.cloud::before{
width:120px;
height:80px;
top:-40px;
left:30px;
}

.cloud::after{
width:100px;
height:60px;
top:-25px;
right:30px;
}

.cloud1{
top:80px;
left:-250px;
animation:cloudMove 60s linear infinite;
}

.cloud2{
top:160px;
left:-300px;
animation:cloudMove 90s linear infinite;
}

.cloud3{
top:40px;
left:-200px;
animation:cloudMove 75s linear infinite;
}

@keyframes cloudMove{
0%{transform:translateX(0)}
100%{transform:translateX(140vw)}
}

/* ================= CITY SKYLINE ================= */

.city{
position:fixed;
bottom:180px;
width:200%;
height:200px;

background:repeating-linear-gradient(
to right,
#111827 0px,
#111827 80px,
#1f2937 80px,
#1f2937 160px
);

opacity:0.8;

animation:cityMove 40s linear infinite;

z-index:-1;
}

@keyframes cityMove{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}

/* ================= ROAD ================= */

.road{
position:fixed;
bottom:0;

width:200%;
height:140px;

background:linear-gradient(
to bottom,
#2c2c2c,
#1f1f1f
);

animation:roadMove 6s linear infinite;

z-index:-1;
}

@keyframes roadMove{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}

/* road lane */

.road::before{
content:"";
position:absolute;

top:70px;

width:100%;
height:6px;

background:repeating-linear-gradient(
to right,
white 0px,
white 60px,
transparent 60px,
transparent 120px
);
}

/* ================= TREES ================= */

.tree{
position:fixed;

bottom:140px;

width:16px;
height:60px;

background:#5b3a1e;

border-radius:3px;

z-index:-1;
}

.tree::before{
content:"";

position:absolute;

bottom:30px;
left:-25px;

width:70px;
height:70px;

background:radial-gradient(circle,#2f9e44,#1b5e20);

border-radius:50%;
}

.tree1{left:5%;}
.tree2{left:20%;}
.tree3{left:40%;}
.tree4{left:65%;}
.tree5{left:85%;}

/* ================= CARS ================= */

.car{
position:fixed;
bottom:70px;
font-size:40px;
z-index:-1;
}

/* car 1 */

.car1{
right:-120px;
animation:carMove1 12s linear infinite;
}

/* car 2 */

.car2{
right:-350px;
animation:carMove2 16s linear infinite;
}

/* car 3 */

.car3{
right:-600px;
animation:carMove3 20s linear infinite;
}

/* animations */

@keyframes carMove1{
0%{
right:-120px;
}
100%{
right:110%;
}
}

@keyframes carMove2{
0%{
right:-350px;
}
100%{
right:110%;
}
}

@keyframes carMove3{
0%{
right:-600px;
}
100%{
right:110%;
}
}

/* ================= CONTAINER ================= */

.container{
padding:30px 15px;
position:relative;
z-index:10;
}

/* ================= HEADINGS ================= */

h1{
font-family:'Space Grotesk',sans-serif;
font-size:38px;
font-weight:700;
letter-spacing:2px;
}

h2,h3{
font-family:'Space Grotesk',sans-serif;
}

/* ================= CARD ================= */

.card{
background:rgba(255,255,255,0.10);
backdrop-filter:blur(14px);
border-radius:16px;
padding:22px;
margin:20px auto;
width:92%;
max-width:420px;
box-shadow:0 12px 30px rgba(0,0,0,0.35);
transition:0.3s ease;
}

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

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

button{
font-family:'Space Grotesk',sans-serif;
padding:14px 22px;
margin:10px;
border-radius:12px;
border:none;
font-size:15px;
cursor:pointer;
color:white;

background:linear-gradient(135deg,#3b82f6,#9333ea);

box-shadow:0 6px 20px rgba(147,51,234,0.5);

transition:all .25s ease;
}

button:hover{
transform:translateY(-3px) scale(1.03);
}

button:active{
transform:scale(0.95);
}

.green{background:linear-gradient(135deg,#16a34a,#4ade80);}
.yellow{background:linear-gradient(135deg,#f59e0b,#fde047);color:#111;}
.red{background:linear-gradient(135deg,#dc2626,#fb7185);}

/* ================= INPUT ================= */

input{
padding:12px;
border-radius:10px;
border:none;
width:80%;
font-size:15px;
outline:none;
}

/* ================= STATUS COLORS ================= */

.status-green{color:#4ade80;font-weight:700;}
.status-yellow{color:#fde047;font-weight:700;}
.status-red{color:#fb7185;font-weight:700;}

/* ================= TRUST SCORE ================= */

.score{
font-size:48px;
font-weight:700;
letter-spacing:2px;
text-shadow:0 0 18px rgba(255,255,255,0.4);
}