*{box-sizing:border-box}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:#f4f7fb;
color:#101828
}
.shell{max-width:720px;margin:auto;min-height:100vh}
.hero{
min-height:100vh;
padding:70px 24px;
display:flex;
flex-direction:column;
justify-content:center;
background:linear-gradient(160deg,#075fe4,#06358f);
color:white
}
.brand{font-weight:900;letter-spacing:1.5px;color:#0968ed}
.hero .brand{color:white}
.hero h1{font-size:44px;line-height:1.05;margin:20px 0 12px}
.hero p{font-size:18px}
.actions{display:grid;gap:12px;margin-top:25px}
.primary,.secondary,button{
display:inline-block;
padding:16px 18px;
border-radius:14px;
border:0;
font-size:16px;
font-weight:700;
text-decoration:none;
cursor:pointer
}
.primary,button{background:#0968ed;color:white}
.secondary{background:white;color:#075fe4}
.block{display:block;text-align:center;margin-top:18px}
.card{
background:white;
margin:22px;
padding:24px;
border-radius:22px;
box-shadow:0 10px 40px rgba(0,0,0,.08)
}
label{display:block;font-weight:700;margin:14px 0 7px}
input,select{
width:100%;
padding:15px;
border:1px solid #d6dce6;
border-radius:13px;
font-size:16px;
background:white
}
form button{width:100%;margin-top:20px}
.small{font-size:14px;text-align:center}
.small a{color:inherit}
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:white
}
.topbar form{margin:0}
.textbtn{
background:none;
color:#0968ed;
padding:8px;
width:auto;
margin:0
}
.map{
height:300px;
background:
radial-gradient(circle at 30% 35%,#d9eaff 0 3px,transparent 4px),
linear-gradient(35deg,#edf2f7 25%,transparent 25%) 0 0/50px 50px,
linear-gradient(145deg,#e6edf5 25%,transparent 25%) 0 0/55px 55px,
#f7faff;
position:relative
}
.mapbadge{
position:absolute;
top:20px;
left:20px;
background:white;
padding:9px 12px;
border-radius:20px;
font-weight:800;
box-shadow:0 5px 20px rgba(0,0,0,.1)
}
.floating{margin-top:-45px;position:relative}
.section{padding:10px 22px 30px}
.ride{
background:white;
padding:16px;
border-radius:16px;
margin:12px 0;
box-shadow:0 5px 20px rgba(0,0,0,.05)
}
.ride span{padding:0 8px}
.status{
display:inline-block;
margin-top:9px;
padding:6px 10px;
border-radius:20px;
background:#eaf2ff;
color:#075fe4;
font-weight:800;
text-transform:capitalize
}
.status.big{font-size:18px}
.muted{color:#667085}

.live-map{
  width:100%;
  height:330px;
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  background:#e9eef5;
}

.small-map{
  height:240px;
}

.quote-box{
  margin-top:16px;
  padding:18px;
  border-radius:16px;
  background:#eef5ff;
  border:1px solid #d7e6ff;
}

.quote-price{
  font-size:34px;
  font-weight:900;
  color:#0968ed;
  margin-bottom:4px;
}

.car-marker{
  font-size:32px;
  line-height:42px;
  text-align:center;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.25));
}