/* Home page */
.hero{padding:clamp(18px,2.4vw,32px) 0 8px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy{padding:0}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:500;color:var(--fg-2)}
.kicker b{padding:3px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:700}
.hero h1{font-size:clamp(44px,6.2vw,80px);line-height:.98;margin-top:20px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{margin:20px 0 26px}
.assure{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:var(--fg-2);font-size:15px;font-weight:500}
.assure span{display:inline-flex;align-items:center;gap:8px}.assure svg{color:var(--ok)}
/* phone */
.stage{position:relative;justify-self:center;perspective:1400px}
.stage .phone{width:min(322px,84vw);transform-style:preserve-3d;transition:transform .6s var(--ease);will-change:transform}
.screen{padding:0}
.chipcard{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 50px -24px rgba(16,40,80,.45),inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent);font-size:14px;font-weight:600;color:var(--fg);will-change:transform}
.chipcard small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.chipcard.a{left:-52px;bottom:13%}.chipcard.b{right:-52px;top:7%}
.chipcard{transition:opacity .4s var(--ease)}.stage.busy .chipcard{opacity:0;pointer-events:none}
.chipcard .mq{width:44px;height:44px;border-radius:8px;background:#fff;padding:3px}.chipcard .mq img,.chipcard .mq canvas{width:100%!important;height:100%!important}
.chipcard .ic{width:40px;height:40px}
.demo-cap{margin-top:10px;text-align:center;color:var(--muted);font-size:13px}
/* phone screens (light UI regardless of page theme, like a real device) */
.scr,.vw{position:absolute;inset:0;padding:52px 14px 14px;display:flex;flex-direction:column;gap:10px;color:#101828;font-size:12.5px}
.scr{opacity:0;transform:translateX(18px);pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.scr.on{opacity:1;transform:none;pointer-events:auto}.scr.out{transform:translateX(-18px)}
.s-head{display:flex;align-items:center;gap:8px;min-height:30px}
.s-back{width:30px;height:30px;border-radius:50%;border:0;background:#fff;box-shadow:inset 0 0 0 1px #e2e9f0;display:grid;place-items:center;cursor:pointer;color:#101828;flex:0 0 auto}
.s-head b{font-size:14.5px}.s-head small{display:block;color:#667085;font-size:11px}
.s-wm{font:800 17px/1 Poppins,var(--font);letter-spacing:-.04em;color:#0b1f4d}.s-wm span{color:#0a8fef}
.s-title{font-size:23px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.s-card{background:#fff;border-radius:18px;padding:12px;box-shadow:0 10px 24px -16px rgba(16,40,80,.4);display:grid;gap:9px}
.s-lbl{font-size:11px;color:#667085;font-weight:600}
.routes{display:grid;gap:6px}
.route{display:flex;align-items:center;justify-content:space-between;gap:6px;border:0;background:#f1f5f9;border-radius:12px;padding:9px 10px;font:600 12.5px var(--font);color:#101828;cursor:pointer;text-align:left;transition:background .2s,box-shadow .2s}
.route span{color:#667085;font-weight:500;font-size:11px}.route.on{background:#e5f3fe;box-shadow:inset 0 0 0 1.5px #0a8fef}
.dchips{display:flex;gap:5px}.dchips button{flex:1;border:0;border-radius:999px;padding:7px 0;background:#fff;box-shadow:inset 0 0 0 1px #e2e9f0;font:500 11.5px var(--font);color:#101828;cursor:pointer}
.dchips button.on{background:#0b1f4d;color:#fff;box-shadow:none}
.s-btn{border:0;height:40px;border-radius:999px;background:linear-gradient(120deg,#16a2f7,#0270d0);color:#fff;font:600 13.5px var(--font);cursor:pointer;box-shadow:0 10px 20px -12px rgba(2,123,219,.8);transition:transform .15s;display:grid;place-items:center;padding:0 14px}
.s-btn:active{transform:scale(.96)}.s-btn:disabled{opacity:.45}
.res{display:grid;gap:7px;overflow:auto;padding-bottom:4px}
.bus{display:grid;gap:5px;border:0;text-align:left;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 8px 20px -16px rgba(16,40,80,.5);font:inherit;color:inherit;cursor:pointer;animation:busIn .45s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes busIn{from{opacity:0;transform:translateY(10px)}}
.bus .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.bus .t i{flex:1;position:relative;height:2px;border-radius:2px;background:linear-gradient(90deg,#cfe3f6,#0a8fef);margin:0 4px}.bus .t i::before,.bus .t i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%)}.bus .t i::before{left:0;background:#fff;box-shadow:inset 0 0 0 1.5px #9ccaf2}.bus .t i::after{left:100%;background:#0a8fef}
.bus .m{display:flex;justify-content:space-between;color:#667085;font-size:11px}.bus .p{color:#0a8fef;font-weight:700;font-size:15px}.bus .left{color:#e8710a;font-weight:600}
.seats{display:grid;grid-template-columns:repeat(2,1fr) 10px 1fr;gap:5px;padding:10px;background:#fff;border-radius:18px;box-shadow:0 10px 24px -16px rgba(16,40,80,.4)}
.seat{aspect-ratio:1.1;border:0;border-radius:7px 7px 5px 5px;background:#eef1f4;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);font:600 9.5px var(--font);color:#667085;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s}
.seat.tk{background:#c4c9cf;color:#fff;cursor:not-allowed}.seat.sel{background:linear-gradient(120deg,#16a2f7,#0270d0);color:#fff}
.legend{display:flex;gap:10px;font-size:10.5px;color:#667085}.legend span{display:flex;align-items:center;gap:4px}.legend i{width:10px;height:10px;border-radius:3px;background:#eef1f4}.legend i.s{background:#0a8fef}.legend i.t{background:#c4c9cf}
.s-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:18px;padding:10px 10px 10px 14px;box-shadow:0 -6px 20px -14px rgba(16,40,80,.4)}
.s-foot b{display:block;font-size:15px}.s-foot small{color:#667085;font-size:10.5px}
.held{display:grid;justify-items:center;text-align:center;gap:8px}
.held h4{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}.held p{color:#3d4652;font-size:12px;margin:0}
.timer{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff4e5;color:#b35400;font:600 12.5px var(--font);font-variant-numeric:tabular-nums}
.tk-card{width:100%;background:#fff;border-radius:18px;padding:12px;box-shadow:0 10px 24px -16px rgba(16,40,80,.45);display:grid;grid-template-columns:1fr 84px;gap:10px;align-items:center;text-align:left}
.tk-card b{display:block;font-size:14px}.tk-card small{display:block;color:#667085;font-size:11px}
.qrq{width:84px;height:84px;padding:4px;background:#fff;border-radius:8px}.qrq img,.qrq canvas{width:100%!important;height:100%!important}
.s-cta{width:100%;height:40px;border-radius:12px;background:#0b1f4d;color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.s-link{border:0;background:none;color:#0a8fef;font:600 12px var(--font);cursor:pointer}
/* payment strip */
.pay-strip{display:flex;align-items:center;gap:8px 17px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.pay-strip small{font-size:13px;font-weight:600;letter-spacing:.02em}
.pay-strip b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:color-mix(in srgb,var(--fg) 55%,var(--bg))}
/* routes */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rcard{display:grid;gap:14px;text-align:left;border:0;font:inherit;color:var(--fg);cursor:pointer;background:var(--surface);border-radius:24px;padding:20px;box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);transition:transform .35s var(--ease),box-shadow .35s}
.rcard:hover{transform:translateY(-3px)}
.rcard .cc{display:flex;gap:6px}.rcard .cc span{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--fg-2)}
.rcard .line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.rcard .line b{font-size:20px;letter-spacing:-.02em}
.leg{position:relative;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 25%,var(--line)),var(--brand));margin:0 6px}
.leg::before,.leg::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%)}
.leg::before{left:0;background:var(--surface);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 45%,var(--line))}
.leg::after{left:100%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.leg s{position:absolute;top:50%;left:0;width:22px;height:8px;margin-top:-4px;border-radius:4px;background:var(--brand);box-shadow:0 4px 10px -4px rgba(2,123,219,.8);opacity:0;transform:translateX(0);transition:transform 1.1s var(--ease),opacity .3s}
.rcard:hover .leg s{opacity:1;transform:translateX(calc(var(--w,160px) - 22px))}
.rcard .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.rcard .tag{justify-self:start;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.rcard .tag.ok{background:var(--ok-soft);color:var(--ok)}
/* story */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px)}
.story-phone{position:sticky;top:96px;align-self:start;height:calc(100vh - 120px);display:grid;place-items:center}
.story-phone .phone{width:min(320px,80vw)}
.vw{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.vw.on{opacity:1;transform:none}
.st{min-height:46vh;display:grid;align-content:center;gap:12px}
.st .k{font-weight:700;color:var(--brand);font-size:14.5px;letter-spacing:.02em}
.st h3{font-size:clamp(28px,3.2vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.st p{color:var(--fg-2);font-size:18px;max-width:44ch}
.st .bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;max-width:220px;margin-top:6px}.st .bar i{display:block;height:100%;width:var(--p,0%);background:var(--brand)}
.mapmini{flex:1;border-radius:18px;overflow:hidden;background:#eaf1f6}.mapmini svg{width:100%;height:100%}
.qrbox{display:grid;justify-items:center;gap:6px;background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 24px -16px rgba(16,40,80,.4);text-align:center}
.qrbox .qrq{width:150px;height:150px}
/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp .panel{display:grid;gap:16px;align-content:start}
.cmp h3{font-size:22px}
.cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cmp li{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2)}
.cmp li svg{flex:0 0 auto;margin-top:3px}
.cmp .old li svg{color:var(--muted)}.cmp .new{background:var(--navy);color:var(--surface)}
:root:not([data-theme="dark"]) .cmp .new{background:#0b1f4d;color:#fff}
.cmp .new h3,.cmp .new li{color:inherit}.cmp .new li{opacity:.92}.cmp .new li svg{color:#4cd37a}
/* network */
.net{border-radius:32px;overflow:hidden;background:#0b1f4d;color:#fff;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:center}
.net h2{color:#fff}.net p{color:rgba(255,255,255,.75)}.net .eyebrow{color:#7cc4ff}
.net svg{width:100%;height:auto;overflow:visible}
.n-route{fill:none;stroke:rgba(124,196,255,.28);stroke-width:1.6}
.n-city circle{fill:#0a8fef}.n-city .ring{fill:none;stroke:rgba(124,196,255,.35);stroke-width:1}
.n-city text{fill:rgba(255,255,255,.92);font:600 13px var(--font)}.n-city.big text{font-size:15px;fill:#fff}
.n-bus{fill:#fff}
.net-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.net-stats div{padding:14px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.net-stats b{display:block;font-size:24px;letter-spacing:-.02em}.net-stats small{color:rgba(255,255,255,.7);font-size:13px}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:var(--surface);border-radius:26px;padding:22px;box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);display:grid;gap:8px;align-content:start;overflow:hidden}
.tile h3{font-size:21px}.tile p{color:var(--fg-2);font-size:15.5px}
.t-a{grid-column:span 3;grid-row:span 2}.t-b{grid-column:span 3}.t-c{grid-column:span 3}.t-d,.t-e,.t-f{grid-column:span 2}
.viz{margin-top:10px;border-radius:20px;background:var(--surface-2);padding:18px;display:grid;place-items:center;min-height:130px}
.bseats{display:grid;grid-template-columns:repeat(2,40px) 22px 40px;gap:8px;justify-items:stretch}
.bseats .front{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;padding:0 2px 6px;border-bottom:1px dashed transparent;border-image:linear-gradient(90deg,var(--line),var(--line)) 1}
.bseats .front svg{color:var(--muted)}
.bseats i{height:36px;border-radius:10px 10px 7px 7px;background:var(--surface-3);display:grid;place-items:center;font:600 11px var(--font);font-style:normal;color:var(--muted);box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);transition:background .5s var(--ease),color .5s}
.bseats i.tk{background:color-mix(in srgb,var(--muted) 38%,transparent);color:var(--surface)}.bseats i.sel{background:var(--brand-grad);color:#fff}
.seat-key{display:flex;gap:14px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--muted)}.seat-key span{display:inline-flex;align-items:center;gap:6px}.seat-key i{width:12px;height:12px;border-radius:4px;background:var(--surface-3)}.seat-key i.s{background:var(--brand)}.seat-key i.t{background:color-mix(in srgb,var(--muted) 38%,transparent)}
.ticketcard{width:100%;max-width:320px;border-radius:18px;background:#fff;color:#101828;padding:14px 16px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 76px;gap:12px;align-items:center;position:relative}
.ticketcard b{display:block;font-size:17px}.ticketcard small{display:block;color:#667085}
.ticketcard .qrq{width:76px;height:76px;padding:0}
.trackline{width:100%;height:80px}.trackline svg{width:100%;height:100%}
.ring{--p:0;width:116px;height:116px;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center}
.ring div{width:90px;height:90px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;text-align:center;font-weight:700;font-size:20px;line-height:1.1}
.ring small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.refund{width:100%;display:grid;gap:8px;font-size:15px}.refund div{display:flex;justify-content:space-between}.refund span{color:var(--muted)}
.refund .tot{border-top:1px dashed var(--line);padding-top:8px;font-weight:700}.refund .tot b{color:var(--ok)}
.pays{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pays span{padding:8px 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14px;transition:background .4s,color .4s}
.pays span.on{background:var(--navy);color:var(--surface);box-shadow:none}
/* rewards */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tier{border-radius:24px;padding:20px;display:grid;gap:10px;align-content:start;color:#fff;position:relative;overflow:hidden;min-height:250px}
.tier .nm{font-size:22px;font-weight:600;letter-spacing:-.02em}.tier .th{font-size:13px;opacity:.8}
.tier .x{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1}.tier .x small{font-size:14px;font-weight:500;opacity:.8;margin-left:4px}
.tier ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-size:14px;opacity:.92}
.tier ul li::before{content:"–";margin-right:8px;opacity:.6}
.tier.t1{background:linear-gradient(150deg,#16a2f7,#0270d0)}.tier.t2{background:linear-gradient(150deg,#8fa3b0,#5d7180)}.tier.t3{background:linear-gradient(150deg,#e9a524,#b87400)}.tier.t4{background:linear-gradient(150deg,#2f3d4a,#141c24)}
.packs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pk{padding:12px 16px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:2px;min-width:130px}
.pk b{font-size:19px}.pk small{color:var(--muted)}.pk em{font-style:normal;font-size:12px;font-weight:700;color:var(--ok)}
/* support */
.sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sup .panel{display:grid;gap:12px;align-content:start}
.sup p{color:var(--fg-2)}
.home-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;align-items:start}
/* operators band */
.opband{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:20px;align-items:center;border-radius:28px;padding:clamp(22px,3.5vw,40px);background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent)}
.opband p{color:var(--fg-2);margin-top:8px}
/* closing call */
.closer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center;border-radius:32px;padding:clamp(26px,4.5vw,52px);background:linear-gradient(135deg,#0b1f4d,#0a3a7a 55%,#0270d0);color:#fff;overflow:hidden}
.closer h2{color:#fff}.closer p{color:rgba(255,255,255,.85);margin-top:10px;font-size:18px}
.closer .badge-note{color:rgba(255,255,255,.7)}
.closer .qr{justify-self:end;width:168px;height:168px}
.closer .pend{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:600;font-size:14px;margin-bottom:14px}
.closer .pend[hidden]{display:none}
.closer .pend i{width:8px;height:8px;border-radius:50%;background:#4cd37a}
@media (max-width:1100px){.chipcard.a{left:-24px}.chipcard.b{right:-24px}}
@media (max-width:980px){.hero-in,.story,.net,.closer,.cmp,.home-faq,.opband{grid-template-columns:1fr}.story-phone{display:none}.st{min-height:auto;padding:16px 0}.bento{grid-template-columns:repeat(2,1fr)}.t-a,.t-b,.t-c,.t-d,.t-e,.t-f{grid-column:span 2;grid-row:auto}.closer .qr{justify-self:start}.tiers{grid-template-columns:repeat(2,1fr)}.rgrid,.sup{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.bento,.tiers,.rgrid,.sup{grid-template-columns:1fr}.t-a,.t-b,.t-c,.t-d,.t-e,.t-f{grid-column:auto}.chipcard{display:none}.net-stats{grid-template-columns:1fr 1fr 1fr}.hero h1{font-size:44px}}
@media (prefers-reduced-motion:reduce){.stage .phone{transform:none!important}}

/* app tab bar inside the phones */
.s-tabs{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;height:56px;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 12px 26px -14px rgba(11,31,77,.45),inset 0 0 0 1px #e2e9f0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:5px}
.s-tabs span{height:46px;border-radius:23px;display:grid;place-items:center;gap:1px;color:#667085;font:500 9px var(--font);align-content:center}
.s-tabs span.on{background:linear-gradient(120deg,#16a2f7,#0270d0);color:#fff}
.scr,.vw{padding-bottom:76px}

#routes{padding-top:clamp(28px,3.5vw,44px)}