/* OneWayCab Partner — "See it in action" reel. 1080 × 1920 stage, scaled to fit. */
:root{
  --navy:#1b2a4a; --blue:#0792dc; --blue-d:#047bc6; --yellow:#ffd600; --yellow-d:#f5c400;
  --ink:#111827; --slate:#4b5873; --line:#d9e3f0; --bg:#eef4fb;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);font-family:'Montserrat',system-ui,sans-serif;color:var(--ink)}

#stage{position:fixed;left:0;top:0;width:1080px;height:1920px;overflow:visible;transform-origin:0 0}
.bg{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;border-radius:50%}
.g1{width:1000px;height:1000px;right:-420px;top:-380px;background:radial-gradient(circle,rgba(255,214,0,.30) 0%,rgba(255,214,0,0) 66%)}
.g2{width:1150px;height:1150px;left:-560px;bottom:-420px;background:radial-gradient(circle,rgba(7,146,220,.20) 0%,rgba(7,146,220,0) 66%)}
.dots{position:absolute;left:50px;top:110px;width:340px;height:240px;
  background-image:radial-gradient(rgba(27,42,74,.16) 2.2px,transparent 2.6px);background-size:30px 30px;
  -webkit-mask-image:linear-gradient(135deg,#000 10%,transparent 85%);mask-image:linear-gradient(135deg,#000 10%,transparent 85%)}

/* ── Captions above the phone ───────────────────────────────────────── */
.caps{position:absolute;left:70px;right:70px;top:120px;height:250px}
.cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;font-size:62px;line-height:1.18;letter-spacing:-.01em;color:var(--navy);opacity:0}
.cap b{color:var(--blue);font-weight:700}
.cap .hl{background:linear-gradient(transparent 62%,rgba(255,214,0,.75) 62%);padding:0 6px}

/* ── Phone ──────────────────────────────────────────────────────────── */
.phone{position:absolute;left:209px;top:392px;width:662px;height:1432px;border-radius:84px;background:#0d1220;padding:16px;
  box-shadow:0 0 0 3px #2a3245 inset,0 50px 110px rgba(27,42,74,.32),0 14px 30px rgba(27,42,74,.2);opacity:0;will-change:transform,opacity}
.phone-screen{position:relative;width:630px;height:1400px;border-radius:70px;overflow:hidden;background:#efefef}
#ui{position:absolute;left:0;top:0;width:360px;height:800px;transform:scale(1.75);transform-origin:0 0;overflow:hidden}
.r-sb{position:absolute;left:0;right:0;top:0;height:38px;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px 0 30px;font:600 12.5px Montserrat,sans-serif;color:#111;pointer-events:none}
.r-sb i{position:absolute;left:50%;top:10px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#0d1220}
.r-sb span:last-child{display:flex;gap:5px;align-items:center}

/* Fingertip */
.tapdot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;z-index:70;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.55);border:2px solid rgba(255,255,255,.95);box-shadow:0 3px 12px rgba(0,0,0,.35)}
.tapdot::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,214,0,.95);
  transform:scale(var(--rip,1));opacity:var(--ripo,0)}

/* Spotlight on the next tap */
.spot-dim{position:absolute;left:0;top:0;width:360px;height:800px;z-index:63;pointer-events:none;opacity:0;
  background:rgba(0,0,0,.36);
  -webkit-mask-size:360px 800px;mask-size:360px 800px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.spot-ring{position:absolute;z-index:64;pointer-events:none;opacity:0;border-radius:12px;border:2.5px solid var(--yellow);
  box-shadow:0 0 0 4px rgba(255,214,0,.28),0 0 22px rgba(255,214,0,.55)}
.spot-tip{position:absolute;left:0;top:0;z-index:68;pointer-events:none;opacity:0;white-space:nowrap;
  background:var(--yellow);color:var(--navy);font:700 11.5px Montserrat,sans-serif;padding:7px 12px;border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.3)}
.spot-tip::before{content:'';position:absolute;left:var(--ax,50%);top:-5px;width:10px;height:10px;margin-left:-5px;background:var(--yellow);transform:rotate(45deg);border-radius:2px}
.spot-tip.up::before{top:auto;bottom:-5px}
.spot-tip span{position:relative}

/* In-app overlays */
.r-toast{position:absolute;left:50%;top:590px;z-index:65;transform:translateX(-50%);white-space:nowrap;
  background:#1f2937;color:#fff;font:600 11.5px Montserrat,sans-serif;padding:10px 16px;border-radius:20px;opacity:0;
  box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;gap:7px}
.r-toast.warn u{background:#f59e0b}
.r-toast u{display:inline-flex;width:16px;height:16px;border-radius:50%;background:#22c55e;align-items:center;justify-content:center;text-decoration:none;font-size:10px}
.r-notif{position:absolute;left:10px;right:10px;top:44px;z-index:62;background:#fff;border-radius:14px;padding:10px 12px 11px 54px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;min-height:62px}
.r-notif .lg{position:absolute;left:11px;top:12px;width:34px;height:34px;border-radius:9px;background:var(--yellow);display:flex;align-items:center;justify-content:center;
  font:700 11px Montserrat,sans-serif;color:var(--navy)}
.r-notif small{display:block;font-size:9.5px;color:#888;font-weight:500}
.r-notif b{display:block;font-size:12px;color:#111;margin-top:2px}
.r-notif span{display:block;font-size:10.5px;color:#444;margin-top:2px}

/* Home: offline state */
.st{transition:none}
.st.off{background:#6b7280}
.st.off .tr{background:#9ca3af}
.st.off .tk{left:297px;background:#f3f4f6}
.st.off .pw{background:#b91c1c}

/* Booking cards */
.r-list{position:absolute;left:9px;right:9px;top:152px}
.r-bk{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.14);padding:11px 12px 10px;margin-bottom:10px;font-size:10.5px;color:#4b5563}
.r-bk .rt{font-weight:700;font-size:13.5px;color:#111;display:flex;align-items:center;gap:6px}
.r-bk .rt em{font-style:normal;color:#9ca3af;font-weight:500}
.r-bk .tag{margin-left:auto;font-size:9px;font-weight:700;padding:3px 8px;border-radius:9px;background:#e0f2fe;color:#0369a1;letter-spacing:.2px}
.r-bk .tag.y{background:#fef3c7;color:#92400e}
.r-bk .tag.g{background:#dcfce7;color:#166534}
.r-bk .when{margin-top:5px;font-weight:600;color:#1f2937;font-size:11px}
.r-bk .meta{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
.r-bk .meta i{font-style:normal;background:#f3f4f6;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:600;color:#374151}
.r-bk .row2{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px dashed #e5e7eb}
.r-bk .amt{font-size:17px;font-weight:700;color:#111;line-height:1}
.r-bk .amt small{display:block;font-size:8.5px;font-weight:500;color:#9ca3af;margin-top:3px}
.bbtn{background:var(--yellow);border-radius:16px;padding:8px 16px;font-weight:700;font-size:11.5px;color:#222;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bbtn.done{background:#16a34a;color:#fff}
.r-pl{margin-top:8px;display:grid;grid-template-columns:14px 1fr;gap:5px 6px;font-size:10.5px;color:#374151;align-items:center}
.r-pl s{text-decoration:none;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-left:3px}
.r-pl s.e{background:#dc2626;border-radius:2px}
.r-cu{display:flex;align-items:center;gap:9px;margin-top:9px;padding-top:9px;border-top:1px dashed #e5e7eb}
.r-cu .av{width:30px;height:30px;border-radius:50%;background:#dbeafe;color:#1e40af;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.r-cu b{font-size:11.5px;color:#111;display:block}
.r-cu small{font-size:9.5px;color:#888}
.r-act{display:flex;gap:8px;margin-top:11px}
.r-act div{flex:1;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:11.5px}
.r-act .call{border:1.5px solid #16a34a;color:#15803d}
.r-act .nav{background:var(--blue);color:#fff}

/* Form fill */
.fld span.f{color:#111;font-weight:500}

/* ── Full-stage text scenes ─────────────────────────────────────────── */
.layer{position:absolute;inset:0;opacity:0;pointer-events:none}
.eyebrow{font-weight:700;font-size:30px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.hook{padding:300px 90px 0}
.hook h1{margin-top:22px;font-weight:700;font-size:140px;line-height:1.02;letter-spacing:-.035em;color:var(--navy)}
.hook h1 span{display:block}
.hook h1 span+span{color:var(--blue)}
.hook p.lede{margin-top:34px;font-size:40px;font-weight:500;color:var(--slate)}
.feat{margin-top:70px;display:flex;flex-direction:column;gap:26px}
.feat div{position:relative;display:flex;align-items:center;gap:30px;background:#fff;border-radius:30px;padding:26px 34px;
  box-shadow:0 10px 30px rgba(27,42,74,.08);border:1px solid var(--line);opacity:0}
.feat img{width:70px;height:70px;object-fit:contain}
.feat b{display:block;font-size:42px;font-weight:700;color:var(--navy)}
.feat small{display:block;font-size:29px;color:var(--slate);margin-top:4px}
.feat i{margin-left:auto;width:58px;height:58px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none}

.outro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:360px 80px 0}
.outro>*{opacity:0}
.mark{margin-top:26px;font-weight:700;font-size:150px;letter-spacing:-.04em;color:var(--navy);line-height:1}
.mark span{background:linear-gradient(transparent 66%,var(--yellow) 66%);padding:0 10px}
.outro h2{margin-top:56px;font-weight:700;font-size:66px;line-height:1.2;letter-spacing:-.015em;color:var(--navy)}
.outro h2 span{color:var(--blue)}
.chips{margin-top:64px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:900px}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:16px 28px;font-weight:600;font-size:30px;color:var(--navy);
  box-shadow:0 6px 18px rgba(27,42,74,.06)}
.again{margin-top:84px;pointer-events:auto;cursor:pointer;border:0;border-radius:999px;background:var(--yellow);color:var(--navy);
  font:700 44px Montserrat,sans-serif;padding:30px 66px;box-shadow:0 14px 34px rgba(245,196,0,.45);display:flex;align-items:center;gap:20px}
.again:hover{background:var(--yellow-d)}
.outro .note{margin-top:60px;font-size:30px;color:var(--slate)}

/* ── Player controls (outside the stage, not scaled) ────────────────── */
.controls{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  width:min(640px,calc(100% - 24px));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px rgba(27,42,74,.14);padding:10px 12px 10px;
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;z-index:10}
.cbtn{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
#playBtn{background:var(--yellow);color:var(--navy)}
#playBtn:hover{background:var(--yellow-d)}
#restartBtn{background:#eef2f8;color:var(--navy)}
#restartBtn:hover{background:#e1e8f2}
.cbtn:focus-visible,.bar:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.track{min-width:0}
.chap{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--navy);margin-bottom:6px;white-space:nowrap;gap:8px}
.chap span:last-child{color:var(--slate);font-weight:500;font-variant-numeric:tabular-nums}
.bar{display:flex;gap:4px;height:16px;align-items:center;cursor:pointer;touch-action:none}
.seg{position:relative;height:6px;border-radius:3px;background:#dbe4ef;overflow:hidden;flex:var(--d) 1 0}
.seg u{position:absolute;inset:0;background:var(--blue);transform-origin:0 0;transform:scaleX(0)}
.seg.cur{height:8px}
.bar:hover .seg{height:8px}
#fullBtn{background:#eef2f8;color:var(--navy)}
#fullBtn:hover{background:#e1e8f2}
@media (max-width:420px){.controls{gap:8px;padding:8px 10px}.cbtn{width:38px;height:38px}}