/* Zippli — Velocity tokens (canonical: brand-identity/tokens.json) */
:root{
  --ultramarine:#2536F5; --ink:#0B1020; --lime:#C6F135; --surface:#F5F6FA;
  --muted-dark:#9AA0B4; --card-dark:#131A33;
  --ease:cubic-bezier(0.2,0,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--ink); color:#FFFFFF;
  font-family:Inter,system-ui,sans-serif; font-size:15px; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:#fff}
:focus-visible{outline:3px solid var(--lime); outline-offset:2px; border-radius:4px}
.mono{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
      letter-spacing:.12em; text-transform:uppercase; color:var(--muted-dark)}
header{display:flex; align-items:center; gap:12px; padding:24px 32px}
.wordmark{font-family:Sora,sans-serif; font-weight:600; font-size:24px;
          letter-spacing:-0.015em; transform:skewX(-12deg); display:inline-block}
/* language switcher — four stops, one route */
.lang{margin-left:auto; display:flex; gap:4px; background:var(--card-dark);
      border-radius:999px; padding:4px}
.lang button{
  font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  background:none; border:none; color:var(--muted-dark); cursor:pointer;
  padding:8px 14px; min-width:44px; min-height:36px; border-radius:999px;
  transition:background 160ms var(--ease), color 160ms var(--ease);
}
.lang button[aria-pressed="true"]{background:var(--ultramarine); color:#fff}
.lang button:hover{color:#fff}
main{flex:1; display:flex; flex-direction:column; justify-content:center;
     max-width:920px; width:100%; margin:0 auto; padding:32px}
.kicker{margin-bottom:16px}
h1{font-family:Sora,sans-serif; font-weight:600; font-size:clamp(32px,6vw,44px);
   line-height:1.1; letter-spacing:-0.02em; max-width:18ch}
.sub{color:var(--muted-dark); max-width:56ch; margin-top:16px}
.route{margin:48px 0 32px; width:100%; max-width:640px}
.route .dash{stroke:var(--lime); stroke-width:2; fill:none;
  stroke-dasharray:4 3; animation:routeDash 1s linear infinite}
.route .pin{fill:#fff}
.route .pin-end{fill:var(--lime)}
@keyframes routeDash{to{stroke-dashoffset:-28}}
/* language-switch delivery moment: line draws itself once, then resumes dashing */
.route.deliver .dash{stroke-dasharray:900; stroke-dashoffset:900;
  animation:routeDeliver 640ms var(--ease) forwards}
@keyframes routeDeliver{to{stroke-dashoffset:0}}
.chip{display:inline-flex; align-items:center; gap:8px;
      background:var(--card-dark); border-radius:999px; padding:8px 16px;
      font-family:"IBM Plex Mono",monospace; font-size:13px; color:#fff}
.chip svg{flex:none}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
       gap:24px; margin-top:64px}
.facts h3{font-family:Sora,sans-serif; font-weight:600; font-size:18px; line-height:1.3}
.facts p{color:var(--muted-dark); font-size:13px; line-height:1.55; margin-top:4px}
footer{display:flex; justify-content:space-between; align-items:center;
       padding:24px 32px; color:var(--muted-dark); font-size:13px; gap:16px; flex-wrap:wrap}
@media (max-width:560px){
  header{flex-wrap:wrap}
  .lang{margin-left:0; width:100%; justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){
  .route .dash, .route.deliver .dash{animation:none; stroke-dasharray:4 3; stroke-dashoffset:0}
  *{transition-duration:80ms !important}
}