*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-family-subtext);color:var(--black);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--space-8)}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--radius-box-ms);font-weight:var(--btn-font-weight);font-size:var(--btn-font-size);transition:var(--btn-transition);cursor:pointer;border:var(--btn-border-width) solid transparent;font-family:var(--btn-font-family)}
.btn-p{background:var(--primary-color);color:#fff;box-shadow:var(--btn-primary-shadow)}
.btn-g{background:#fff;color:var(--black);border:1.5px solid var(--border-color)}
.btn-g:hover{color:var(--primary-color)}

.shead{max-width:720px;margin:0 auto var(--space-12);text-align:center}
.shead p{color:var(--muted);font-size:var(--fs-body-lg);margin-top:var(--space-3)}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hero */
.hero{position:relative;overflow:hidden}
.hg{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-12);align-items:center}
.hl h1{margin:var(--space-5) 0}
.hl h1 .g{background:var(--primary-color);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl p.ld{font-size:var(--fs-body-lg);color:var(--muted);max-width:540px;margin:0 0 var(--space-6)}
.hcta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hmk{position:relative}
.hmk img{width:100%;border-radius:var(--radius-nav);box-shadow:var(--shadow);display:block}
.liv{display:flex;align-items:center;gap:var(--space-1);font-size:var(--fs-caption);color:var(--color-success);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.liv i{width:6px;height:6px;border-radius:50%;background:var(--color-success);animation:pulse 2s ease-in-out infinite}
@media(max-width:980px){.hg{grid-template-columns:1fr;gap:var(--space-10)}}

/* Modes */
.mod .shead{max-width:720px;margin:0 auto var(--space-10);text-align:center}
.mod .shead p{margin:var(--space-3) auto 0;text-align:center}

.mod-car{position:relative}
.mod-track{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--space-2)}
.mod-track::-webkit-scrollbar{display:none}

.mc{flex:0 0 calc((100% - 3*var(--space-5))/4);scroll-snap-align:start;background:none;border:0;border-radius:0;padding:0;position:relative;transition:.25s}
.mc:hover{transform:none;box-shadow:none}
.mc .mf{height:240px;margin-bottom:var(--space-4);background:var(--surface-blue);border:0;border-radius:var(--radius-nav);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--space-6);transition:.25s}
.mc .mf img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-nav)}
.mc .mf:has(img){padding:0;background:none;height:auto;aspect-ratio:16/10}
.mc .mtg{position:static;display:inline;font-size:20px;font-weight:var(--font-weight-semibold);letter-spacing:0;color:var(--muted);text-transform:none;margin-right:var(--space-2)}
.mc h3{display:inline;font-size:20px}
.mc p{margin-top:var(--space-3);font-size:var(--fs-small);color:var(--muted);line-height:var(--line-height-body)}

.mod-nav{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-8)}
.mod-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-color);background:#fff;color:var(--black);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.mod-arrow svg{width:18px;height:18px}
.mod-arrow:hover:not(:disabled){border-color:var(--primary-color);color:var(--surface);box-shadow:var(--shadow-1);background:var(--primary-color)}
.mod-arrow:disabled{opacity:.35;cursor:default}

@media(max-width:980px){.mc{flex-basis:calc((100% - 2*var(--space-5))/3)}}
@media(max-width:760px){.mc{flex-basis:calc((100% - var(--space-5))/2)}.mc .mf{height:200px}}
@media(max-width:520px){.mc{flex-basis:100%}}

/* Challenges */

/* Mixed Fleet */
.mxf-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-16);margin:0 auto}
.mxf-text p{font-size:var(--fs-body-lg);color:var(--muted);line-height:var(--line-height-body)}
.mxf-text p+p{margin-top:var(--space-4)}
.mxf-points{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.mxf-points li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-body);color:var(--black)}
.mxf-points li svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--primary-color);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mxf-points li img{width:18px;height:18px;flex:0 0 auto;display:block}
@media(max-width:880px){.mxf-grid{grid-template-columns:1fr;gap:var(--space-10)}}

/* Durations */
.dur{background:var(--background-color)}

