:root{
      --bg:#070A12;
      --bg2:#0A0E1A;
      --card:#0E1426;
      --card2:#0B1122;
      --text:#EAF0FF;
      --muted:#A8B3D1;
      --line:#1C2540;

      --cyan:#00E5FF;
      --amber:#FFB020;

      --r:16px;
      --r2:22px;

      --max:460px;
      --pad:16px;

      --h1:40px;
      --h2:22px;
      --p:14px;

      --ease:cubic-bezier(.2,.9,.2,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font-family:inherit}
    img{max-width:100%;display:block}
    .sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

    .bg-bleed{
      position:fixed; inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 18% 12%, rgba(0,229,255,.10), transparent 42%),
        radial-gradient(circle at 78% 22%, rgba(255,176,32,.10), transparent 42%),
        radial-gradient(circle at 50% 70%, rgba(124,92,255,.06), transparent 48%);
      filter:saturate(105%);
      opacity:.9;
    }
    @media (prefers-reduced-motion: reduce){
      .bg-bleed{display:none}
    }

    .shell{
      min-height:100%;
      display:flex;
      justify-content:center;
      padding: 12px;
    }
    .app{
      width:100%;
      max-width: var(--max);
    }

    .header{
      position:sticky; top:0; z-index:50;
      background: rgba(7,10,18,.88);
      backdrop-filter: blur(10px);
      border:1px solid rgba(28,37,64,.72);
      border-radius: 18px;
      margin-top:10px;
      overflow:hidden;
    }
    @supports not (backdrop-filter: blur(10px)){
      .header{background:rgba(7,10,18,.96)}
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 12px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .mark{
      width:36px;height:36px;border-radius:12px;
      background: var(--card);
      border:1px solid var(--line);
      display:grid; place-items:center;
    }
    .mark svg{width:18px;height:18px}
    .brand h1{
      margin:0;
      font-size: 14px;
      letter-spacing:.5px;
      font-weight: 800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand h1 span{
      color: var(--cyan);
    }
    .hdr-actions{display:flex; gap:8px}
    .icon-btn{
      width:40px;height:40px;
      display:grid; place-items:center;
      border-radius: 14px;
      border:1px solid var(--line);
      background: var(--card2);
      color: var(--text);
      padding:0;
      cursor:pointer;
      transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
      touch-action: manipulation;
    }
    .icon-btn:active{transform: scale(.98)}
    .icon-btn:focus-visible{
      outline: none;
      border-color: rgba(0,229,255,.9);
    }
    .icon-btn svg{width:18px;height:18px;opacity:.95}
    .header.scrolled{
      border-color: rgba(0,229,255,.18);
    }

    .section{
      margin-top: 14px;
      border:1px solid var(--line);
      background: rgba(14,20,38,.70);
      border-radius: 22px;
      overflow:hidden;
    }
    .section-inner{
      padding: 18px 16px;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.22em;
      text-transform: uppercase;
      margin:0 0 10px 0;
    }
    .dot{
      width:8px;height:8px;border-radius:99px;
      background: var(--cyan);
    }
    .title{
      margin:0;
      font-size: var(--h1);
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight: 900;
    }
    .sub{
      margin: 10px 0 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.55;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height: 46px;
      padding:0 16px;
      border-radius: 16px;
      border:1px solid transparent;
      cursor:pointer;
      touch-action: manipulation;
      transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
      user-select:none;
      font-weight: 800;
      letter-spacing:.02em;
    }
    .btn:active{transform: scale(.99)}
    .btn-primary{
      background: var(--cyan);
      color:#031017;
    }
    .btn-primary:focus-visible{
      outline:none;
      border-color: rgba(255,255,255,.75);
    }
    .btn-ghost{
      background: transparent;
      border-color: rgba(28,37,64,.9);
      color: var(--text);
    }
    .btn-ghost:focus-visible{
      outline:none;
      border-color: rgba(0,229,255,.9);
    }

    .hero{
      position:relative;
      background: #070A12;
    }
    .hero-media{
      height: 210px;
      border-bottom:1px solid var(--line);
      position:relative;
      overflow:hidden;
      background: #050812;
    }
    .hero-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:.78;
      filter: contrast(108%) saturate(108%);
      transform: scale(1.02);
    }
    .hero-overlay{
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,229,255,.14), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(255,176,32,.12), transparent 45%),
        linear-gradient(to bottom, rgba(7,10,18,.10), rgba(7,10,18,.92));
    }
    .hero-map{
      position:absolute;
      inset: 10px 10px 10px 10px;
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(10,14,26,.52);
      overflow:hidden;
    }
    .hero-map svg{
      position:absolute; inset:0;
      width:100%; height:100%;
      opacity:.98;
    }
    .hero-vehicle{
      position:absolute;
      width:12px;height:12px;border-radius:99px;
      border:2px solid rgba(3,16,23,.65);
      background: var(--cyan);
      transform: translate(-50%,-50%);
      will-change: transform;
    }
    .hero-vehicle.v2{background: var(--amber)}
    .hero-vehicle::after{
      content:"";
      position:absolute; inset:-10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
    }

    .hero-cta{
      display:flex;
      gap:10px;
      margin-top:14px;
      flex-wrap:wrap;
    }

    .grid{
      display:grid;
      gap:12px;
    }
    .cols-2{
      grid-template-columns: 1fr;
    }

    .panel{
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.80);
      overflow:hidden;
    }
    .panel-hd{
      padding: 14px 14px 12px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-bottom:1px solid rgba(28,37,64,.9);
    }
    .panel-hd h3{
      margin:0;
      font-size: 14px;
      letter-spacing:.02em;
      font-weight: 900;
    }
    .badge{
      font-size: 12px;
      color: var(--muted);
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid rgba(28,37,64,.9);
      border-radius: 999px;
      padding: 8px 10px;
      background: rgba(14,20,38,.65);
      white-space:nowrap;
    }
    .badge .b{
      width:7px;height:7px;border-radius:99px;background:var(--cyan);
    }
    .badge .b.warn{background:var(--amber)}
    .panel-body{padding: 14px}

    .kpi-row{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-top: 12px;
    }
    .kpi{
      border-radius: 16px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.55);
      padding: 12px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      min-height: 64px;
    }
    .kpi .lbl{
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.18em;
      text-transform: uppercase;
      margin:0;
    }
    .kpi .val{
      margin:2px 0 0 0;
      font-size: 22px;
      font-weight: 950;
      letter-spacing:-.02em;
    }
    .kpi .chip{
      width:42px;height:42px;border-radius:16px;
      border:1px solid rgba(28,37,64,.9);
      display:grid; place-items:center;
      background: rgba(11,17,34,.75);
      flex:0 0 auto;
    }
    .kpi svg{width:18px;height:18px}
    .kpi.cyan .val{color: var(--cyan)}
    .kpi.amber .val{color: var(--amber)}

    .map{
      position:relative;
      height: 230px;
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(7,10,18,.55);
      overflow:hidden;
    }
    .map svg{
      position:absolute; inset:0;
      width:100%; height:100%;
    }
    .map .veh{
      position:absolute;
      width:12px;height:12px;border-radius:99px;
      transform: translate(-50%,-50%);
      border:2px solid rgba(3,16,23,.65);
      background: var(--cyan);
      will-change: transform;
    }
    .map .veh.orange{background: var(--amber)}
    .map .veh::after{
      content:"";
      position:absolute; inset:-9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.07);
    }

    .mini{
      display:grid;
      gap:10px;
      grid-template-columns: 1fr;
      margin-top: 10px;
    }
    .mini-card{
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.80);
      padding: 12px;
    }
    .mini-top{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:8px;
    }
    .mini-top strong{
      font-size: 12px;
      letter-spacing:.18em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .spark{
      width: 86px; height: 22px;
      border-radius: 999px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.65);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .spark svg{width:100%; height:100%}
    .mini-val{
      display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    }
    .mini-val b{
      font-size: 22px;
      font-weight: 950;
      letter-spacing:-.02em;
    }
    .mini-val span{
      font-size: 12px;
      color: var(--muted);
    }

    .cards{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
      margin-top: 12px;
    }
    .card{
      border-radius: 20px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.80);
      padding: 14px;
      transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
    }
    .card:focus-within, .card:hover{
      transform: translateY(-1px);
      border-color: rgba(0,229,255,.25);
      background: rgba(11,17,34,.92);
    }
    .card-top{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .ico{
      width:44px;height:44px;border-radius:16px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.65);
      display:grid; place-items:center;
      flex:0 0 auto;
    }
    .ico svg{width:18px;height:18px}
    .pill{
      font-size: 12px;
      color: var(--muted);
      border:1px solid rgba(28,37,64,.9);
      border-radius: 999px;
      padding: 8px 10px;
      background: rgba(14,20,38,.55);
      white-space:nowrap;
    }
    .card h4{
      margin: 0 0 6px 0;
      font-size: 16px;
      font-weight: 950;
      letter-spacing:-.01em;
    }
    .card p{
      margin:0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.55;
    }

    .route{
      border-radius: 20px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(7,10,18,.55);
      overflow:hidden;
      position:relative;
      height: 250px;
    }
    .route svg{
      position:absolute; inset:0;
      width:100%; height:100%;
    }
    .route .dash{
      stroke-dasharray: 10 10;
      animation: dash 1.2s linear infinite;
      opacity:.9;
    }
    @keyframes dash{
      to{stroke-dashoffset:-40}
    }
    .route .dot{
      fill: var(--cyan);
      stroke: rgba(3,16,23,.65);
      stroke-width: 2;
    }
    .route .dot.orange{fill: var(--amber)}
    .route .eta{
      position:absolute;
      left: 12px;
      right: 12px;
      bottom: 12px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .eta .tile{
      flex:1 1 140px;
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.82);
      padding: 12px;
      min-height: 72px;
    }
    .tile .t{
      font-size: 12px;
      color: var(--muted);
      letter-spacing:.18em;
      text-transform: uppercase;
      margin:0 0 6px 0;
    }
    .tile .v{
      margin:0;
      font-size: 22px;
      font-weight: 950;
      letter-spacing:-.02em;
    }
    .tile .v.cyan{color: var(--cyan)}
    .tile .v.amber{color: var(--amber)}

    .chart-card{
      border-radius: 20px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.80);
      padding: 14px;
    }
    .chart-hd{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom: 12px;
    }
    .chart-hd h3{
      margin:0;
      font-size: 14px;
      font-weight: 950;
      letter-spacing:.02em;
    }
    canvas{
      width:100%;
      height: 150px;
      border-radius: 16px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.55);
      display:block;
    }
    .metric-row{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-top:12px;
    }
    .metric{
      border-radius: 18px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.55);
      padding: 12px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .metric b{
      font-size: 18px;
      font-weight: 950;
      letter-spacing:-.02em;
    }
    .metric span{
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.18em;
      text-transform: uppercase;
    }

    .logos{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 10px;
    }
    .logo-chip{
      flex: 1 1 120px;
      border-radius: 999px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.55);
      padding: 10px 12px;
      color: rgba(234,240,255,.85);
      font-weight: 900;
      letter-spacing:.08em;
      text-transform: uppercase;
      font-size: 11px;
      text-align:center;
      user-select:none;
    }

    .quote{
      border-radius: 20px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.80);
      padding: 14px;
      margin-top: 12px;
      position:relative;
      overflow:hidden;
    }
    .quote p{
      margin:0;
      font-size: 14px;
      line-height:1.65;
      color: rgba(234,240,255,.92);
    }
    .quote .who{
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.14em;
      text-transform: uppercase;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .qnav{
      display:flex; gap:8px;
    }
    .qdot{
      width:10px;height:10px;border-radius:999px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(14,20,38,.55);
      padding:0;
      cursor:pointer;
      touch-action: manipulation;
    }
    .qdot[aria-current="true"]{
      background: var(--cyan);
      border-color: rgba(255,255,255,.35);
    }

    .cta{
      background: rgba(0,229,255,.10);
      border-color: rgba(0,229,255,.22);
    }
    .cta .section-inner{
      padding: 18px 16px 16px;
    }
    .cta h2{
      margin:0;
      font-size: 22px;
      font-weight: 950;
      letter-spacing:-.02em;
      line-height:1.15;
    }
    .cta p{
      margin: 10px 0 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.55;
    }
    .cta .cta-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }
    .btn-amber{
      background: var(--amber);
      color:#140B00;
      border:1px solid transparent;
    }

    .footer{
      margin: 14px 0 10px;
      border:1px solid rgba(28,37,64,.9);
      background: rgba(11,17,34,.65);
      border-radius: 22px;
      overflow:hidden;
    }
    .footer .section-inner{
      padding: 14px 16px;
    }
    .foot{
      display:flex;
      flex-direction:column;
      gap:8px;
      color: var(--muted);
      font-size: 13px;
      line-height:1.4;
    }
    .foot b{color: rgba(234,240,255,.92)}
    .foot a{color: rgba(234,240,255,.92)}
    .sep{height:1px;background: rgba(28,37,64,.9); margin:10px -16px 0}

    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal.is-visible{
      opacity:1;
      transform: translateY(0);
    }

    @media (min-width: 420px){
      :root{--h1:44px}
      .hero-media{height: 240px}
      .map{height: 250px}
      .route{height: 270px}
    }
    @media (prefers-reduced-motion: reduce){
      .reveal{opacity:1; transform:none; transition:none}
      .route .dash{animation:none}
      .icon-btn, .btn, .card{transition:none}
    }