/* ambu.bd — clean, modern, animated 3D mobile-app UI. Font: Noto Serif Bengali. */
*{box-sizing:border-box} :root{--red:#e11d2e;--red2:#ff3b4e;--teal:#0e9f8a;--ink:#14202b;--mut:#5b6b7a;--bg:#f4f7fb;--card:#fff;--pink:#e2136e;--orange:#f6921e}
html,body{margin:0;padding:0}
body{font-family:"Noto Serif Bengali","Hind Siliguri",serif;background:radial-gradient(900px 500px at 20% -10%,#ffe3e6,transparent),radial-gradient(800px 500px at 90% 10%,#d8fff6,transparent),var(--bg);color:var(--ink);min-height:100vh;display:flex;justify-content:center}
.bg-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-orbs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 9s ease-in-out infinite}
.bg-orbs i:nth-child(1){width:320px;height:320px;background:#ffb3ba;left:-80px;top:-60px}
.bg-orbs i:nth-child(2){width:280px;height:280px;background:#9ef0dd;right:-60px;top:35%}
.bg-orbs i:nth-child(3){width:240px;height:240px;background:#ffe08a;left:35%;bottom:-80px;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-24px) scale(1.05)}}

/* Phone shell — full screen on mobile, phone frame on desktop */
.phone{position:relative;z-index:1;width:100%;max-width:430px;min-height:100vh;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(20,32,43,.18);padding:16px 18px 28px;overflow:hidden}
@media(min-width:500px){.phone{margin:22px auto;border-radius:38px;border:10px solid #14202b;min-height:calc(100vh - 44px);box-shadow:0 30px 80px rgba(20,32,43,.25),inset 0 0 0 2px #ffffff55}}
.topbar{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center}.brand .logo{font-size:32px;filter:drop-shadow(0 6px 10px #e11d2e55);animation:sirenGlow 1.6s infinite}
.brand b{font-size:22px;letter-spacing:-.3px}.brand small{display:block;color:var(--mut);font-size:12px}
.live{font-size:12px;font-weight:700;background:#e6fff8;color:#067a68;border:1px solid #b9f0e2;padding:6px 10px;border-radius:999px}
.pulse-dot{display:inline-block;width:8px;height:8px;background:#0e9f8a;border-radius:50%;margin-right:5px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2;transform:scale(.7)}}@keyframes sirenGlow{0%,100%{filter:drop-shadow(0 0 0 #e11d2e00)}50%{filter:drop-shadow(0 0 14px #e11d2e99)}}

.stepper{display:flex;gap:6px;margin:16px 2px 6px}.stepper span{flex:1;height:6px;border-radius:99px;background:#e2e8f0;transition:.4s}.stepper span.on{background:linear-gradient(90deg,var(--red),var(--red2));box-shadow:0 2px 8px #e11d2e55}
.screen{display:none;animation:rise .45s ease}.screen.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
h1{font-size:32px;line-height:1.25;margin:14px 0 8px}h1 span{color:var(--red)}
h2{font-size:13px;color:var(--red);letter-spacing:.5px;margin:18px 0 2px}h3{font-size:25px;line-height:1.3;margin:0 0 8px}
.sub{color:var(--mut);line-height:1.75;font-size:15px;margin:0 0 16px}.sub.small{font-size:13px}.sub a{color:var(--red);font-weight:700}

/* 3D hero */
.hero3d{perspective:900px;margin-top:12px}.hero-card{position:relative;background:linear-gradient(145deg,#fff,#ffeef0);border:1px solid #ffd6da;border-radius:26px;padding:18px 12px 8px;transform-style:preserve-3d;transform:rotateX(6deg);transition:transform .25s ease;box-shadow:0 24px 40px #e11d2e22}
.siren{display:flex;justify-content:center;gap:18px}.siren span{width:34px;height:14px;border-radius:99px}.siren span:nth-child(1){background:#ff2d40;box-shadow:0 0 18px #ff2d40;animation:blink .7s infinite}.siren span:nth-child(2){background:#2d7bff;box-shadow:0 0 18px #2d7bff;animation:blink .7s infinite reverse}
.amb-svg{text-align:center;transform:translateZ(40px)}.amb-body{font-size:58px;line-height:1;animation:bob 2.4s ease-in-out infinite}.amb-body b{display:block;font-size:20px;letter-spacing:1px}.amb-body small{font-size:11px;color:var(--mut);letter-spacing:1px}
.wheel{width:26px;height:26px;background:#14202b;border:5px solid #94a3b8;border-radius:50%;display:inline-block;margin:2px 22px;animation:spin 1.2s linear infinite}
@keyframes bob{50%{transform:translateY(-6px)}}@keyframes spin{to{transform:rotate(360deg)}}
.hero-shadow{height:12px;background:radial-gradient(ellipse,#00000033,transparent 70%);border-radius:50%;margin:4px 30px 0;animation:shadowPulse 2.4s infinite}
@keyframes shadowPulse{50%{transform:scaleX(.85);opacity:.6}}
.hero-kicker{text-align:center;color:var(--mut);font-size:13px;margin:12px 0 0}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.trust span{background:#fff;border:1px solid #e2e8f0;padding:7px 11px;border-radius:99px;font-size:13px;box-shadow:0 4px 12px #00000008}

.cta{width:100%;border:0;border-radius:18px;padding:16px;background:linear-gradient(135deg,#e11d2e,#ff5a3c);color:#fff;font-family:inherit;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 14px 28px #e11d2e44, inset 0 1px 0 #ffffff66;transition:.2s}
.cta:hover{transform:translateY(-2px)}.cta:active{transform:scale(.98)}.cta small{display:block;font-size:12px;opacity:.85;font-weight:600;margin-top:2px}
.cta.ghost{background:#fff;color:var(--ink);border:1.5px solid #e2e8f0;box-shadow:none;margin-top:10px}
.mini-fare{text-align:center;margin:14px 0;font-size:14px}.mini-fare b{color:var(--red);font-size:18px}
.emergency{display:block;text-align:center;color:var(--red);font-weight:800;text-decoration:none;margin:10px 0}
.demo-note{text-align:center;color:#94a3b8;font-size:12px;line-height:1.6}
.back{border:0;background:#fff;padding:8px 12px;border-radius:99px;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px #00000010}
.field{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:4px 6px 4px 16px;margin:14px 0}.field:focus-within{border-color:var(--red);box-shadow:0 0 0 4px #e11d2e14}
.field span{font-weight:700;white-space:nowrap}.field input{flex:1;border:0;outline:0;font-family:inherit;font-size:19px;padding:14px 8px;min-width:0}.field-full{padding:4px 8px}
.error{color:var(--red);font-weight:700;min-height:20px;margin:-6px 0 8px}
.chips button,.dest-grid button{border:1.5px solid #e2e8f0;background:#fff;border-radius:14px;padding:11px 13px;font-family:inherit;cursor:pointer;text-align:left}
.chips button{color:var(--red);font-weight:700}.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 16px}
.gps{width:100%;border:0;border-radius:16px;padding:16px;background:linear-gradient(135deg,#0e9f8a,#0bc5a3);color:#fff;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px #0e9f8a33}
.loc-status{color:var(--mut);font-size:14px}.loc-card{background:#e6fff8;border:1px solid #b9f0e2;border-radius:16px;padding:14px;margin:10px 0}.loc-card b{display:block}.loc-card small{color:var(--mut)}

/* Map — stylised, no API key needed */
.map{position:relative;height:230px;border-radius:22px;overflow:hidden;background:#dcefe4;border:1px solid #c8e6d5;box-shadow:inset 0 0 0 1px #ffffff88, 0 12px 24px #00000010;margin:12px 0}
.map.tall{height:300px}.map svg{position:absolute;inset:0;width:100%;height:100%}
.road{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round}.road.river{stroke:#a8d8ff;stroke-width:20}
.park{fill:#b9e6c4}.pin{position:absolute;transform:translate(-50%,-100%);font-size:26px;z-index:2;transition:left 1s linear,top 1s linear;filter:drop-shadow(0 6px 6px #00000033)}
.pin span{position:absolute;top:-8px;left:28px;font-size:11px;font-weight:800;background:#14202b;color:#fff;padding:3px 8px;border-radius:99px;white-space:nowrap}
.pin.user{font-size:30px}.pin.hosp{font-size:26px}.pin.amb{font-size:30px}
.pin.moving{transition:left .9s linear,top .9s linear}
.route{position:absolute;left:20%;top:24%;width:28%;height:34%;border:3px dashed var(--red);border-right:0;border-bottom:0;border-radius:20px 0 0 0;opacity:.7}

.fare-strip{background:linear-gradient(135deg,#14202b,#334155);color:#fff;border-radius:18px;padding:14px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:14px 0}.fare-strip b{font-size:22px;color:#ffd166}.fare-strip span{font-size:12px;opacity:.8;width:100%}
.amb-card{background:#fff;border:2px solid #e2e8f0;border-radius:20px;padding:14px;margin:12px 0;cursor:pointer;transition:.2s;box-shadow:0 8px 20px #00000008}
.amb-card.selected{border-color:var(--red);box-shadow:0 14px 30px #e11d2e1c;transform:translateY(-2px)}
.amb-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.badge{font-size:11px;background:#ffeef0;color:var(--red);padding:5px 8px;border-radius:99px;font-weight:800}.badge.alt{background:#e6fff8;color:#067a68}
.plate{font-size:19px;margin:10px 0 4px}.plate b{color:var(--red)}.driver{margin:4px 0;color:var(--mut);font-size:14px;line-height:1.6}.driver a{color:var(--red);font-weight:800;text-decoration:none}
.select-btn{width:100%;margin-top:10px;border:0;border-radius:13px;padding:12px;background:#14202b;color:#fff;font-family:inherit;font-weight:800;cursor:pointer}
.amb-card.selected .select-btn{background:var(--red)}

/* Waiting */
.timer-wrap{position:relative;width:130px;height:130px;margin:14px auto}.timer-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#e2e8f0;stroke-width:9}.ring{fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.timer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.timer b{font-size:42px;line-height:1}.timer small{color:var(--mut)}
.status-line{display:flex;justify-content:space-between;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-weight:700;font-size:14px;margin:12px 0}
.link-btn{width:100%;border:0;background:transparent;color:var(--red);font-family:inherit;font-weight:800;padding:8px;cursor:pointer}

/* Payment */
.receipt{background:#fff;border:1px dashed #cbd5e1;border-radius:18px;padding:14px 16px;margin:12px 0}.receipt>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f1f5f9;font-size:14px}.receipt>div:last-child{border:0}.receipt .total{font-size:18px}.receipt .total b{color:var(--red)}
.pay-label{font-weight:800;margin:16px 0 8px}.pay-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.pay{border:2px solid #e2e8f0;background:#fff;border-radius:16px;padding:14px 6px;font-family:inherit;cursor:pointer}.pay b{display:block;font-size:16px}.pay small{color:var(--mut)}.pay.on{border-color:var(--red);box-shadow:0 10px 22px #e11d2e1c}.pay.bkash.on{border-color:var(--pink)}.pay.nagad.on{border-color:var(--orange)}
.pay-box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px;margin-top:12px}
.progress{height:12px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:12px 0}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#34d399);transition:width 1s linear;border-radius:99px}
.driver-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.driver-bar a{flex:1;text-align:center;background:#14202b;color:#fff;text-decoration:none;padding:11px;border-radius:12px;font-weight:700}.driver-bar a.sos{background:var(--red)}
.done-anim{font-size:72px;text-align:center;animation:bob 1.6s infinite;margin-top:20px}
footer{text-align:center;color:#94a3b8;font-size:11px;line-height:1.6;margin-top:22px}
@media(max-width:360px){h1{font-size:28px}.pay-grid{grid-template-columns:1fr 1fr}.dest-grid{grid-template-columns:1fr}}