/* Rider Experience */
.exp-head{max-width:660px;margin:0 auto var(--space-12);text-align:center}
.exp-head p{font-size:var(--fs-body-lg);color:var(--muted);line-height:var(--line-height-body)}
.exp-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-10);align-items:center;max-width:1100px;margin:0 auto}
.exp-side{display:flex;flex-direction:column;gap:var(--space-6)}
.exp-side.lft{align-items:flex-end}
.anno{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-3);row-gap:var(--space-2);align-items:center;background:var(--white);border:1px solid var(--border-color);border-radius:var(--radius-box-sm);padding:var(--space-5);max-width:288px;transition:transform .25s}
.anno:hover{transform:translateY(-3px)}
.anno .anum{grid-column:1;grid-row:1;width:34px;height:34px;border-radius:var(--radius-badge);background:var(--surface-blue);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700}
.anno .ah{grid-column:2;grid-row:1;font-size:var(--fs-small);font-weight:600;color:var(--black);margin:0}
.anno .ad{grid-column:1/-1;grid-row:2;font-size:var(--fs-caption);color:var(--muted);line-height:1.5}
/* ≤880px */
@media(max-width:880px){.exp-stage{grid-template-columns:1fr;gap:var(--space-8)}.exp-side.lft{align-items:stretch}.anno{max-width:none}}

.exp-phone{display:flex;justify-content:center}
.exp-phone img{width:260px;max-width:100%;height:auto;display:block}

/* Fleet Ops */
.brs-ops{background:var(--background-color)}
.ops-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-16);align-items:center;margin:0 auto}
.ops-left .eyebrow{margin-bottom:var(--space-4)}
.ops-left p{font-size:var(--fs-body);color:var(--muted);line-height:var(--line-height-body);margin-bottom:var(--space-6)}
.ops-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.opstat{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-btn);padding:var(--space-6) var(--space-5);transition:.25s}
.opstat:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.opstat .ov{font-size:30px;font-weight:800;color:var(--black);letter-spacing:-.02em;line-height:1.05}
.opstat .ov .un{font-size:var(--fs-body);color:var(--muted);font-weight:600;margin-left:var(--space-1)}
.opstat .ov.c{color:var(--primary-color)}
.opstat .ol{font-size:var(--fs-small);color:var(--muted);font-weight:600;margin-top:var(--space-2);line-height:1.4}
@media(max-width:880px){.ops-grid{grid-template-columns:1fr;gap:var(--space-10)}}

.phn.op .phs{margin:var(--space-2) var(--space-4);background:var(--background-color);border-radius:var(--radius-badge);padding:var(--space-2) var(--space-3);display:flex;justify-content:space-between;align-items:center}
.phn.op .phs .pls{font-size:var(--fs-caption);font-weight:800;color:var(--black)}
.phn.op .phs .pts{font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.phn.op .ptk{margin:var(--space-2) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.phn.op .pt{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-3);display:flex;justify-content:space-between;align-items:center;animation:fup .5s ease-out backwards}
.phn.op .pt:nth-child(1){animation-delay:.1s}.phn.op .pt:nth-child(2){animation-delay:.2s}.phn.op .pt:nth-child(3){animation-delay:.3s}.phn.op .pt:nth-child(4){animation-delay:.4s}
.phn.op .pt.ac{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)}
.phn.op .pt .ptl{font-size:var(--fs-caption);font-weight:800;color:var(--black)}
.phn.op .pt .ptm{font-size:var(--fs-caption);color:var(--muted);margin-top:var(--space-1)}
.phn.op .pt .ppr{font-size:var(--fs-caption);font-weight:800;letter-spacing:.05em;padding:var(--space-1) var(--space-2);border-radius:var(--radius-box-icon);text-transform:uppercase}
.phn.op .pt .ppr.lw{background:#eef2f9;color:var(--sol-muted)}
.phn.op .pt .ppr.hi{background:#fee2e2;color:#b03030}
.phn.op .pt .ppr.md{background:rgba(var(--primary-rgb),.1);color:var(--primary-color)}

/* Admin Analytics */

.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:var(--space-4);max-width:1100px;margin:0 auto}

@media(max-width:880px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(140px,auto)}}

/* Dark IoT Band */
.iot{color:var(--black);position:relative;overflow:hidden}
.iot:before{content:"";position:absolute;inset:0;background:transparent}
.iot-head{max-width:800px;margin:0 auto var(--space-12);text-align:center;position:relative;z-index:2}
.iot-head .eyebrow{margin-bottom:var(--space-5)}
.iot-head p{color:var(--muted);font-size:var(--fs-body);line-height:var(--line-height-body)}
.vnd-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);position:relative;z-index:2;max-width:1100px;margin:0 auto}
.vnd{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--space-6) var(--space-4);text-align:center;transition:.25s;font-weight:700;font-size:var(--fs-small);color:var(--black)}
.vnd:hover{border-color:rgba(var(--primary-rgb),.4);background:rgba(var(--primary-rgb),.05);transform:translateY(-3px)}
@media(max-width:880px){.vnd-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.vnd-g{grid-template-columns:repeat(2,1fr)}}

/* Operator Story */

/* Pricing Teaser */
.pt-c{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-8) var(--space-10);background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);flex-wrap:wrap}
.pt-l{flex:1;min-width:240px}
.pt-l .eyebrow{margin-bottom:var(--space-2)}
.pt-l h3{margin:var(--space-2) 0}
.pt-l p{font-size:var(--fs-small);color:var(--muted);line-height:var(--line-height-body)}
.pt-l p b{color:var(--black);font-weight:700}


/* Reveal */
.rev{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev,.hfl,.hmap .dt,.phn.op .pt{animation:none;opacity:1;transform:none;transition:none}}

/* Analytics Feature Row */
.fs{background:#fff}
.fs.alt{background:var(--background-color)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;margin:0 auto}
.fr.flip .ft{order:2}.fr.flip .fv{order:1}
.ft .eyebrow{margin-bottom:var(--space-4)}
.ft p.fl{font-size:var(--fs-body);color:var(--muted);line-height:var(--line-height-body);margin-bottom:var(--space-6)}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.ft ul li{font-size:var(--fs-small);color:var(--black);display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.55}
.ft ul li:before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;margin-top:var(--space-1);background:rgba(var(--primary-rgb),.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10l2.5 2.5L14 7' stroke='%232E6BE6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat}
@media(max-width:880px){.fr{grid-template-columns:1fr;gap:var(--space-10)}}
.dsh{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-nav);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.dsh .dh{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-4);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-4)}
.dsh .dh b{font-size:var(--fs-small);color:var(--black);font-weight:800}
.dsh .rw{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
.kpi{background:var(--background-color);border-radius:var(--radius-badge);padding:var(--space-4)}
.kpi .l{font-size:var(--fs-caption);color:var(--muted);font-weight:700;letter-spacing:.05em}
.kpi .v{font-size:24px;font-weight:800;color:var(--black);margin-top:var(--space-1);letter-spacing:-.02em}
.kpi .v.c{color:var(--primary-color)}
.kpi .ch-up{font-size:var(--fs-caption);color:var(--color-success);font-weight:700;margin-top:var(--space-1)}
.chart-w{background:var(--background-color);border-radius:var(--radius-badge);padding:var(--space-4);height:130px;position:relative}
.chart-w .cl{font-size:var(--fs-caption);color:var(--muted);font-weight:700;letter-spacing:.05em;margin-bottom:var(--space-2)}
.chart-w svg{width:100%;height:90px;display:block}
.chart-w .ln{fill:none;stroke:var(--primary-color);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart-w .ar{fill:rgba(var(--primary-rgb),.12)}
.chart-w .dt{fill:var(--primary-color);filter:drop-shadow(0 0 6px rgba(var(--primary-rgb),.7))}

/* 768px–980px */
@media (min-width:768px) and (max-width:980px){
  .hg{grid-template-columns:1.05fr 1fr;gap:var(--space-8)}
}

/* ≤1023px */
@media (max-width:1023px){
  .mxf-grid{gap:var(--space-10)}
  .exp-stage{gap:var(--space-6)}
}

/* ≤880px */
@media (max-width:880px){
  .exp-stage{grid-template-columns:1fr 1fr;align-items:stretch}
  .exp-side{display:contents}
  .exp-phone{order:-1;grid-column:1/-1;margin-bottom:var(--space-4)}
}

/* ≤768px */
@media (max-width:768px){
  .wrap{padding:0 var(--container-pad)}
  .shead,
  .mod .shead,
  .exp-head{margin-bottom:var(--space-3)}
  .mod-nav{ margin-top: var(--space-3)}
}

/* ≤600px */
@media (max-width:600px){
  .hl h1{margin-top:var(--space-4);margin-bottom:var(--space-4)}
  .shead h2{margin-bottom:var(--space-3)}
  .hl p.ld,
  .shead p,
  .exp-head p,
  .mxf-text p{font-size:var(--fs-body)}
  .pt-c{flex-direction:column;align-items:center;text-align:center;padding:var(--space-8) var(--space-6)}
  .pt-l{flex:0 1 auto;min-width:0}
  .exp-side {gap: var(--space-3)}
  .exp-stage{gap:var(--space-3)}
  .anno{grid-template-columns:1fr;padding:var(--space-4)}
  .anno .ah{grid-column:1;grid-row:2}
  .anno .ad{grid-row:3}
}

/* ≤420px */
@media (max-width:420px){
  .btn{padding:var(--space-3) var(--space-6);font-size:var(--fs-small)}
}